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

Question

单击“提交”后，留在页面上。
输入数据（例如“计算机号”和“利润”）留在这些空白方框内。
此页面的中心出现一个单词“ Submitted”。

以下是我的代码，请帮忙，谢谢！

 <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

您好，您应该在发送表单时考虑使用AJAX

这可以是按钮

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

这个凸轮就是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

首先，您的document.forms["my form"]无效，因为您的表单名称是form所以我将其更改为document.forms["form"] 。

并且，在提交时，我在函数的底部添加了return false以保留在页面上。 另外，在此之前，请在页面中央添加“已提交”文本，如下所示。

这是工作代码段！

希望有帮助！

 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