[SOLVED] problem submitting ajax form when multiple forms
I have a page with a list, and each list contains a form with a different ID. I want to be able to submit each form using ajax. When I put the exact form ID in the jquery code, everything works fine. But when I try to dynamically create the ID depending on which form the user clicks, then the form submits, but now with the ajax functionality. here's the javascript:
$(function() {
$(".button").click(function(){
current_id = $(this).attr('id');
formname = "#form"+current_id;
alert(formname);
$(formname).trigger('submit');
});
$(formname).submit(function() {
alert(current_id);
// now we're going to capture *all* the fields in the
// form and submit it via ajax.
// :input is a macro that grabs all input types, select boxes
// textarea, etc. Then I'm using the context of the form from
// the initial '#contactForm' to narrow down our selector
var inputs = [];
$(':input', this).each(function() {
inputs.push(this.name + '=' + escape(this.value));
run = inputs.join('&');
})
// now if I join our inputs using '&' we'll have a query string
jQuery.ajax({
type: "POST",
data: run,
url: this.action,
timeout: 2000,
error: function() {
console.log("Failed to submit");
},
success: function(r) {
alert(r);
}
}) // checkout
http://jquery.com/api
for more syntax and options on this method.
// re-test...
// by default - we'll always return false so it doesn't redirect the user.
return false;
})
})
Here's the html:
<div id="window<?=$row->id_auction?>" class="flora" title="Send a message to ">
<form action="http://localhost:8888/account/send" method="post" id="form<?=$row->id_auction?>" class="formsmall">
<li>
<label for="subject">Subject:</label>
<input type="text" name="subject" value="" /> </li>
<li>
<label for="message_content">Message:</label>
<textarea name="message_content" cols="90" rows="3" ></textarea>
<div class="submitButton"><a id="<?=$row->id_auction?>" class="button" ><span>Send Message</span></a></div>
</form> </div>