Question

<form target="_blank" method="POST" action="somePage.php" id="myForm">
  <input type="hidden" name="someName" value="toBeAssignedLater"/>
  <button type="submit">Proceed</button>
</form>

一开始，someName的值尚未确定，我想在实际提交表单之前执行Ajax来获取并为其赋值。

我试过了：

$("#myForm").submit(function (e) {
  var $this = $(this);
  someAjaxFunction(function (data) {
    $this.find('input[name="someName"]').val(data.value);
  });
});

但是在Ajax完成之前表单已经提交了，我怎样才能确保在Ajax完成后提交表单。

我希望保留由用户启动的submit形式的事件而不是代码，例如$("#myForm").trigger('submit');，因为我不希望浏览器阻止新窗口选项卡。

Answer 1

$("#myForm").submit(function (e) {
  var $this = $(this);
  someAjaxFunction(function (data) {
    $this.find('input[name="someName"]').val(data.value);
    // submit form without triggering jquery handler
    $this[0].submit(); 
  });
  // cancel the current submission
  return false;
});

Answer 2

为什么不在页面加载时ajax值而不是提交数据？

$(function(){
     someAjaxFunction(function (data) {
        $('input[name="someName"]').val(data.value);
      });
    $("#myForm button").on('click',function(){
      $(this).submit(); 
    });
    });

或将ajax调用放在click事件上并提交更新值：

$(function(){

        $("#myForm button").on('click',function(e){
         e.preventDefault();
          $.ajax({
            url:url, //other params
            success:function(data){
                //thing to do before submit
               $('input[name="someName"]').val(data.value);
              $(this).submit(); 
            }
          });

        });
        });

提交HTML表单之前的Ajax（异步）

2 个答案: