如果表单有效，则会弹出一个窗口。
然而，它只会在消失之前出现一秒钟。我猜测显示器默认为“没有”。它应该只通过一个按钮关闭，该按钮将显示改回为无（位于弹出窗口上）。
为什么它只出现在第二个？而不是等待它通过按钮关闭？
<div class="fixedBasketHoldingDiv">
<div id="cardSubmission">
<h2>Order form</h2>
<div id="form">
<h3>Enter your card details:</h3>
<form onsubmit="submitDetails()">
<input type="text" id="name" placeholder="Name" onfocus="focusFunction('name')" onblur="blurFunction()" style="font-family: 'Raleway', sans-serif;" required="required"><br />
<input type="text" id="cardNo" placeholder="Card Number" onfocus="focusFunction('16 digit card number')" onblur="blurFunction()" style="font-family: 'Raleway', sans-serif;" required="required"><br />
<input class="month" type="text" id="expMonth" placeholder="MM" onfocus="focusFunction('expiry month (MM)')" onblur="blurFunction()" style="font-family: 'Raleway', sans-serif;size: 10;" required="required">
<input class ="year" type="text" id="expYear" placeholder="YYYY" onfocus="focusFunction('expiry year (YYYY)')" onblur="blurFunction()" style="font-family: 'Raleway', sans-serif;size: 10;" required="required"><br />
<input type="text" id="secCode" placeholder="Security Code" onfocus="focusFunction('security code')" onblur="blurFunction()" style="font-family: 'Raleway', sans-serif;" required="required"><br />
<h3 id="contactDetails">Enter you contact details here:</h3>
<input type="text" id="addressFirstLine" placeholder="Address Line 1" onfocus="focusFunction('address line 1')" onblur="blurFunction()" required="required"><br />
<input type="text" id="addressSecondLine" placeholder="Address Line 2" onfocus="focusFunction('address line 2')" onblur="blurFunction()"><br />
<input type="text" id="addressThirdLine" placeholder="Address Line 3" onfocus="focusFunction('address line 3')" onblur="blurFunction()"><br />
<input type="text" id="Town" placeholder="Town" required="required" onfocus="focusFunction('town')" onblur="blurFunction()">
<input type="text" id="County" placeholder="County" required="required" onfocus="focusFunction('county')" onblur="blurFunction()"><br />
<input type="text" id="postCode" placeholder="Post Code" required="required" onfocus="focusFunction('post code')" onblur="blurFunction()"><br />
<h3><?php echo "£" . number_format($total, 2) ?></h3>
<input class="submit" type="submit" id="submit" value="Order Now!"><br />
</form>
<p class="help" id="help"></p>
</div>
</div>
</div>
<div id="popupBox" class="popupPosition">
<div id="popupBoxWrapper">
<div id="popupBoxContainer">
<h3>Order Conformation</h3>
<p>Congratulations your order is on its way!</p>
<button id="popupBoxClose" onclick="document.getElementById('popupBox').style.display = 'none';">Close</button>
</div>
</div>
</div>
function submitDetails() {
var errorMsg = "";
var name = document.getElementById('name').value;
var cardNo = document.getElementById('cardNo').value;
var expMonth = document.getElementById('expMonth').value;
var expYear = document.getElementById('expYear').value;
var secCode = document.getElementById('secCode').value;
if ((cardNo.toString().length != 16) || isNaN(cardNo) || cardNo != parseInt(cardNo)){
errorMsg += "\n\u2022 Enter a Card Number of 16 digits.\n"
}
if (name == "") {
errorMsg += "\n\u2022 Enter a Name.\n"
}
if (expMonth == "" || expYear == "") {
errorMsg += "\n\u2022 Enter an Expiry Date.\n"
}
else if ((1 > parseInt(expMonth)) || parseInt(expMonth) > 12 || (parseInt(expYear) < 2017) || (isNaN(expMonth)) || (expMonth != parseInt(expMonth)) || (isNaN(expYear)) || (expYear != parseInt(expYear))){
errorMsg += "\n\u2022 Enter month between 1-12 & a year after 2017.\n"
}
if ((secCode.toString().length != 3) || isNaN(secCode) || secCode != parseInt(secCode)){
errorMsg += "\n\u2022 Enter a Security Code of 3 digits.\n"
}
if (errorMsg != ""){
alert(errorMsg);
}
else {
document.getElementById('popupBox').style.display = 'block';
}
}
答案 0 :(得分：0)
不要忘记在页面中添加jquery！
示例（这是在头部或标记之前：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
这是一个例子（未经测试）：
<div class="fixedBasketHoldingDiv">
<div id="cardSubmission">
<h2>Order form</h2>
<div id="form">
<h3>Enter your card details:</h3>
<form id="myform" onsubmit="submitDetails()">
<input type="text" id="name" placeholder="Name" onfocus="focusFunction('name')" onblur="blurFunction()" style="font-family: 'Raleway', sans-serif;" required="required"><br />
<input type="text" id="cardNo" placeholder="Card Number" onfocus="focusFunction('16 digit card number')" onblur="blurFunction()" style="font-family: 'Raleway', sans-serif;" required="required"><br />
<input class="month" type="text" id="expMonth" placeholder="MM" onfocus="focusFunction('expiry month (MM)')" onblur="blurFunction()" style="font-family: 'Raleway', sans-serif;size: 10;" required="required">
<input class ="year" type="text" id="expYear" placeholder="YYYY" onfocus="focusFunction('expiry year (YYYY)')" onblur="blurFunction()" style="font-family: 'Raleway', sans-serif;size: 10;" required="required"><br />
<input type="text" id="secCode" placeholder="Security Code" onfocus="focusFunction('security code')" onblur="blurFunction()" style="font-family: 'Raleway', sans-serif;" required="required"><br />
<h3 id="contactDetails">Enter you contact details here:</h3>
<input type="text" id="addressFirstLine" placeholder="Address Line 1" onfocus="focusFunction('address line 1')" onblur="blurFunction()" required="required"><br />
<input type="text" id="addressSecondLine" placeholder="Address Line 2" onfocus="focusFunction('address line 2')" onblur="blurFunction()"><br />
<input type="text" id="addressThirdLine" placeholder="Address Line 3" onfocus="focusFunction('address line 3')" onblur="blurFunction()"><br />
<input type="text" id="Town" placeholder="Town" required="required" onfocus="focusFunction('town')" onblur="blurFunction()">
<input type="text" id="County" placeholder="County" required="required" onfocus="focusFunction('county')" onblur="blurFunction()"><br />
<input type="text" id="postCode" placeholder="Post Code" required="required" onfocus="focusFunction('post code')" onblur="blurFunction()"><br />
<h3><?php echo "£" . number_format($total, 2) ?></h3>
<input class="submit" type="submit" id="submit" value="Order Now!"><br />
</form>
<p class="help" id="help"></p>
</div>
</div>
</div>
<div id="popupBox" class="popupPosition">
<div id="popupBoxWrapper">
<div id="popupBoxContainer">
<h3>Order Conformation</h3>
<p>Congratulations your order is on its way!</p>
<button id="popupBoxClose" onclick="document.getElementById('popupBox').style.display = 'none';">Close</button>
</div>
</div>
</div>
<script>
function submitDetails(evt) {
// Prevent default behavior (submiting the form)
evt.preventDefault();
// Get the form action url
var url = evt.currentTarget.action;
var errorMsg = "";
var name = document.getElementById('name').value;
var cardNo = document.getElementById('cardNo').value;
var expMonth = document.getElementById('expMonth').value;
var expYear = document.getElementById('expYear').value;
var secCode = document.getElementById('secCode').value;
if ((cardNo.toString().length != 16) || isNaN(cardNo) || cardNo != parseInt(cardNo)){
errorMsg += "\n\u2022 Enter a Card Number of 16 digits.\n"
}
if (name == "") {
errorMsg += "\n\u2022 Enter a Name.\n"
}
if (expMonth == "" || expYear == "") {
errorMsg += "\n\u2022 Enter an Expiry Date.\n"
}
else if ((1 > parseInt(expMonth)) || parseInt(expMonth) > 12 || (parseInt(expYear) < 2017) || (isNaN(expMonth)) || (expMonth != parseInt(expMonth)) || (isNaN(expYear)) || (expYear != parseInt(expYear))){
errorMsg += "\n\u2022 Enter month between 1-12 & a year after 2017.\n"
}
if ((secCode.toString().length != 3) || isNaN(secCode) || secCode != parseInt(secCode)){
errorMsg += "\n\u2022 Enter a Security Code of 3 digits.\n"
}
if (errorMsg != ""){
alert(errorMsg);
}
else {
document.getElementById('popupBox').style.display = 'block';
}
// Do your own request an handle the results
$.ajax({
url: url,
type: 'post',
dataType: 'json',
data: $("#myform").serialize(),
success: function(data) {
// do something with the response data...
console.log(data);
}
});
// Same as preventDefault - but for older browsers
return false;
}
</script>
编辑 - 这是纯粹的Javascript实现：
<div class="fixedBasketHoldingDiv">
<div id="cardSubmission">
<h2>Order form</h2>
<div id="form">
<h3>Enter your card details:</h3>
<form id="myform" onsubmit="submitDetails()">
<input type="text" id="name" placeholder="Name" onfocus="focusFunction('name')" onblur="blurFunction()" style="font-family: 'Raleway', sans-serif;" required="required"><br />
<input type="text" id="cardNo" placeholder="Card Number" onfocus="focusFunction('16 digit card number')" onblur="blurFunction()" style="font-family: 'Raleway', sans-serif;" required="required"><br />
<input class="month" type="text" id="expMonth" placeholder="MM" onfocus="focusFunction('expiry month (MM)')" onblur="blurFunction()" style="font-family: 'Raleway', sans-serif;size: 10;" required="required">
<input class ="year" type="text" id="expYear" placeholder="YYYY" onfocus="focusFunction('expiry year (YYYY)')" onblur="blurFunction()" style="font-family: 'Raleway', sans-serif;size: 10;" required="required"><br />
<input type="text" id="secCode" placeholder="Security Code" onfocus="focusFunction('security code')" onblur="blurFunction()" style="font-family: 'Raleway', sans-serif;" required="required"><br />
<h3 id="contactDetails">Enter you contact details here:</h3>
<input type="text" id="addressFirstLine" placeholder="Address Line 1" onfocus="focusFunction('address line 1')" onblur="blurFunction()" required="required"><br />
<input type="text" id="addressSecondLine" placeholder="Address Line 2" onfocus="focusFunction('address line 2')" onblur="blurFunction()"><br />
<input type="text" id="addressThirdLine" placeholder="Address Line 3" onfocus="focusFunction('address line 3')" onblur="blurFunction()"><br />
<input type="text" id="Town" placeholder="Town" required="required" onfocus="focusFunction('town')" onblur="blurFunction()">
<input type="text" id="County" placeholder="County" required="required" onfocus="focusFunction('county')" onblur="blurFunction()"><br />
<input type="text" id="postCode" placeholder="Post Code" required="required" onfocus="focusFunction('post code')" onblur="blurFunction()"><br />
<h3><?php echo "£" . number_format($total, 2) ?></h3>
<input class="submit" type="submit" id="submit" value="Order Now!"><br />
</form>
<p class="help" id="help"></p>
</div>
</div>
</div>
<div id="popupBox" class="popupPosition">
<div id="popupBoxWrapper">
<div id="popupBoxContainer">
<h3>Order Conformation</h3>
<p>Congratulations your order is on its way!</p>
<button id="popupBoxClose" onclick="document.getElementById('popupBox').style.display = 'none';">Close</button>
</div>
</div>
</div>
<script>
function submitDetails(evt) {
// Prevent default behavior (submiting the form)
evt.preventDefault();
// Get the form action url
var url = evt.currentTarget.action;
var errorMsg = "";
var name = document.getElementById('name').value;
var cardNo = document.getElementById('cardNo').value;
var expMonth = document.getElementById('expMonth').value;
var expYear = document.getElementById('expYear').value;
var secCode = document.getElementById('secCode').value;
if ((cardNo.toString().length != 16) || isNaN(cardNo) || cardNo != parseInt(cardNo)){
errorMsg += "\n\u2022 Enter a Card Number of 16 digits.\n"
}
if (name == "") {
errorMsg += "\n\u2022 Enter a Name.\n"
}
if (expMonth == "" || expYear == "") {
errorMsg += "\n\u2022 Enter an Expiry Date.\n"
}
else if ((1 > parseInt(expMonth)) || parseInt(expMonth) > 12 || (parseInt(expYear) < 2017) || (isNaN(expMonth)) || (expMonth != parseInt(expMonth)) || (isNaN(expYear)) || (expYear != parseInt(expYear))){
errorMsg += "\n\u2022 Enter month between 1-12 & a year after 2017.\n"
}
if ((secCode.toString().length != 3) || isNaN(secCode) || secCode != parseInt(secCode)){
errorMsg += "\n\u2022 Enter a Security Code of 3 digits.\n"
}
if (errorMsg != ""){
alert(errorMsg);
}
else {
document.getElementById('popupBox').style.display = 'block';
}
var query = [];
// Extract all input names and their values
document.querySelectorAll('#myform input[type=text]').forEach(function(field) {
query.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value));
}
// Join key/values together (format for sending form-encoded data)
query = query.join('&');
// Use proper request handler (older IE doesn't support XMLHttpRequest)
var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
// Add event change handler
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
console.log(xmlHttp.responseText);
}
}
// Open request
xmlHttp.open("post", url);
// Send the data
xmlHttp.send(query);
// Same as preventDefault - but for older browsers
return false;
}
</script>