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

点击“提交”后，留在页面上。
输入数据，如“计算机号码”和“利润”，留在那些空白的方块内。
一个单词“已提交”，出现在此页面的中心。

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

来源

2017-04-01 wolf

欢迎堆栈溢出！你能详细说明你的代码“不起作用”吗？你在期待什么，究竟发生了什么？如果您遇到异常/错误，请发布其发生的行和异常/错误的详细信息。请[编辑]这些细节或我们可能无法提供帮助。 – FrankerZ

首先，您的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>

来源

2017-04-01 07:53:53 tanmay

你好，你应该想到紧靠使用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; 
}

来源

2017-04-01 04:42:57 Csharls

您的函数名称不匹配。（另外，“评估”是一个非常不具名的名称。） – nnnnnn

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

回答

相关问题