Html input checkbox over javascript function

Question

I have created a simple payment form using HTML/CSS/JS and i want to make checks of what the user gives as inputs using html patterns. But i also want to create a pop up alert using JS to confirm the form which must pop after all required inputs are filled correctly and patterns are ok.The pop up alert must also contain the name the user provided and return it.But the problem is that when i press submit button, even though the required info is not filled, the alert does come up and says "Order Completed" ....How can i make the pop up come up only after all info is given correctly?Here is my code:

<!DOCTYPE html>
<html>
<style>


    body {

        border:10px solid black;
        margin-top: 100px;
        margin-bottom: 100px;
        margin-right: 150px;
        margin-left: 150px;

    }


    p.thick {
        font-weight: bold;
    }


    input[type=text], select {
        width: 100%;
        padding: 20px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    input[type=text]:focus {
        border: 3px solid #555;
    }

    input[type=password]:focus {
        border: 3px solid #555;
    }

    input[type=password], select {
        width: 100%;
        padding: 20px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    input[type=submit] {
        width: 100%;
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    input[type=submit]:hover {
        background-color: red;
    }

    div {
        border-radius: 5px;
        background-color:rgb(238, 238, 232);
        padding: 40px;
    }
</style>

<body onload="CreditCard();">
    <form id="Myform">
        <div class="login-page">
            <div class="form">


                <fieldset>
                    <h1>Log in </h1>
                    <p>Username*: <input type="text"  name="Username" pattern=".{3,}" title="3 or more characters"></p>
                    <p>Password*: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[A-Z]).{5,}"placeholder="Password must contain 1 uppercaser and 1 number and must be atleast 5 digits." title="Must contain at least one number and one uppercase letter, and at least 5 or more characters."></p>



                </fieldset>

                <fieldset>
                    <h1> Payment </h1>
                    <select id="paymentmethod" onchange="CreditCard();">
                        <option value ="Payment on pickup">Payment on pickup</option>
                        <option value="Bank transfer/deposit">Bank transfer/deposit</option>
                        <option value="Credit/Debit card">Credit/Debit card</option>

                    </select>
                    <fieldset>
                        <div id="credit/debit card" style="display: block;">
                            <select name="cardtype" class="form">
                                <option value="VISA">VISA</option>
                                <option value="MasterCard">MasterCard</option>
                            </select>
                            <br>Card Number*:<br>
                            <input type="text" name="cardnumber" pattern="(?=.*\d).{16,16}" title="Enter a 16-digit card number please."  style="width:80%;" maxlength="20" value="" required>

                            <tr> 
                                <td height="22" align="right" valign="middle">Expiry Date:</td>
                                <td colspan="2" align="left">
                                    <SELECT NAME="CCExpiresMonth" >  
                                        <OPTION VALUE="01">January (01)
                                        <OPTION VALUE="02">February (02)
                                        <OPTION VALUE="03">March (03)
                                        <OPTION VALUE="04"SELECTED>April (04)
                                        <OPTION VALUE="05">May (05)
                                        <OPTION VALUE="06">June (06)
                                        <OPTION VALUE="07">July (07)
                                        <OPTION VALUE="08">August (08)
                                        <OPTION VALUE="09">September (09)
                                        <OPTION VALUE="10">October (10)
                                        <OPTION VALUE="11">November (11)
                                        <OPTION VALUE="12">December (12)
                                    </SELECT> 
                                    <SELECT NAME="CardExpiresYear">
                                        <OPTION VALUE="04"SELECTED>2016
                                        <OPTION VALUE="05">2017
                                        <OPTION VALUE="06">2018
                                        <OPTION VALUE="07">2019
                                        <OPTION VALUE="08">2020
                                        <OPTION VALUE="09">2021
                                        <OPTION VALUE="10">2022
                                        <OPTION VALUE="11">2023
                                        <OPTION VALUE="12">2024
                                        <OPTION VALUE="13">2025

                                    </SELECT>
                                </td>
                            </tr>
                    </fieldset>

                </fieldset>








                <h1> Order Information </h1>
                <p class="thick"> Name*: </p> <input type="text" id="customername"  style="width:55% name="cardholder" value="" pattern=".{1,}" title="Please enter a name" required>


                                                     <p class="thick"> Adress*: </p> <input type="text"style="width:55;" name="cardholderadr" value="" pattern=".{3,}" title="Please enter an adress" required>

                <p class="thick"> Phone </p> <input type="text"style="width:55;"  pattern="(?=.*\d).{10,10}" title="Enter a 10 digit number please." name="cardholderpho" value="" >

                <p class="thick"> email <input type="text" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="Please enter a valid email adress" placeholder="[email protected]" >

                <p class="thick"> Delivery comments </p> <input type="text" style="width:55; padding: 50px ;" name="cardholdercomm" value="" >


                <p style="color:blue;"> I agree with the <a href="https://en.wikipedia.org/wiki/Terms_of_service">
                        *terms</a>  <input type="radio" name="terms" title="Please agree to our terms."  unchecked required onclick="terms();"></p>
                <input type="submit" value="Submit" onclick="confirmed();">
                <input type="button" onclick="reset()" value="Reset form">


            </div>

        </div>

    </form>
    <script>
        function CreditCard() {
            prefer = document.forms[0].paymentmethod.value;
            if (prefer == "Credit/Debit card") {
                document.getElementById("credit/debit card").style.visibility = "visible";
            } else {
                document.getElementById("credit/debit card").style.visibility = "hidden";
            }

        }
        function paymentwithcard() {
            document.getElementById("credit/debit card").style.visibility = "hidden";
        }

        function reset() {
            document.getElementById("Myform").reset();


        }

        function confirmed() {

            var x = document.getElementById("customername").value;
            alert("Order completed.Name used:" + x);
        }
        function terms() {


        }
    </script>

</body>


</html>

Focus on the inputs and the function confirmed().

Check for the user inputs by accessing them by their id or other options available. And then if the user inputs are what you want then show alert box. — Gandalf the White
– Gandalf the White, Commented May 21, 2016 at 17:42
Although validating your data here will give a better UX, never trust a client. Always re-validate everything serverside. — Paul S.
– Paul S., Commented May 21, 2016 at 17:51
Gandalf can you tell me a quick way to check through JS that a pattern of an input is followed? — Aggelos Sfakianos
– Aggelos Sfakianos, Commented May 21, 2016 at 17:56

Bert van Altena · Accepted Answer · 2016-05-21 18:05:07Z

2

The submit method executes when you press submit. First you have to let the submit method wait that the comfirm method can execute, after it the submit method can be executed. To accessing the attribute in your js you can use an id.

document.getElementById('submit-form').submit(function(ev) {
    ev.preventDefault(); // to stop the form from submitting
    confirmed();
    this.submit(); // If confirmed succeeded
});

<input id="submit-form" type="submit" value="Submit">

edited May 21, 2016 at 18:05

answered May 21, 2016 at 18:00

Bert van Altena

274 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aggelos Sfakianos Over a year ago

can you please explain your code a bit?Do i have to create a new function for the above?Or do i place them somewhere in my code?

Alex Kudryashev · Accepted Answer · 2016-05-21 18:06:39Z

1

To prevent form from submitting you need to change `onclick attribute

<input type="submit" value="Submit" onclick="return confirmed();">

and your function must return true or false depending on your form validation.

answered May 21, 2016 at 18:06

Alex Kudryashev

9,5103 gold badges31 silver badges39 bronze badges

Comments

Paul S. · Accepted Answer · 2016-05-21 18:06:19Z

1

You are listening onclick, instead, you should listen for the submit event
Don't only rely on client-side validation, it's good for a clean UX but never trust the client
HTML5 provides some validation options in the form of the required and pattern attributes

window.addEventListener('load', function () {
    document.getElementById('example-submit').addEventListener('submit', function () {
        alert('done');
    });
});

input:invalid {border: 1px solid red;}
input:valid {border: 1px solid green;}

<form action="?" method="post">
  <input type="text" id="expire-year" required pattern="20[123]\d" placeholder="YYYY" />
  <input type="text" id="expire-month" required pattern="0?[1-9]|1[012]" placeholder="MM" />
  <input type="text" id="expire-day" required pattern="0?[1-9]|2\d|3[01]" placeholder="DD" />
  <input type="submit" id="example-submit" />
</form>

Side notes

In your code, CreditCard isn't a constructor. Consider using a cammel case name creditCard instead
Try to cut down the code in your question to the bare minimum/example case if you want good quality answers, nearly all of the HTML provided is irrelevant to the question
I didn't use a snippet because the embedded iframe here on SO doesn't let you submit forms :)

answered May 21, 2016 at 18:06

Paul S.

66.6k9 gold badges129 silver badges143 bronze badges

1 Comment

Aggelos Sfakianos Over a year ago

Ok first of all thanks for the help. Can you tell me what do i do with the eventlistener? Do i have to create a new function?Or place it somewhere in the existing code?

Collectives™ on Stack Overflow

Html input checkbox over javascript function

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related