Hello,
I am using the forms plugin, and have a page that dynamically creates
multiple forms for editing photos. Each form has a button, that has a
click event is added to it, which submits the form. I am having
problems getting the click event to submit the form so that the
ajaxSubmit() fires. Using the method below, the form submits bypassing
the jquery ajaxSubmit, and does not have any of the options attached
to it. Any ideas?
<script snippet..
var options = {
beforeSubmit: showRequest, // pre-submit callback
success: showResponse, // post-submit callback
url: "/updatePhotos.html" // override for form's
'action' attribute
type: "post" // 'get' or 'post', override for
form's 'method' attribute
};
//attach the form options on all forms with the photoForm class.
$('form.photoForm').ajaxForm(options);
//create a click even and add submit behavior to all inputs that has
the btnPhotos class elements
$("input.btnPhotos").click(
function(){
this.form.submit();
});
... more if needed
</script>
<!-- html snippet-->
<form class="photoForm">
<fieldset>
<div class="photos">
<div>
<input type="text" name="photoId" value="4374"/>
<input type="text" name="registrationId" value="1111"/>
<input type="text" name="visibleState" value="VISIBLE"/>
</div>
<div>
<img src="4374_display.jpg" width="95" height="140" alt="Broken
image"/><br/>
<input type="button" class="btnPhotos" value='Show/Hide'/>
</div>
</div>
</fieldset>
</form>
<form class="photoForm">
<fieldset>
<div class="photos">
<div>
<input type="text" name="photoId" value="4375"/>
<input type="text" name="registrationId" value="6050016300"/>
<input type="text" name="visibleState" value="VISIBLE"/>
</div>
<div>
<img src="4375_display.jpg" width="240" height="240" alt="Broken
image"/><br/>
<input type="button" class="btnPhotos" value='Show/Hide'/>
</div>
</div>
</fieldset>
</form>
