Рассчитайте ввод текстового поля и обновить другой без перезагрузки страницы

Question

моего UI - http://puu.sh/bbx5G/33953b74ea.png

Я хочу, чтобы вычислить следы 5 работ -> ввод в текстовом поле 1 и обновление 2 текстового поле (с эквивалентной степенью) без перезагрузки страницы. Это означает, что при вводе текста текстовое поле класса должно быть обновлено. Я попытался запустить цикл for и пронести по 5 идентификаторам отметки и после нажатия кнопки отправки, но, похоже, это не сработало. Поэтому сначала мне нужно сделать эту работу, и после этого я хочу что-то, что мгновенно обновит поле , пока я наберу отметки. Мои HTML формы, имеющие таблицы:

<td><input type="text" id="pm1" onkeypress="validate(event)" onchange="" maxlength=3/> = 
<input type="text" id="pg1" onkeypress="return inputLimiter(event)" maxlength=1/></td> 
<td><input type="text" id="pm2" onkeypress="validate(event)" maxlength=3/> = 
<input type="text" id="pg2" onkeypress="return inputLimiter(event)" maxlength=1/></td> 
..... upto pm5 and pg5 

Мои Javascript:

function calculate_g(){ 
var i = 1; 
var m = 0.0; 
var p = 0.0; 
var g = ''; 
for(i = 1; i <= 5; i++) 
    { 
     m = document.getElementById("pm"+i).value; 
     p = (m/80.00) * 100.00;  
     if(p >= 45.00 && p <= 49.99) { g = 'P'; } 
     if(p >= 50.00 && p <= 54.99) { g = 'E'; } 
     if(p >= 55.00 && p <= 59.99) { g = 'D'; } 
     if(p >= 60.00 && p <= 69.99) { g = 'C'; } 
     if(p >= 70.00 && p <= 74.99) { g = 'B'; } 
     if(p >= 75.00 && p <= 79.99) { g = 'A'; } 
     if(p >= 80.00) { g = 'O'; } 
     document.getElementById("pg"+i).value = g; 
    } 
} 

Answer 1

Чтобы обновить поля без перезагрузки страницы, вы можете структурировать свой код так и расширять его по мере необходимости для большего количества входов. Вы можете сделать проверки на формы или на KeyUp, в зависимости от того проще:

JSFIDDLE: http://jsfiddle.net/biz79/fesjejnp/

<table> 
<tr><td> 
     ESE1<input type="text" id="pm1" onkeyup="calc()" maxlength=3/> = 
     PR1<input type="text" id="pg1" maxlength=1/ class="pipe" readonly> 
    </td></tr> 
    <tr><td> 
     ESE2<input type="text" id="pm2" onkeyup="calc()" maxlength=3/> = 
     PR2<input type="text" id="pg2" maxlength=1/ class="pipe" readonly></td></tr> 
</table> 

<script> 

function calc() { 
    var m; 
    var p = 0.0; 
    var g = ''; 

    for (var i = 1; i < 3; i++) { 
     m = document.getElementById("pm" + i).value;  
     g = getGrade(p,m); 
     document.getElementById("pg" + i).value = g; 
    } 
} 

function getGrade(p,m) { 
    var g; 
    p = (m/80.00) * 100.00;  
    if(p >= 45.00 && p <= 49.99) { g = 'P'; } 
    else if(p >= 50.00 && p <= 54.99) { g = 'E'; } 
    else if(p >= 55.00 && p <= 59.99) { g = 'D'; } 
    else if(p >= 60.00 && p <= 69.99) { g = 'C'; } 
    else if(p >= 70.00 && p <= 74.99) { g = 'B'; } 
    else if(p >= 75.00 && p <= 79.99) { g = 'A'; } 
    else if(p >= 80.00) { g = 'O'; } 
    else { g = 'X'; } 
    return g; 
} 
</script> 

Answer 2

попробовать это будет решать все требования,

JSFIDDLE Ссылка: http://jsfiddle.net/8fkkqvt8/ `

