每当在文本字段中发生更改时就检查表单的验证，就像在gmail注册表单中一样

小编典典

每当在文本字段中发生更改时就检查表单的验证，就像在gmail注册表单中一样

jsp

我有一个使用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>

阅读 210

2020-06-10

共1个答案

小编典典

我认为这是您要寻找的：

更改表示表格数量的计数。

<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>

2020-06-10