提交表格后，留在同一页面，在页面中显示一个单词

Question

After clicking "submit", stay on the page. 单击“提交”后，留在页面上。
Input data, like "computer number" and "profit", stay inside those blank square. 输入数据（例如“计算机号”和“利润”）留在这些空白方框内。
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="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()">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>

Answer 1

Hello you should think abut using AJAX as you are sending an form 您好，您应该在发送表单时考虑使用AJAX

this can be the button 这可以是按钮

<button type="button"
onclick="validateForm('ajax_info.php', myFunction)"> Clic to Submit
</button>

And this cam be the AJAX function 这个凸轮就是AJAX功能

  function validateForm(url, cFunction) {
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true); //can be POST
  xhttp.send();
}
function myFunction(xhttp) {
  document.getElementById("submited").innerHTML =
  xhttp.responseText;
}

Answer 2

Firstly, you were having document.forms["my form"] which was invalid since your form name was form so I changed it to document.forms["form"] . 首先，您的document.forms["my form"]无效，因为您的表单名称是form所以我将其更改为document.forms["form"] 。

And, on submit, I added return false at the bottom of the function to stay on the page. 并且，在提交时，我在函数的底部添加了return false以保留在页面上。 Also, before that, added "Submitted" text in the center of the page as shown below. 另外，在此之前，请在页面中央添加“已提交”文本，如下所示。

Here's working code snippet! 这是工作代码段！

Hope that helps! 希望有帮助！

 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; } function validateForm() { var q = document.forms["form"]["Computer"].value; if (q == "") { alert("Computer Number is Missing!"); return false; } var w = document.forms["form"]["id1"].value; if (w != "100") { alert("Question 1 is Incorrect!"); return false; } document.getElementById("submitted").innerHTML = "Submitted" return false; }

 #submitted { text-align: center }

 <form name="form" onsubmit="return validateForm()"> Computer Number:<br> <input type="text" name="Computer"><br> <p>How much is your profit? <input id="id1" name="id1" required> <button type="button" onclick="myFunction()">My Answer</button> <button type="button" id="btn1" onclick="Solution()" style="display:none;">Solution</button> </p> <p id="Q1"></p> <input type="submit" value="Submit"> </form> <br/> <div id="submitted"> </div>

提交表格后，留在同一页面，在页面中显示一个单词

问题描述

2 个解决方案

解决方案1
0 2017-04-01 04:42:57

解决方案2
0 已采纳 2017-04-01 07:53:53

提交表格后，留在同一页面，在页面中显示一个单词

问题描述

2 个解决方案

解决方案1 0 2017-04-01 04:42:57

解决方案2 0 已采纳 2017-04-01 07:53:53

解决方案1
0 2017-04-01 04:42:57

解决方案2
0 已采纳 2017-04-01 07:53:53