<table border="2"> 
    <tr> 
    <td><input type="text" id="pm1" onkeyup="calculate_g()" onchange="" maxlength=3/> = 
    <input type="text" id="pg1" disabled="disabled"/></td> 
    <td><input type="text" id="pm2" onkeypress="validate(event)" maxlength=3/> = 
    <input type="text" id="pg2" onkeypress="return inputLimiter(event)" maxlength=1/></td> 
    </tr> 
</table> 
<script> 

function calculate_g(){ 
    var i = 1; 
    var m = 0.0; 
    var p = 0.0; 
    var g = ''; 
    for(i = 1; i <= 2; i++){ 
     m = document.getElementById("pm"+i).value;  
     p = (m/80.00) * 100.00;   
     if(p >= 45.00 && p <= 49.99) { g = 'P'; } 
     if(p >= 50.00 && p <= 54.99) { g = 'E'; } 
     if(p >= 55.00 && p <= 59.99) { g = 'D'; } 
     if(p >= 60.00 && p <= 69.99) { g = 'C'; } 
     if(p >= 70.00 && p <= 74.99) { g = 'B'; } 
     if(p >= 75.00 && p <= 79.99) { g = 'A'; } 
     if(p >= 80.00) { g = 'O'; }  
     document.getElementById("pg"+i).value = g; 
    } 

} 
</script> 

`

Answer 3

<table> 
<tr> 
    <td> 
     <b> 
      ESE1 
     </b> 
    </td> 
    <td> 
     <input type="text" class="grade" size="5" maxlength="5" value="0" /> 
    </td> 
    <td> 
     <b> 
      = PR1 
     </b> 
    </td> 
    <td> 
     <input type="text" class="letter" size="5" maxlength="5" value="X" /> 
    </td> 
</tr> 

<tr> 
    <td> 
     <b> 
      ESE2 
     </b> 
    </td> 
    <td> 
     <input type="text" class="grade" size="5" maxlength="5" value="0" /> 
    </td> 
    <td> 
     <b> 
      = PR2 
     </b> 
    </td> 
    <td> 
     <input type="text" class="letter" size="5" maxlength="5" value="X" /> 
    </td> 
</tr> 

<tr> 
    <td> 
     <b> 
      ESE3 
     </b> 
    </td> 
    <td> 
     <input type="text" class="grade" size="5" maxlength="5" value="0" /> 
    </td> 
    <td> 
     <b> 
      = PR3 
     </b> 
    </td> 
    <td> 
     <input type="text" class="letter" size="5" maxlength="5" value="X" /> 
    </td> 
</tr> 

<tr> 
    <td> 
     <b> 
      ESE4 
     </b> 
    </td> 
    <td> 
     <input type="text" class="grade" size="5" maxlength="5" value="0" /> 
    </td> 
    <td> 
     <b> 
      = PR4 
     </b> 
    </td> 
    <td> 
     <input type="text" class="letter" size="5" maxlength="5" value="X" /> 
    </td> 
</tr> 

<tr> 
    <td> 
     <b> 
      ESE5 
     </b> 
    </td> 
    <td> 
     <input type="text" class="grade" size="5" maxlength="5" value="0" /> 
    </td> 
    <td> 
     <b> 
      = PR5 
     </b> 
    </td> 
    <td> 
     <input type="text" class="letter" size="5" maxlength="5" value="X" /> 
    </td> 
</tr> 

Использование JQuery .each функция

$ (функция() {

var letter = (e) => (e >= 80) ? 'O' : 
        (e >= 75) ? 'A' : 
        (e >= 70) ? 'B' : 
        (e >= 60) ? 'C' : 
        (e >= 55) ? 'D' : 
        (e >= 50) ? 'E' : 
        (e >= 45) ? 'P' : 'X'; 

$('.grade').keyup(function(e) { 
    $('.grade').each(function(index) { 
     var val = parseFloat($('.grade:eq(' + index + ')').val()) * 1.25 || 0; 
     $('.letter:eq(' + index + ')').val(letter(val)); 
    }); 
}); 

});

http://jsfiddle.net/0mjsgpc3/7/