Form submitting twice

Question

I am making an query form. i am new with jquery. after reading the jquery validation plugin and ajax i wrote the following code. this code first validate the form and then submit the form via ajax. if i submit form the form submit twice. the result coming two times I am not able to get err.

<script>
$(document).ready(function () {
    $('#contactForm').validate({
        rules: {
            name: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            address: {
                required: true
            },
            message: {
                required: true
            },
            security: {
                required: true
            }
        },
        messages: {
            name: {
                required: '* Please Enter Your Name.'
            },
            email: {
                required: "* Please Enter Your E-mail  ",
                email: "* Please enter proper E-mail  "
            },
            address: {
                required: "* Please enter address."
            },
            message: {
                required: "* Please enter Enquiry"
            },
            security: {
                required: "* Please enter Security code"
            }
        },
        submitHandler: function (form) {
            // Ajax Submit here

            // alert($("#contactForm").serialize());

            $.ajax({
                type: "POST",
                url: "assets/sendmail.php",
                data: $("#contactForm").serialize(),
                success: function (result) {
                    if (result == 'Success') {
                        $("#contactForm").hide();
                        $("#contact_response").html('<div class="alert alert-success">Thank you for your feedback.</div>');
                    } else {
                        alert(result);
                    }
                    return false;
                }
            });
            return false;
        }

    });
});

the html form is

 <form action="assets/sendmail.php" method="post" name="contactForm" id="contactForm" >
                    <!-- STEP-2 : GENERAL SETTINGS -->
                    <input type="hidden" name="success_page" value="../contact-us?res=thank-you" id="success_page" /><!-- PAGE TO REDIRECT AFTER SUBMIT -->
                    <input type="hidden" name="email_to" value="<?=get_settings('contact_email');?>" id="email_to" /><!-- EMAIL ADDRESS WHERE WE WANT TO RECEIVE EMAIL -->
                    <input type="hidden" name="email_subject" value="Query Recieved" id="email_subject" /><!-- SUBJECT OF THE EMAIL -->
                    <!-- STEP-2 : GENERAL SETTINGS -->

                    <label for="name" class="nameLabel">Name</label>
                      <input id="name" type="text" name="name"   />
                    <label class="control-label">Email address</label>
                        <div class="controls">
                          <input type="email" name="email" id="email" />
                          <p class="help-block"></p>
                        </div>
                    <label for="address">Address</label>
                      <input id="address" type="text" name="address"  />
                    <label for="message" class="messageLabel">Enquiry</label>
                      <textarea id="message" name="message"  /></textarea>
                    <label >Security Code</label> 
                        <img src="classes/CaptchaSecurityImages.php?width=100&amp;height=30&amp;characters=5" alt="captcha" style="vertical-align:bottom;"/>&nbsp;&nbsp;&nbsp;<input id="security" name="security" class="required" type="text" style="width:30%;vertical-align:bottom;margin-bottom:0px;padding-bottom:0px;"/></br>
                    <button type="submit" id="submit" name="submit">Send</button>
                </form>
                    </script>

Add `onsubmit='return:false;'` to your form to prevent the default submit action. — Virendra, Sep 02 '13 at 16:41
@ammarkhan I think it may be because of `action="assets/sendmail.php"` in your form, since you already have it in your Ajax. Try removing it. — Funk Forty Niner, Sep 02 '13 at 17:08
@ammarkhan Then try `event.preventDefault();` after `$('#contactForm').validate({` or after `submitHandler: function (form) {` — Funk Forty Niner, Sep 02 '13 at 17:33
@ammarkhan I just noticed something. You have `` at the end of your form. That should not be there, and it (``) is missing at the end of your JS. — Funk Forty Niner, Sep 02 '13 at 17:43
What @Virendra really meant to say was `onsubmit="return false;"`. — Kiruse, Sep 02 '13 at 17:44
@Virendra, When you use this plugin, you absolutely, positively, **do not** put a `onsubmit='return:false;'` in the `form` tag! The submit event is already properly captured by the plugin and inline event handlers are completely unnecessary with jQuery. — Sparky, Sep 02 '13 at 21:43
Big mistake by me ....validating the form two times......first one was hiding somewhere in script file. due to which this script is not working...now i got the solution thanks for all.... — PHP_newone, Sep 11 '13 at 16:44

score 1 · Answer 1 · edited May 23 '17 at 12:07

Your HTML & JavaScript code is working.

However, within your OP, it appears as if you've surrounded both your jQuery and your HTML within one set of <script></script> tags...

You have a <script> tag at the start of your JavaScript....

<script>
$(document).ready(function () {
    $('#contactForm').validate({
        rules: {
            ....

and you have a closing </script> tag at the end of your HTML...

         ....
    </form>
</script>

You cannot do this and it will likely break the whole page. Only enclose the JavaScript within <script></script> tags...

<script>
    $(document).ready(function () {

        $('#contactForm').validate({
            // rules, options, etc.
        });

    });
</script>

You also do not need action="assets/sendmail.php" within your <form> tag. You already have .ajax() to send your data to assets/sendmail.php using the submitHandler of the jQuery Validation plugin.

Two other minor HTML issues I noticed...

1) You have a closing </br> tag. This is invalid HTML because there is no such thing. BR is considered an "empty" or "void" tag so you'll either just use <br> alone, or "self-close" it: <br />. (note the critical position of the slash /)

2) Your textarea is written like this: <textarea /></textarea>. This is invalid HTML because you cannot "self-close" textarea when it already has a closing tag, </textarea>. You simply write it like this: <textarea></textarea>.

DEMO with corrected HTML and working jQuery Validation: http://jsfiddle.net/a2xdg/

score 1 · Answer 2 · edited Sep 27 '15 at 17:40

1

Just write the following logic in your php code:

if(!empty($email)){
  @mail($email_to, $subject, $body, 'From: <'.$email_from.'>');
}

This will prevent sending an email with empty values.

edited Sep 27 '15 at 17:40

josliber

43,891
12
98
133

answered Sep 27 '15 at 16:51

Madan Reddy

85
3

Form submitting twice

2 Answers2