入力が依存入力を更新しない

Question

ここに4つの入力フィールドがあります。

//Main Category 
<select id="category" name="category" required onchange="jsfunction(this)"> 
      <option value=""></option> 
      <option value="Non-Current Asset">Non-Current Asset 11</option> 
      <option value="Current Asset">Current Asset 12</option> 
</select><br> 

//Sub Code 
    <input id="sub_code" type="number" min="11" max="99" name="sub_code" required placeholder="11 to 99" oninput="account_code.value = parseInt(main_code.value + sub_code.value)"><br> 
//Main Code 
    <input id="main_code" type="text" name="main_code" readonly placeholder="Do not fill this." oninput="account_code.value = parseInt(main_code.value + sub_code.value)"><br> 
// Account Code 
    <input id="account_code" type="text" max="2" name="account_code" readonly placeholder="Do not fill this."> 

「メインカテゴリ」入力を選択すると、「メインコード」フィールドが正しく更新されます。

"アカウントコード"フィールドは、 "サブコード"と "アカウントコード"のマージです。

「サブコード」が既に入力されているときに「メインカテゴリ」入力を変更すると、この変更は「アカウントコード」フィールドには転送されません。

はここにもここで私はJAVASCRIPTボックスに書き込む際にjavascriptのコードが動作しないフィドルがある私のJavascript

<script> 
function jsfunction(element) 
{ 
    var mnCode = element.options[element.selectedIndex].text; 
    mnCode = mnCode.replace(/[^0-9]/g, ''); 
    document.getElementById("main_code").value=mnCode; 
} 
</script> 

です。 https://jsfiddle.net/caabdul/8jpdtqs0/

function jsfunction(element) 
 
{ 
 
    var mnCode = element.options[element.selectedIndex].text; 
 
    mnCode = mnCode.replace(/[^0-9]/g, ''); 
 
    document.getElementById("main_code").value=mnCode; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Main Category* <select id="category" name="category" required onchange="jsfunction(this)"> 
 
         <option value=""></option> 
 
         <option value="Non-Current Asset">Non-Current Asset 11</option> 
 
         <option value="Current Asset">Current Asset 12</option> 
 
         </select><br> 
 
Sub Code*  <input id="sub_code" type="number" min="11" max="99" name="sub_code" required placeholder="11 to 99" oninput="account_code.value = parseInt(main_code.value + sub_code.value)"><br> 
 
Main Code  <input id="main_code" type="text" name="main_code" readonly placeholder="Do not fill this." oninput="account_code.value = parseInt(main_code.value + sub_code.value)"><br> 
 
Account Code* <input id="account_code" type="text" max="2" name="account_code" readonly placeholder="Do not fill this.">

Answer 1

あなたのコードにはいくつかの問題があります。

1. あなたが値を変更しているときにトリガされませんので、あなたはコード内で手動でoninputイベントをトリガする必要がありますがプログラム的に
2. 加算の前に文字列値を解析すると、結果は入力値の文字列連結になります。

Main Category* 
 
<select id="category" name="category" required onchange="jsfunction(this)"> 
 
    <option value=""></option> 
 
    <option value="Non-Current Asset">Non-Current Asset 11</option> 
 
    <option value="Current Asset">Current Asset 12</option> 
 
</select> 
 
<br>Sub Code* 
 
<input id="sub_code" type="number" min="11" max="99" name="sub_code" required placeholder="11 to 99" oninput="account_code.value = (Number(main_code.value) + Number(sub_code.value))||0"> 
 
<br>Main Code 
 
<input id="main_code" type="text" name="main_code" readonly placeholder="Do not fill this." oninput="account_code.value = (Number(main_code.value) + Number(sub_code.value))||0"> 
 
<br>Account Code* 
 
<input id="account_code" type="text" max="2" name="account_code" readonly placeholder="Do not fill this."> 
 
<script> 
 
    function jsfunction(element) { 
 
    var mnCode = element.options[element.selectedIndex].text; 
 
    var input = document.getElementById("main_code"); 
 
    mnCode = mnCode.replace(/[^0-9]/g, ''); 
 
    input.value = mnCode; 
 
    input.oninput() 
 
    } 
 
</script>

Answer 2

この原因あなたが説明にごfunction jsfunction(element)

<script> 
function jsfunction(element) 
{ 
    var mnCode = element.options[element.selectedIndex].text; 
    mnCode = mnCode.replace(/[^0-9]/g, ''); 
    document.getElementById("main_code").value=mnCode; 
    account_code.value = parseInt(main_code.value + sub_code.value); 
}</script>