[jQuery] How to have multiple repeating forms with different targets on the same page using ajaxform plugin
I have searched all over and tried many different things for a
solution to my problem. I'm hoping that someone here can help.
I am trying to have 1 to 20 forms on one page - they are all basically
the same form. It gets repeated 1 to 20 times depending on how many
different addresses are available.
I am using the ajaxForm plugin. When I submit the form, the target
field (.address_edit_display) is updated with the response from the
server. BUT it is updated for all of the address_edit_display divs.
I only want it to update the address_edit_display div above that
corresponds to the address_edit_modify div below (which contains the
form). I understand is is probably becuase I am
using .address_edit_display as the target div - which is used multiple
times.
Does anyone know how I can only update the preceeding
address_edit_display div with the server response?
Thanks
My code is below:
javascript:
$(document).ready(function() {
var options = {
target: '.address_edit_display',
beforeSubmit: showRequest,
success: showResponse
};
$('.form_addresses_edit').ajaxForm(options);
})
html:
///////////////////////////////////////////////////////////////////////////////////////////
START: the following code gets repeated 1-20 times depending on how
different types of addresses there are
///////////////////////////////////////////////////////////////////////////////////////////
<div class="address_edit_display">
</div>
<div class="address_edit_modify">
<form action="http://www.mysite.com/ajax_submit_addresses"
method="post" class="form_addresses_edit">
<input type="hidden" name="AddressID"/>
<input type="text" name="AddressType"/>
<input type="text" name="Address"/>
<input type="text" name="City"/>
<input type="text" name="State"/>
<input type="text" name="ZipCode"/>
<input type="submit" name="mysubmit" value="Make Changes" />
</form>
</div>
///////////////////////////////////////////////////////////////////////////////////////////
END: repeating code
///////////////////////////////////////////////////////////////////////////////////////////