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!
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!
}
});
on the data
use $('#bookmark_form_entry_106').serialize()
to set post values
$.ajax({
type: "POST",
url: "http://mysite.com//S=1b73e2e22729ccf0613b758ecc7e2631fab28745/", // is this correct?
data: $('#bookmark_form_entry_106').serialize(), // what data should go there?
success: function() {
// wohoo, this works!
}
});