Geek asks and answers

How to change form containing div after validation and submit?

I have a form that validates the use of jquery. The form identifier is “contact” and inside the div is “formdiv”.

I want him, instead of sending me to the new page "contact_received.php", replace the contents of "formdiv" with the contents of "contact_received.php", including the submitted $ _GET data. (for example: echo 'thank you,'. $ _ GET ['name']. 'to contact us, we will return to you. $ _ GET [' message ']). I searched for something similar on the Internet and decided that I would use the 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 does not violate the validation, but it just takes me directly to the contact_received.php page. What am I doing wrong?

+3
2

, . .

$("#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 name@domain.com",
        },
        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();
                }
            }
        });
    }
});

. javascript, .

(: Javascript Firefox, Firefox = > - = > ). , , .

EDIT: php : url: './contact_received.php'. , , , ( , )

+2

, validate. :

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

:

<form id="contact" name="contact" action="">

false, , .

, , . :

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

    }
});

ajax, , , .

.

+1

More articles:


All Articles