Question

I’m using colorbox to open a form (in a seperate html file) from a link, carry out validation and submit the form to a php script. This is all working.

What I want to do now is for the result from the php script to appear in the colorbox. The script for the submit is as follows:

$.post('processForm.php', $("#chngPass").serialize(), function(data) {
    $('#FormContainer').html("<div id='message'></div>");  
    $('#message').html("<h2>Thank you for request</h2>")  
        .fadeIn(1500, function() {  
            $('#message').append(data);  
        });           
});

At one point I did get the message to appear but on the main page as colorbox closed. Now I can’t get anything to display on success.

I understand I need to stop the page refresh using ‘return false’ but i’ve tried that in various bits of the script so not sure where that should go.

Can anyone point me in the right direction please.

the ‘formContainer’ is a div containing the form in the form page, the intention is to replace the content with the message

Thanks

Update:
Thanks for the input so far. Still cant get the validate and submit script to work.

I’ve used a couple of methods now to submit the form, the latest one is this one:

    submitHandler: function() { 
        var url = "../2010/includes/scripts/php/memberFunctions.php"; //the form processing url
        $.ajax({
       type: "POST",
       url: url,
       data: $("#chngPass").serialize(), 
       success: function(data)
       {
       $("#chngPassWrapper").html(data); 
               }
    });

    return false; // avoid the actual submit of the form.

    }

I try this without the validate script and it works, the form submits and the form is then replaced in the colorbox with the results of the submit.

Putting back the validation script the form again submits but does not stop the form submit refreshing the page but the result of the submit appears in the top left corner of the refreshed page.

How can I use validate, use the post and stop the form from carrying out the submit and refreshing the page

Here’s the full script to put the above in context: [link] http://jsfiddle.net/longestdrive/fJELU/

Thanks for your help

Answer 1

Ha! Solved it

I thought the validation script was working as it appeared to be on it’s own but one of the rules was incorrect which was then throwing the script out (thanks firebug!)

The equalto rule should be equalTo

Result!!