I have many AJAX forms on the page and on button click I need to submit them all. Regular **forms.each(function (index, form) { $(form).submit();} won't work for me because in this way ONLY the last form will be submitted eventually. Therefore, I need submit them via $.ajax(...). But I want to enable submit ONLY and ONLY if form is VALID
On "submitForms" click the function "submitTest" is invoked. From jQuery documantation "submitHandler" would be called if form is VALID. So, the validation works and "submitHandler" is NOT invoked if form is INVALID. BUT, the XmlHttpRequest is sent anyway, 开发者_开发知识库though "submitHandler" isn't invoked.
Where is my mistake? Or is there other way to do it? Thank you
<% using (Ajax.BeginForm("FormPost", "Customer", null, new AjaxOptions() { HttpMethod = "POST" }, new { @class = "form-container" }))
{ %>
<%: Html.TextAreaFor(m => m.Name, new { width = 440, height = 100 })%>
<input type="button" value="submitForms" />
<% }%>
<script type="text/javascript">
function submitTest(){
var forms = $(".form-container");
forms.each(function (index, form) {
$(form).validate({
submitHandler: function (form) {
$.ajax(
{
....
});
}
});
});
forms.each(function (index, form) {
$(form).submit();
});
}
</script>
EDITED
Most likely it's due to the Ajax.BeginForm as that sets up an onclick and an onsubmit handler. Which probably winds up triggering first before your validate submit handler.
UPDATE
If you want to keep using the ajax form in the module where you plan on submitting the form via jQuery.ajax
, you can do the following.
$(function() {
$('.form-container').removeAttr('onsubmit').removeAttr('onclick');
});
This will remove the handlers Ajax.BeginForm puts on the form
tag. You'll need a way to not include this script in the other module though.
精彩评论