简体   繁体   English

单击“提交”按钮后如何保持在同一页面上,并保持我在JavaScript中输入的日期

[英]How to stay on same page after click “submit” button, and keep the date I entered in JavaScript

  1. After clicking "submit", stay on this page. 单击“提交”后,留在此页面上。
  2. Input data, like "computer number" and "profit", stay inside those blank square. 输入数据(例如“计算机号”和“利润”)留在这些空白方框内。
  3. A word "Submitted", appear in the center of this page. 此页面的中心出现一个单词“ Submitted”。

The following is my code, Please help, thank you! 以下是我的代码,请帮忙,谢谢!

 <html> <head> <title></title> </head> <body> <form name="my form" onsubmit="return validateForm()"> Computer Number:<br> <input type="text" name="Computer" required><br> <p>How much is your profit? <input id="id1" name = "id1" required> <button type = "button" onclick="myFunction()">Check My Answer</button> <button type="button" id="btn1" onclick="Solution()" style="display:none;">Solution</button> </p> <p id="Q1"></p> <script> var errosCount = 0; function myFunction() { var x, text; x = document.getElementById("id1").value; if (isNaN(x) || x != 100) { text = "Incorrect"; document.getElementById("Q1").style.color = "red";errosCount++; } else { text = "Correct"; document.getElementById("Q1").style.color = "green"; } document.getElementById("Q1").innerHTML = text; if(errosCount === 3){ errosCount = 0; document.getElementById('btn1').style.display = 'block'; document.getElementById("Q1").innerHTML = ''; } else { document.getElementById('btn1').style.display = 'none'; } } function Solution(){ text = "(P - w) * q<sub>o</sub> - I = (53 - 43) * 30 - 200 = 100"; document.getElementById("Q1").style.color = "red"; document.getElementById("Q1").innerHTML = text; } </script> <input type="submit" value="Submit"> </form> <script> function validateForm() { var q = document.forms["my form"]["Computer"].value; if (q == "") { alert("Computer Number is Missing!"); return false;} var w = document.forms["my form"]["id1"].value; if (w != "100") { alert("Question 1 is Incorrect!"); return false;} } </script> </body> </html> 

In validateForm() I have added else logic which is used for displaying the submitted message and stops the form from being redirected. validateForm()我添加了else逻辑,该逻辑用于显示提交的消息并阻止表单被重定向。

Things to do. 要做的事情。

Add logic according to your requirement how to submit the form through XMLHttpRequest way. 根据您的要求添加逻辑如何通过XMLHttpRequest方式提交表单。 For more see Sending forms through JavaScript 有关更多信息,请参见通过JavaScript发送表单。

 <html> <head> <title></title> </head> <body> <form name="my form" onsubmit="return validateForm()"> Computer Number:<br> <input type="text" name="Computer" required><br> <p>How much is your profit? <input id="id1" name="id1" required> <button type="button" onclick="myFunction()">Check My Answer</button> <button type="button" id="btn1" onclick="Solution()" style="display:none;">Solution</button> </p> <p id="Q1"></p> <script> var errosCount = 0; function myFunction() { var x, text; x = document.getElementById("id1").value; if (isNaN(x) || x != 100) { text = "Incorrect"; document.getElementById("Q1").style.color = "red"; errosCount++; } else { text = "Correct"; document.getElementById("Q1").style.color = "green"; } document.getElementById("Q1").innerHTML = text; if (errosCount === 3) { errosCount = 0; document.getElementById('btn1').style.display = 'block'; document.getElementById("Q1").innerHTML = ''; } else { document.getElementById('btn1').style.display = 'none'; } } function Solution() { text = "(P - w) * q<sub>o</sub> - I = (53 - 43) * 30 - 200 = 100"; document.getElementById("Q1").style.color = "red"; document.getElementById("Q1").innerHTML = text; } </script> <input type="submit" value="Submit"> <span id="success"></span> </form> <script> function validateForm() { var q = document.forms["my form"]["Computer"].value; if (q == "") { alert("Computer Number is Missing!"); return false; } var w = document.forms["my form"]["id1"].value; if (w != "100") { alert("Question 1 is Incorrect!"); return false; } else { /* ajax logic here and on success message this message is followed*/ document.getElementById('success').innerHTML = "<b>Submitted</b>" return false; /*stops the form from being submitted normal way*/ } } </script> </body> </html> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM