当文本字段发生变化时，检查表单的有效性，就像gmail注册表单一样
check validations of form whenever a change in textfield occurs just like in gmail signup form
我有一个代码的两个数字的乘法使用Java脚本，但我的目标是执行操作，而不使用该按钮，它应该发生与两个文本字段对。只要在两个文本字段中都输入了两个输入，乘法函数就应该自动启动，而不需要使用任何按钮，并且无论两个文本字段中给出的值如何，都应该显示输出。
<html>
<head>
<title>Arithmetic operations</title>
</head>
<script type="text/javascript">
function Multiplication()
{
var x,y,z;
x=calc.value1.value;
y=calc1.value2.value;
z=x*y;
calc1.value3.value=z
}
</script>
</head>
<body>
<form name="calc">
<h1>Online Calculator</h1>
Enter first Numeric Value :
<input
id="value1"
type = "text"
onchange = "Multiplication();"
onkeypress = "this.onchange();"
onpaste = "this.onchange();"
oninput = "this.onchange();"
onloadstart ="this.onchange();"
value = "5"
/></form>
</br><form name="calc1">
Enter Second Numeric Value :
<input
id="value2"
type = "text"
onchange = "Multiplication();"
onloadstart="this.onchange();"
onkeypress = "this.onchange();"
onpaste = "this.onchange();"
oninput = "this.onchange();"
value = "1"
/>
</br>
</br>
Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
</form>
<form name="calc">
<h1>Online Calculator</h1>
Enter first Numeric Value :
<input
id="value1"
type = "text"
onchange = "Multiplication();"
onkeypress = "this.onchange();"
onpaste = "this.onchange();"
oninput = "this.onchange();"
onloadstart ="this.onchange();"
value = "5"
/></form>
</br><form name="calc1">
Enter Second Numeric Value :
<input
id="value2"
type = "text"
onchange = "Multiplication();"
onloadstart="this.onchange();"
onkeypress = "this.onchange();"
onpaste = "this.onchange();"
oninput = "this.onchange();"
value = "1"
/>
</br>
</br>
Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
</form>
</body>
</html>我想这就是你要找的:
改变计数，它表示表单的数量。
<html>
<head>
<title>Arithmetic operations</title>
</head>
<script type="text/javascript">
function Multiplication(o1, o2, o3){
var x,y,z;
x=o1.value;
y=o2.value;
z=x*y;
o3.value=z
}
function calcForm(formNode){
Multiplication(formNode.value1, formNode.value2, formNode.value3);
}
</script>
</head>
<body>
<div style="display:none">
<form name="calc">
<h1>Online Calculator</h1>
Enter first Numeric Value :
<input
id="value1"
type = "text"
onchange = "calcForm(this.parentNode)"
onkeypress = "this.onchange();"
onpaste = "this.onchange();"
oninput = "this.onchange();"
onloadstart ="this.onchange();"
value = "5"
/>
</br>
Enter Second Numeric Value :
<input
id="value2"
type = "text"
onchange = "calcForm(this.parentNode)"
onloadstart= "this.onchange();"
onkeypress = "this.onchange();"
onpaste = "this.onchange();"
oninput = "this.onchange();"
value = "1"
/>
</br>
</br>
Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
</form>
</div>
<div id="i_container">
</div>
<script>
count = 15;
my_parent = document.getElementById('i_container');
for(i=0; i<count; i++){
nw = calc.cloneNode(true);
nw.name = "dynamic_name_"+i;
nw.id = "dynamic_id_"+i;
my_parent.appendChild(nw);
}
for(i=0; i<count; i++){
p = document.getElementById("dynamic_id_"+i);
calcForm(p);
}
</script>
</body>
</html>使用这里提到的:https://stackoverflow.com/a/14187495/2655623
结果是:
<html>
<head>
<title>Arithmetic operations</title>
</head>
<script type="text/javascript">
function Multiplication()
{
var x,y,z;
x=calc.value1.value;
y=calc.value2.value;
z=x*y;
calc.value3.value=z;
}
</script>
</head>
<body>
<form name="calc">
<h1>Online Calculator</h1>
Enter first Numeric Value :
<input
id="value1"
type = "text"
onchange = "Multiplication();"
onkeypress = "this.onchange();"
onpaste = "this.onchange();"
oninput = "this.onchange();"
value = "5"
/>
</br>
Enter Second Numeric Value :
<input
id="value2"
type = "text"
onchange = "Multiplication();"
onkeypress = "this.onchange();"
onpaste = "this.onchange();"
oninput = "this.onchange();"
value = "5"
/>
</br>
</br>
Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
<input type="button" Value="Multiplication" onClick=Multiplication()></br>
<script>
Multiplication(); // call this when you want to run the function on page load.
</script>
</form>
</body>
</html>你的页面错误比较多。以下是我编辑的内容。
-
为简单起见增加了另外两个函数calcForm1()和calcForm2()。
-
将文本的onChange()函数改为正确的函数
-
更改表单的id并合并它们。你有4个形式，你把每个文本在一个形式与相同的id，这是错误的。我删除了每个形式的第二种形式，只留下一个calc1和一个calc2。这里有4种钙的形式。如果你不想把这些表单发送到任何页面，删除表单，只使用文本。还可以更改表单的id和访问文本对象，(calc2.value2…
-
调用calcForm1()和calcForm2()计算加载页面时的值
就这样了:)
<html>
<head>
<title>Arithmetic operations</title>
</head>
<script type="text/javascript">
function Multiplication(o1, o2, o3){
var x,y,z;
x=o1.value;
y=o2.value;
z=x*y;
o3.value=z
}
function calcForm1(){
Multiplication(calc1.value1, calc1.value2, calc1.value3);
}
function calcForm2(){
Multiplication(calc2.value1, calc2.value2, calc2.value3);
}
</script>
</head>
<body>
<form name="calc1">
<h1>Online Calculator</h1>
Enter first Numeric Value :
<input
id="value1"
type = "text"
onchange = "calcForm1()"
onkeypress = "this.onchange();"
onpaste = "this.onchange();"
oninput = "this.onchange();"
onloadstart ="this.onchange();"
value = "5"
/>
</br>
Enter Second Numeric Value :
<input
id="value2"
type = "text"
onchange = "calcForm1()"
onloadstart= "this.onchange();"
onkeypress = "this.onchange();"
onpaste = "this.onchange();"
oninput = "this.onchange();"
value = "1"
/>
</br>
</br>
Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
</form>
<form name="calc2">
<h1>Online Calculator</h1>
Enter first Numeric Value :
<input
id="value1"
type = "text"
onchange = "calcForm2()"
onkeypress = "this.onchange();"
onpaste = "this.onchange();"
oninput = "this.onchange();"
onloadstart ="this.onchange();"
value = "5"
/>
</br>
Enter Second Numeric Value :
<input
id="value2"
type = "text"
onchange = "calcForm2()"
onloadstart= "this.onchange();"
onkeypress = "this.onchange();"
onpaste = "this.onchange();"
oninput = "this.onchange();"
value = "1"
/>
</br>
</br>
Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
</form>
<script>
calcForm1();
calcForm2();
</script>
</body>
</html>看看这个
如果您有其他问题，请创建一个新的问题，以便其他人可以参与。
<html>
<head>
<title>Arithmetic operations</title>
</head>
<script type="text/javascript">
function Multiplication(o1, o2, o3){
var x,y,z;
x=o1.value;
y=o2.value;
z=x*y;
o3.value=z
}
function calcForm(formNode){
Multiplication(formNode.value1, formNode.value2, formNode.value3);
}
</script>
</head>
<body>
<div style="display:none">
<form name="calc">
<h1>Online Calculator</h1>
Enter first Numeric Value :
<input
id="value1"
type = "text"
onchange = "calcForm(this.parentNode)"
onkeypress = "this.onchange();"
onpaste = "this.onchange();"
oninput = "this.onchange();"
onloadstart ="this.onchange();"
value = "5"
/>
</br>
Enter Second Numeric Value :
<input
id="value2"
type = "text"
onchange = "calcForm(this.parentNode)"
onloadstart= "this.onchange();"
onkeypress = "this.onchange();"
onpaste = "this.onchange();"
oninput = "this.onchange();"
value = "1"
/>
</br>
</br>
Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
</form>
</div>
Number of forms: <input id="number_of_forms" value="1"> <input onclick="createForms()" type="button" value=" < Create > ">
<div>
</div>
<div id="i_container">
</div>
<script>
function createForms(){
count = document.getElementById('number_of_forms').value;
my_parent = document.getElementById('i_container');
my_parent.innerHTML="";
for(i=0; i<count; i++){
nw = calc.cloneNode(true);
nw.name = "dynamic_name_"+i;
nw.id = "dynamic_id_"+i;
my_parent.appendChild(nw);
}
for(i=0; i<count; i++){
p = document.getElementById("dynamic_id_"+i);
calcForm(p);
}
}
</script>
</body>
</html>相关文章：
- 循环遍历包含另一个表单的表单
- 使用jquery添加到表单内部表中的元素不会过帐
- 流星 1.3 自动表单/快速表单错误
- Javascript按钮，它提交联系人表单7表单，然后重定向到URL
- Javascript表单验证:表单在错误返回时提交:
- 使用自制的html表单注册/登录网站
- 验证表单阻止表单提交
- 如果选中，则禁用表单(多表单）
- 从输入元素获取表单和表单数据对象
- 电子邮件表单:提交表单后，$_POST 为空
- 需要一个复选框，该复选框将在同一页面上自动填写来自不同表单的表单
- 使用angularJs中的嵌套表单进行表单提交行为
- 角度架构表单 - 检查表单是否经过验证
- 所选表单-当表单的值被选中时，如何更改变量值
- 新表单-嵌入表单集合-Symfony2
- 大表单的表单验证
- Rails模式表单-在表单提交失败后，用html.erb文件中的内容更新弹出窗口
- AngularJS自动生成表单的表单验证
- Spring MVC-处理错误，使用多个表单提交表单
- 如何显示数据从html表单到表
