提交表格后，留在同一頁面，在頁面中顯示一個單詞

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