How to submit a form and update colorbox without reloading the page

Question

this is the following: jQuery change the contents of a color window

Now the contents of the original colorbox (test_2.html) is a simple form: For example,

<form id="foo" action="test_3.html"> <imput type="submit" id="formInput" value="send form"> </form> 

The form must be submitted, and the contents of test_3.html must be loaded in the same color code.

Answer 1

If you add this to docReady on your main page, it should take care of everything:

 $('form').live('submit', function(e){ var successHref = this.action, errorHref = "formError.php"; e.preventDefault(); $('#cboxLoadingGraphic').fadeIn(); $.ajax({ type: "POST", url: "processForm.php", data: {someData: $("#someData").val()}, success: function(response) { if(response=="ok") { console.log("response: "+response); $.colorbox({ open:true, href: successHref }); } else { $.colorbox({ open:true, href: errorHref }); } }, dataType: "html" }); return false; }); 

This code makes a few assumptions. One of them is that it sends data to processForm.php (as you can see) and awaits a response of “ok” (in plain text, without json) when everything works. If you don't care about the answer or troubleshooting, you can simply remove the if-else block and open the colorbox with the page set to action . Anway, you probably want to change it, but it gives you an idea of ​​how this can be done.