javascript - 计算文本框的输入并更新另一个文本框而无需重新加载页面

Question

我的用户界面 - http://puu.sh/bbx5G/33953b74ea.png

我想计算 5 篇论文的分数 -> 在第一个文本框中输入并更新第二个文本框(具有同等等级)，而无需重新加载页面。这意味着，当我打字时，成绩文本框应该更新。我尝试运行一个 for 循环，并在点击提交按钮后迭代 ma​​rks 和 grades 的 5 个 ID，但它似乎不起作用。因此，首先我需要完成这项工作，然后，我想要一些可以在我输入分数时立即更新成绩字段的东西。 我的 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>