Question

I would like to process this form with ajax, but it’s not entirely clear to me on how I should handle data before sending. This is my form, it’s an expression engine module that outputs that, so I’m not aware on what will happen into the php function :

<form id="bookmark_form_entry_106" class="bookmark_form" name="bookmark_form" method="post" action="http://mysite.com//S=1b73e2e22729ccf0613b758ecc7e2631fab28745/">

<div class="hiddenFields">
<input type="hidden" name="XID" value="438068dba50235d9992e1492a6171e892f7bac60">
<input type="hidden" name="ACT" value="50">
<input type="hidden" name="RET"     value="http://mysite.com/S=1b73e2e22729ccf0613b758ecc7e2631fab28745/video/esegui_slq_1">
<input type="hidden" name="type" value="entry">
<input type="hidden" name="data_id" value="106">
<input type="hidden" name="site_id" value="3">
</div>


<input type="submit" value="add bookmark">

</form> 

I will use jQuery $.ajax(); but I don’t know how to handle the form data:

$.ajax({  
type: "POST",  
url: "http://mysite.com//S=1b73e2e22729ccf0613b758ecc7e2631fab28745/",  // is this correct?
data: ,  // what data should go there?
success: function() {  
 // wohoo, this works! 
}  
});  

I’m quite a newbie with forms so I’m not sure if I had to know more about how the POST script will handle my data, or if knowing what’s inside the form itself it’s enough.

I’m also curious on how I can test this with the web inspector (or firebug) Thank you!

Answer 1

To get the data, you’ll need jQuery’s serialize function ( http://api.jquery.com/serialize/ ).

var data = $('#form_id').serialize()

Then just use the data variable in your AJAX call!

Depending on how exactly you’re handling the submit of the form, you should probably be able to have the $(this) variable be your form which has been submitted.

So a nice way of constructing your call would be:

$.ajax({  
type: "POST",  
url: $(this).attr('action'),  // read the action attribute of the form
data: $(this).serialize(),  // what data should go there?
success: function() {  
 // wohoo, this works! 
}  
});