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>