Ajax form refreshes after submitting

Question

I have added a simple Ajax form to my wordpress website. The validation works, but the form refreshes after submitting instead of sending the email.

My code is:

    <script type="text/javascript">
jQuery.validator.addMethod('answercheck', function (value, element) {
        return this.optional(element) || /^\bcat\b$/.test(value);
    }, "type the correct answer -_-");

// validate contact form
jQuery(function() {
    jQuery('#contact').validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true
            },
            answer: {
                required: true,
                answercheck: true
            }
        },
        messages: {
            name: {
                required: "come on, you have a name don't you?",
                minlength: "your name must consist of at least 2 characters"
            },
            email: {
                required: "no email, no message"
            },
            message: {
                required: "um...yea, you have to write something to send this form.",
                minlength: "thats all? really?"
            },
            answer: {
                required: "sorry, wrong answer!"
            }
        },
        submitHandler: function(form) {
            jQuery(form).ajaxSubmit({
                type:"POST",
                data: jQuery(form).serialize(),
                url:"http://testtermil.pl/wordpress/process.php",
                success: function() {
                    jQuery('#contact :input').attr('disabled', 'disabled');
                    jQuery('#contact').fadeTo( "slow", 0.15, function() {
                        jQuery(this).find(':input').attr('disabled', 'disabled');
                        jQuery(this).find('label').css('cursor','default');
                        jQuery('#success').fadeIn();
                    });
                },
                error: function() {
                    jQuery('#contact').fadeTo( "slow", 0.15, function() {
                        jQuery('#error').fadeIn();
                    });
                }
            });
        }
    });
});
</script>

And php.process file:

<?php


    $to = "myemail@gmail.com";
    $from = $_REQUEST['email'];
    $headers = "From: $from";
    $subject = "You have a message.";

    $fields = array();

    $fields{"email"} = "email";
    $fields{"message"} = "message";

    $body = "Here is what was sent:\n\n"; foreach($fields as $a => $b){   $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); }

    $send = mail($to, $subject, $body, $headers);

?>

And here's link to live form: http://testtermil.pl/wordpress/kontakt/

I've tried using different jquery version add putting the code in different order but it didn't help. I've also checked with my hosting provider and email service is on.

Please let me know if you have any ideas. What to do so this form sends email. Many thanks in advance, Neko

So you don't want the page to refresh? I'm not sure what you want. What is the problem exactly? What are you trying to achieve? — Mike. D, Oct 10 '15 at 14:34
Did you take a look at this article? http://stackoverflow.com/questions/14456673/sending-email-with-php-from-an-smtp-server — Mike. D, Oct 10 '15 at 14:54

score 1 · Answer 1 · edited Oct 10 '15 at 15:03

You must prevent submiting form via event.preventDefault() :

$("#contact").submit(function(e) {
    e.preventDefault();
  }).validate({
  rules: {...},
  submitHandler: function(form) {
    ...
  }
});

edit (complete code)

jQuery.validator.addMethod('answercheck', function (value, element) {
        return this.optional(element) || /^\bcat\b$/.test(value);
}, "type the correct answer -_-");

// validate contact form
jQuery(function() {
    jQuery('#contact').submit(function(e) {
    e.preventDefault();
  }).validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true
            },
            answer: {
                required: true,
                answercheck: true
            }
        },
        messages: {
            name: {
                required: "come on, you have a name don't you?",
                minlength: "your name must consist of at least 2 characters"
            },
            email: {
                required: "no email, no message"
            },
            message: {
                required: "um...yea, you have to write something to send this form.",
                minlength: "thats all? really?"
            },
            answer: {
                required: "sorry, wrong answer!"
            }
        },
        submitHandler: function(form) {
            jQuery(form).ajaxSubmit({
                type:"POST",
                data: jQuery(form).serialize(),
                url:"http://testtermil.pl/wordpress/process.php",
                success: function() {
                    jQuery('#contact :input').attr('disabled', 'disabled');
                    jQuery('#contact').fadeTo( "slow", 0.15, function() {
                        jQuery(this).find(':input').attr('disabled', 'disabled');
                        jQuery(this).find('label').css('cursor','default');
                        jQuery('#success').fadeIn();
                    });
                },
                error: function() {
                    jQuery('#contact').fadeTo( "slow", 0.15, function() {
                        jQuery('#error').fadeIn();
                    });
                }
            });
        }
    });
});

Sorry so how to implement it in the code? I'm new to Javascript — Neko, Oct 10 '15 at 14:48
I've tried your code and nothing happens after clicking the button.I've also tried the code without validation.I've recived number of empty messages. — Neko, Oct 10 '15 at 15:04
that works great here : https://jsfiddle.net/k9ty86aL/2/ I have tested this even without the preventDefault methode and it works geatly! — JSeifBY, Oct 10 '15 at 15:54

score 1 · Answer 2 · answered Oct 10 '15 at 14:58

1

I guess the reason is, in your html code, you have set input type="submit" which actually refreshes the form(this is browser default behavior):

    <input style="width:80px;margin-left: 315px;" id="submit" name="submit" 
type="submit" value="Send">

Since you want to use ajaxSubmit, change it to button and try.

 <input style="width:80px;margin-left: 315px;" id="submit" name="submit" 
type="button" value="Send">

answered Oct 10 '15 at 14:58

Rama Rao M

2,646
9
41
62

Ive tried changin submit tag to button and still no luck. Perhaps its wordpress issue? – Neko Oct 10 '15 at 18:26
oh! if that is the case, you better to test it outside by getting that html and script code in notepad. – Rama Rao M Oct 10 '15 at 22:42
I got email sending working by creating email box on my host page and putting the new address into process.php page and adding process.php in action tag within form. Theres one problem though. Now I get blank page after submitting the form. What to do so the user gets redirected back to the form after submition? – Neko Oct 11 '15 at 09:22
sorry! I din't get that.By the way, you can still make it navigate to other page by setting `window.location.href`. – Rama Rao M Oct 11 '15 at 10:02
And it redirects nicely all i need now is confirmation message.Should I write it in php or js? – Neko Oct 11 '15 at 10:11
I've tried echo "Your message has been send"; but it doesnt show up anywhere – Neko Oct 11 '15 at 10:18
@Neko you could caught up the message in the submitForm response and display it where ever you want. – Rama Rao M Oct 11 '15 at 10:49
Sorry I'm not sure if I understand.Do you mean to create another page with the message and redirect it there? What if I'd like the message to show on my initial form. There's line in the script for confirmation message but it doesnt work. – Neko Oct 11 '15 at 11:30
Message can be displayed by either ways.But I recommend you to display it through javascript i.e in response. You have written that part already. `success: function() {//... jQuery('#'success).fadeIn();}`. If you still have any queries ping me on `ramstheroyal@gmail.com`, I'l be online. – Rama Rao M Oct 11 '15 at 17:40
FYI : http://stackoverflow.com/questions/5265914/form-ajaxsubmit-is-not-a-function – Rama Rao M Oct 11 '15 at 18:09
Did you look into this : http://malsup.com/jquery/form/#ajaxSubmit There is an important point in submit fn: // !!! Important !!! // always return false to prevent standard browser submit and page navigation return false; – Rama Rao M Oct 11 '15 at 18:16

Ajax form refreshes after submitting

2 Answers2