Question

我有一个表单，我想在提交之前使用jquery来验证表单。如果我点击其中一个按钮，我可以通过ajax调用保存数据。对于其他按钮，我想提交表单，但没有通过ajax，只需提交旧方式并转到该页面。

我的validate（）函数中有submitHandler，这对于执行ajax工作非常有用，但是对于我不想使用ajax的其他按钮呢？我是否从validate（）函数中删除了submitHandler部分？如果是这样，那么我应该如何设置使用ajax？我是否将它放在事件处理程序中以单击该按钮？如果是这样，我应该如何设置它？

Answer 1

难道你不能只创建2个不同的函数或只用布尔值参数化来指示是发送ajax请求还是仅提交表单？后者可以使用JQuery提交函数完成。

Answer 2

我认为最好的方法是绑定个人事件

$('form').on('submitajax submit', function(e){
    if(e.type === 'submitajax'){
        //ajaxstuff
    }
    else{
        //classic stuff
    }
})

您的 ajax按钮将触发 submitajax 事件

Answer 3

您的验证功能可以是这样的：

function bar( ajax )
{
  var valid = true, fooForm = $('#fooForm');
  // do validation stuff

  if( !valid ) return;

  if( ajax ){
   $.post(fooForm.attr('action'), fooForm.serialize());
  }else{
   fooForm.submit();
  }
}

你的按钮：

<input type="button" value="With Ajax" onclick="bar( true )" />
<input type="button" value="Old Fashion" onclick="bar( false )" />

Answer 4

您需要在提交表单时检查JavaScript事件。只需考虑表格：

<form class="js-form">
  <a class="js-save">Save</a>
  <input type="submit" value="Submit"/>
</form>


$('.js-from').on('click', function(event){
   if (event.target === event.currentTarget){
     # Triggers on click submit input that triggers as part of form and target same
     # Call ajax stuff
   } else {
     # Triggers on click link witch is fired as click as not a part of form
     # Call other ajax or link stuff
   }
});

如果在提交按钮上提交表单或者可以做任何其他事情的链接，则可以使用一个功能

Answer 5

我明白了。在我的ajax按钮单击事件处理程序，我需要添加 event.preventDefault（）; 然后我可以将$ .ajax（）调用添加到我想调用ajax的那个调用，并且另一个调用正常地执行提交。

感谢您的所有回复，这是一个有趣的练习，我对这种编码的复杂性有了更多的了解。

jquery表单 - 两个按钮 - 一个使用ajax，一个不是

5 个答案: