當更新另一個輸入字段時更新輸入字段

Question

我無法使其工作。

我得到了兩種形式，「mult」和「mult2」，其中有一個腳本可以通過兩個簡單的計算來運行。這兩個字段都依賴於稱爲「配方」的另一種形式的數據。

事情是，我實際上可以得到一種形式的工作，就像我所做的一樣（查看我所有的代碼在這裏） - 奇怪的是，它只有mult2工作並執行所有計算。 Mult1沒有做任何事情。最後需要更新的字段是「gravity」和「gravity2」 - 只有「gravity2」會隨計算結果更新。

我知道這是一些長碼位在這裏，但希望你能幫助我..

這裏是「配方」的形式：

<form name="recipe"> 
<input type="text" size="1" maxlength="3" name="batchVal" value="30" onChange="calculate(malt1); calculate(malt2)"></td> 
<input type="text" size="1" maxlength="3" name="efficiencyVal" value="75" onChange="calculate(malt1); calculate(malt2)"></td> 
</form> 

這裏是兩種形式，「MULT」和「MULT2」這都需要相同datainputs從「處方」的形式：

<form name="mult"> 
     <select id="malt" name="malt" onChange="UpdateNextField(this,'ppg')"> 
     <option>Choose fermentable..</option> 
     <?php 

     $query = $mysqli->prepare("SELECT id,maltname,maltebc,maltppg FROM malt WHERE mainid = ?"); 

     $mainidcolumn = "1"; 

     /* bind parameters */ 
     $query->bind_param("i", $mainidcolumn); 
     $query->execute(); 

     $menu_result = $query->get_result(); 

     /* now you can fetch the results into an array */ 
     while ($menu = $menu_result->fetch_assoc()) { 
     echo '<option value="'.$menu['maltppg'].'">' . $menu['maltname'] . ' ' . $menu['maltebc'] . ' EBC</option>'; 

     } 
     echo '</select>'; 
    ?> 

     <input type="text" id="ebcfield" size="1" maxlength="3"> 
    <input type="text" name="weightVal" size="1" maxlength="5" value="0" onChange="calculate(malt1)"> 
     <input name="grainpercent" type="text" id="grainpercent" size="1" maxlength="2"> 
     <input type="text" id="gravity" size="1" value="0" maxlength="4"> 
     <input name="graincolor" type="text" id="graincolor" size="1" maxlength="3"> 
     <input type="text" name="ppgVal" id="ppg" onMouseMove="calculate(malt1)"> 
    </form> 

<form name="mult2"> 
     <select id="malt" name="malt" onChange="UpdateNextField(this,'ppg2')"> 
     <option>Choose fermentable..</option> 
     <?php 

     $query = $mysqli->prepare("SELECT id,maltname,maltebc,maltppg FROM malt WHERE mainid = ?"); 

     $mainidcolumn = "1"; 

     /* bind parameters */ 
     $query->bind_param("i", $mainidcolumn); 
     $query->execute(); 

     $menu_result = $query->get_result(); 

     /* now you can fetch the results into an array */ 
     while ($menu = $menu_result->fetch_assoc()) { 
     echo '<option value="'.$menu['maltppg'].'">' . $menu['maltname'] . ' ' . $menu['maltebc'] . ' EBC</option>'; 

     } 
     echo '</select>'; 
    ?> 

     <input type="text" id="ebcfield" size="1" maxlength="3"> 
    <input type="text" name="weightVal2" size="1" maxlength="5" value="0" onChange="calculate(malt2)"> 
     <input name="grainpercent" type="text" id="grainpercent" size="1" maxlength="2"> 
     <input type="text" id="gravity2" size="1" value="0" maxlength="4"> 
     <input name="graincolor" type="text" id="graincolor" size="1" maxlength="3"> 
     <input type="text" name="ppgVal2" id="ppg2" onMouseMove="calculate(malt2)"> 
    </form> 

最後，做基於輸入字段中的數據計算的JavaScript。計算（麥芽1）和計算（麥芽2）做同樣的事情，它只是同一計算的兩個實例。

<script type = "text/javascript"> 
function UpdateNextField(which,ppg) { 
document.getElementById(ppg).value = which.value; 
} 

function UpdateNextField(which,ppg2) { 
document.getElementById(ppg2).value = which.value; 
} 

</script> 

<!-- calculations for malt 1-5 --> 

<!-- form 1 - fermentable 1 --> 
<script type="text/javascript"> 

    function calculate(malt1){ 
    var weightVal = document.mult.weightVal.value; 
    var ppgVal = document.mult.ppgVal.value; 
    var batchVal = document.recipe.batchVal.value; 
    var efficiencyVal = document.recipe.efficiencyVal.value; 
    var showValue = 0; 

    var showValue = ((weightVal * ppgVal * 0.000008345) * (efficiencyVal) * 10)/batchVal + (1000); 
    showValue = Math.round(showValue * 1)/1; 
    if (!isNaN(showValue)) { 
       document.getElementById('gravity').value = showValue; 
      } 
    } 


    function calculate(malt2){ 
    var weightVal2 = document.mult2.weightVal2.value; 
    var ppgVal2 = document.mult2.ppgVal2.value; 
    var batchVal = document.recipe.batchVal.value; 
    var efficiencyVal = document.recipe.efficiencyVal.value; 
    var showValue2 = 0; 

    var showValue2 = ((weightVal2 * ppgVal2 * 0.000008345) * (efficiencyVal) * 10)/batchVal + (1000); 
    showValue2 = Math.round(showValue2 * 1)/1; 
    if (!isNaN(showValue2)) { 
       document.getElementById('gravity2').value = showValue2; 
      } 
    } 
    </script> 

Answer 1

正如Jay和LcLk指出的，你的函數名和重複ID有一些問題。但是，假設您解決了這些問題，您可以使用jQuery節省大量時間和悲傷。例如：

HTML

<input type="text" id="first" /> 
<input type="text" id="second" /> 

的Javascript

$("#first").keypress(function(){ 
    /* your custom code goes here */ 
    console.log("A key was pressed."); 
}); 

它說的是，任何時候在選擇第一輸入按下一個鍵，就會在打印出A key was pressed控制檯。然後，您可以直接從該匿名內部函數中調用您的計算函數，或直接將它們傳遞給keypress();。