輸入不更新其依賴輸入

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

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

而且這裏是javascript代碼，當我把它寫在JavaScript對話框不工作的小提琴。 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

這個原因，你都在主代碼oninput事件改變計費代碼輸入值，你需要補充一點，說明變更的價值，您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>