如何在點擊「提交」按鈕後保留在同一頁面上，並保留我在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"> 
 
    
 
</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>

來源

2017-03-31 wolf

形式是由AJAX和成功提交，提交的消息應該來。那麼ajax邏輯在哪裏 –

你能提供一個例子嗎？謝謝 – wolf

在validateForm()我已經添加了用於顯示所提交的消息，並從被重定向停止形式else邏輯。

要做的事情。

根據您的要求添加邏輯如何通過XMLHttpRequest方式提交表單。欲瞭解更多看到Sending forms through 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>

來源

2017-04-01 04:48:40

如何在點擊「提交」按鈕後保留在同一頁面上，並保留我在JavaScript中輸入的日期

回答

相關問題