Javascript 动态添加表单值_Javascript

Javascript 动态添加表单值

javascript

Javascript 动态添加表单值,javascript,Javascript,我有一段JavaScript代码，可以在表单中输入值时动态添加值。然而，我正在为我想做的事情而挣扎我在一次测验中有4个问题，每个问题有4个答案我想为每个问题的4个答案框中的每一个添加值。但我无法在一个页面上多次使用此脚本。有人能给我建议吗函数updatesum1（）{ document.form.sum.value=（document.form.sum1.value-0） +（document.form.sum2.value-0） +（document.form.sum3.value-

我有一段JavaScript代码，可以在表单中输入值时动态添加值。然而，我正在为我想做的事情而挣扎

我在一次测验中有4个问题，每个问题有4个答案

我想为每个问题的4个答案框中的每一个添加值。但我无法在一个页面上多次使用此脚本。有人能给我建议吗


函数updatesum1（）{
document.form.sum.value=（document.form.sum1.value-0）
+（document.form.sum2.value-0）
+（document.form.sum3.value-0）
+（document.form.sum4.value-0）；
}
输入一个数字：
还有一个号码：
还有一个号码：
还有一个号码：
其总数为：

将表单作为参数传递给函数，而不是在函数中对其进行硬编码。在输入元素中，

this.form

引用包含它的表单

函数更新sum1（表单）{
form.sum.value=（form.sum1.value-0）+
（form.sum2.value-0）+
（form.sum3.value-0）+
（表4.sum4.value-0）；
}


输入一个数字：


还有一个号码：


还有一个号码：


还有一个号码：


其总数为：

输入一个数字：


还有一个号码：


还有一个号码：


还有一个号码：


其总数为：

这不是我应该怎么做的，但它在chrome中改变了你想要的“总和”

如果你能使用jQuery，我会走这条路


$（文档）.ready（函数（）{
$（“.addInput”）。在（“change”上，函数（）{//jQuery的on事件处理所有输入
updateSum（）；//调用函数
});
函数updateSum（）{//可以使此函数更通用。
var sum1=parseInt（$（“#sum1”）.val（）；
var sum2=parseInt（$（“#sum2”）.val（）；
var sum3=parseInt（$（“#sum3”）.val（）；
var sum4=parseInt（$（“#sum4”）.val（）；
如果（isNaN（sum1））{//请确保输入包含可解析的数字。
sum1=0；
}
if（isNaN（sum2））{
sum2=0；
}
if（isNaN（sum3））{
sum3=0；
}
if（isNaN（sum4））{
sum4=0；
}
var sum=sum1+sum2+sum3+sum4；//将所有内容相加
$（“#sum”）.val（sum）；//将其添加到te sum输入中
}
});
//函数updatesum1（）{
//document.form.sum.value=（document.form.sum1.value-0）
//+（document.form.sum2.value-0）
//+（document.form.sum3.value-0）
//+（document.form.sum4.value-0）；
//}
输入添加
输入一个数字：
还有一个号码：
还有一个号码：
还有一个号码：
其总数为：

希望这有帮助

你检查控制台了吗？PHP在哪里？PHP在提交后出现-我想在提交前添加它。还没到那个地步，因为我无法让它在每页上运行不止一次：-（@Neil添加完整代码，PHP也是，如果没有contextPress F12在浏览器中打开开发工具并查看Javascript控制台中是否有错误消息，那就帮不上忙了。谢谢大家，真的很有帮助！

    <script type="text/javascript">
        $(document).ready(function () {

            $(".addInput").on("change", function () {//jQuery's on event handles all inputs

                updateSum();//call the function
            });

            function updateSum() {//This function could be made more generic.

               var sum1 = parseInt($("#sum1").val());
               var sum2 = parseInt($("#sum2").val());
               var sum3 = parseInt($("#sum3").val());
               var sum4 = parseInt($("#sum4").val());

               if(isNaN(sum1)){//make sure the input contains a parsable number.
                   sum1 = 0;
               }
               if(isNaN(sum2)){
                   sum2 = 0;
               }
               if(isNaN(sum3)){
                   sum3 = 0;
               }
               if(isNaN(sum4)){
                   sum4 = 0;
               }

               var sum = sum1 + sum2 + sum3 + sum4;//add everything up


                $("#sum").val(sum);//add it to te sum input
            }
        });

        //function updatesum1() {
        //    document.form.sum.value = (document.form.sum1.value - 0)
        //                            + (document.form.sum2.value - 0)
        //                            + (document.form.sum3.value - 0)
        //                            + (document.form.sum4.value - 0);
        //}
    </script>
    <title>Input Adding</title>
</head>
<body>
    <form name="form" >
        Enter a number:
        <input name="sum1" class="addInput" id="sum1" value/>
        and another number:
        <input name="sum2" class="addInput" id="sum2" value/>
        and another number:
        <input name="sum3" class="addInput" id="sum3" value/>
        and another number:
        <input name="sum4" class="addInput" id="sum4" value/>
        Their sum is:
        <input name="sum" id="sum" readonly style="border:0px;">
    </form>       

</body>