[英]Add input fields and validate the sum against total using javascript
I am trying to get the sum of the values entered into the age input fields upon change. 我试图获取更改后输入到年龄输入字段中的值的总和。 Then I need to validate the sum of ages against the total number of students trained.
然后,我需要根据受过训练的学生总数来验证年龄总和。 If the total number of students trained does not match the sum of the students ages I want to throw an error.
如果受训的学生总数与学生年龄的总和不符,我想抛出一个错误。 I am coding in C#.
我在用C#编码。
Here is my html code: 这是我的html代码:
<h4>Training</h4>
<b>Total number of students in training:</b> <input type="number" name="Total Number students trained" min="0"><span style="color: #f00">
<h5>Ages of Students </h5>
<table>
<tr>
<td><label for="age 18" class="float-left"> <18:</label> <input type="number" min="0" max="500" name="age 18" oninput="calcage"> </td>
<td><label for="age 24" class="float-left">18-24:</label> <input type="number" min="0" name="age 24 oninput="calcage"> </td>
<td><label for="age 34" class="float-left">25-34:</label> <input type="number"min="0" name="age 34" oninput="calcage"> </td>
<td><label for="age 44" class="float-left">35-44:</label> <input type="number" min="0" name="age 44" oninput="calcage"> </td>
</tr>
</table>
Here is my javascript: 这是我的JavaScript:
function calcage() {
var score = 0;
$(".age:input").each(function () {
score += parseInt(this.value);
});
$("input[name=Score]").val(score)
}
$().ready(function () {
$(".age").change(function () {
calcage()
});
});
Your HTML has a few errors: 您的HTML有一些错误:
<input>
elements need to have class="age"
added to them so that they are recognized by the $(".age:input").each()
function. <input>
元素需要添加class="age"
,以便由$(".age:input").each()
函数识别。 name
of your second <input>
element is missing the closing double quote ( "
). name
的第二<input>
元素缺少闭双引号( "
)。 ()
) after the calcage
calls in your oninput
events. oninput
事件中的calcage
调用之后,您缺少括号( ()
)。 However, since you are using the $(".age").change()
function to call the calcage()
function, it is not necessary to also have the oninput
event call the calcage()
function. $(".age").change()
函数来调用calcage()
函数,因此也不必使oninput
事件也可以调用calcage()
函数。 Also, the oninput
event is called every time an input changes without waiting until all changes are complete. oninput
事件,而无需等待所有更改完成。 This means that if a student entered an age of "30", the calcage
function would be called twice: first for the "3", and then again for the "0". calcage
功能将被调用两次:首先输入“ 3”,然后再次输入“ 0”。 Since this is not what you want, those event handlers can be removed from the inputs. $(".age").change()
since this will only fire once the student has finished typing. $(".age").change()
因为这只会在学生完成键入后才会触发。 It will work once your <input>
elements have the class="age"
added to them. <input>
元素添加了class="age"
,它将起作用。 <label>
elements for attribute will only work when there is an <input>
element with a matching id
value. <label>
元素仅在存在具有匹配id
值的<input>
元素时才起作用。 Try the following corrected HTML: 尝试使用以下更正的HTML:
<h4>Training</h4>
<b>Total number of students in training:</b> <input type="number" name="Total Number students trained" min="0"><span style="color: #f00">
<h5>Ages of Students </h5>
<table>
<tr>
<td><label for="age 18" class="float-left"> <18:</label> <input class="age" type="number" min="0" max="500" name="age 18"> </td>
<td><label for="age 24" class="float-left">18-24:</label> <input class="age" type="number" min="0" name="age 24"> </td>
<td><label for="age 34" class="float-left">25-34:</label> <input class="age" type="number" min="0" name="age 34"> </td>
<td><label for="age 44" class="float-left">35-44:</label> <input class="age" type="number" min="0" name="age 44"> </td>
</tr>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.