Jurdun
Jurdun

Reputation: 145

How would I make a message pop up after this form is submitted?

I need a message to pop up to tell the user that their enquiry has been submitted. The validation works, however I had to remove my old popup message as it was conflicting with the validation code. I need to know where to put the pop up message code in that exisiting javascript code that I am using to validate. The code i was using to make a pop up message was:

<script>
function EnquireButton() {
   alert("Thank you for your enquiry!");
}
</script> 

I'm sure it's simple enough, I have tried to implement it into the validation code, however it just reloads the page without showing the pop up.

HTML:

    <form name="Contact_Us_Form" method="post" action="">
        <table width="450px">
            <p>One time Message</p>
            <tr>
                <td valign="top">
                <label for="full_name">Full Name *</label>
            </td>
            <td valign="top">
                <input  type="text" name="full_name" maxlength="50" size="30" placeholder="First Name and Last Name" title="Your name here" required/>
                </td>
            </tr>

            <tr>
                <td valign="top">
                <label for="landline">Landline Number *</label>
            </td>
            <td valign="top">
                <input  type="text" name="landline" maxlength="50" size="30" placeholder="(01206)" title=" YourLandline Number" required/>
            </td>
            </tr>
            <tr>
             <td valign="top">
                <label for="Email">Email Adress *</label>
            </td>
            <td valign="top">
                <input  type="text" name="email" maxlength="80" size="30" placeholder="[email protected]" title="Your email" required/>
            </td>

            </tr>
            <tr>
            <td valign="top">
                <label for="house_number">House Number *</label>
             </td>
             <td valign="top">
                <input  type="text" name="house_number" maxlength="30" size="30" placeholder="House Number" title="Your House Number" required/>
            </td>
            </tr>
            <tr>
                <td>
                    <label for="postal_code">Post Code *</label>
                </td>
                <td>
                <input type="text" name="postal_code" maxlength="30" size="30" placeholder="CO5 " title="Your Postal Code" required/>
            </td>
            </tr>
            <tr>
            <td valign="top">
                <label for="">Enquiry</label>
            </td>
            <td valign="top">
                <textarea  name="Enquiry" maxlength="1000" cols="28" rows="6" placeholder="Write your enquiry here."></textarea>
            </td>
            </tr>
            <tr>
            <td colspan="2" style="text-align:center">
            <button onclick="Enquirebutton()">Enquire</button>
    <script>
    $(document).ready(function (){
    validate();
    $('#full_name, #landline, #Email').change(validate);
});

function validate(){
    if ($('#full_name').val().length   >   0   &&
        $('#landline').val().length  >   0   &&
        $('#Email').val().length    >   0) {
        $("input[type=Enquirebutton()]").prop("disabled", false);
    }
    else {
        $("input[type=Enquirebutton()]").prop("disabled", true);
    }   
}
</script>
    </td>
    </tr>
    </table>
    </form>

Upvotes: 2

Views: 1168

Answers (2)

Swapnil Motewar
Swapnil Motewar

Reputation: 1088

Just add one property to form tag onsubmit="EnquireButton()"

that is

<form name="Contact_Us_Form" method="post" action="" onsubmit="EnquireButton()">

Upvotes: 3

cнŝdk
cнŝdk

Reputation: 32145

First, make your button a submit one:

<button type="submit">Enquire</button>

Then you can either use the onclick="Enquirebutton()" in your submit button or the onsubmit="Enquirebutton()" in your form.

Take a look at onsubmit Event for more information.

Upvotes: 2

Related Questions