Question

点击＆＃34;提交＆＃34;，留在页面上。
输入数据，例如＆＃34;计算机编号＆＃34;和＆＃34;利润＆＃34;，留在那些空白的广场。
单词＆＃34;已提交＆＃34;，出现在此页面的中心。

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

＆＃13;

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

＆＃13;

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以保留在页面上。此外，在此之前，添加＆＃34;已提交＆＃34;页面中心的文字如下所示。

此处有正常工作的代码段！

希望有所帮助！

＆＃13;

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

＆＃13;

#submitted {
  text-align: center
}

＆＃13;

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

＆＃13;

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

2 个答案: