Question

I have a form that validates using jquery. The form’s id is “contact” and it’s inside of a div called “formdiv”.

I want it to, on submit, instead of taking me to a new page “contact_received.php”, replace the contents of “formdiv” with the contents of “contact_received.php” including the submitted $_GET data. (e.g.: echo ‘thank you, ‘.$_GET[‘name’].’ for contacting us, we’ll get back to you about ‘.$_GET[‘message’]). I looked for something similar online & figured I would use jquery submit handler:

$("#contact").validate({    
rules: {SOME RULES-clipped for length}, 
messages: {SOME MESSAGES-clipped for length},

submitHandler: function() { 
    $.ajax({
        url: '/contact_received.php',
        type: "GET",
        data: datastring,    
        cache: false,
        success: function (html) {             
            $('#formdiv').fadeOut('slow',complete);
            function complete() { 
                $('#formdiv').fadeIn('slow').html(html); 
                $('.loading').hide();
            }
        }
    });
}
});

form code is here:

<div id="formdiv">

    <form id="contact" name="contact" action="/contact_received.php" method="get">

        Your Name

        <input type="text" name="name" id="name" value="" style="display:block;">

     Your Email

      <input type="text" name="email" value="" style="display:block;">

      messsage

      <textarea name="message" cols="50" rows="5" style="display:block;"></textarea>

     <input type="submit" class="btn" value=

      "Contact Us" name="Submit">

  </form> 
</div>

This doesn’t break the validation, but it just takes me right through to the contact_received.php page. What am I doing wrong?

Answer 1

I tried your code on my PC and it works well. I have even added some rules and messages.

$("#contact").validate({
    rules : {
        name : { required: true, minlength: 3 },
        email : { required: true, email: true },
        message: { required: true, minlength: 5 }
    },
    messages: {
        name: {
           required: "We need your name to identify you",
           minlength: jQuery.format("At least {0} characters required!")
        },
        email: {
           required: "We need your email address to contact you",
           email: "Your email address must be in the format of [e-mail]",
        },
        message: {
            required: "You need to write something",
            minlength: jQuery.format("At least {0} characters required!")
        }
    },
    submitHandler: function() { 
        $.ajax({
            url: './contact_received.php',
            type: "GET",
            data: 'name=Romain&message=something',    
            cache: false,
            success: function (html) {            
                $('#formdiv').fadeOut('slow',complete);
                function complete() { 
                    $('#formdiv').fadeIn('slow').html(html); 
                    $('.loading').hide();
                }
            }
        });
    }
});

I suggest you show us your rules and messages. If you have a syntax error in the javascript code, then you are redirected on the targeted page.

(Tip : to see Javascript errors in Firefox, go to the main Firefox menu => Web development => Errors console). I hope the menus are the same in English, I’m French.

EDIT : I also have added a period before your php file’s name : url: './contact_received.php'. On my computer if I don’t write it, nothing happens when I submit the form (no redirection, nothing)