JavaScript-更改弹出框显示的功能

Question

如果该表格有效，则会显示一个弹出窗口。

但是，它消失之前只会出现一秒钟。 我猜显示默认为“无”。 它只能通过将显示更改回无显示的按钮关闭（位于弹出窗口上）。

它为什么只出现第二秒？ 是否不等待通过按钮将其关闭？

HTML

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

JS

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

Answer 1

不要忘记将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>