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

Question

If the form is valid, a pop up appears.

However, it only appears for a second before it dissapears. Im guessing the display is defaulting back to 'none'. It should only close via a button that changes the display back to none (located on the popup).

How come it is only appearing for second? And not waiting for it to be closed via the button?

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

Don't forget to add jquery to your page!

Example (this goes in the head or before your tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Here is an example (not tested) :

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

EDIT - Here is pure Javascript implementation:

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