JQuery 从内部提交函数提交表单答案

【问题标题】：JQuery Submit Form From Inside Submit FunctionJQuery 从内部提交函数提交表单
【发布时间】：2012-01-22 21:08:48
【问题描述】：

以下是我想在我的 JQuery 脚本中执行的操作。在下面的提交功能（第 4 个）中，我想确定表单是否具有文件输入并使用 ajax 提交或仅使用不带 ajax 的常规表单提交。换句话说，如果表单已经上传，请定期提交。

我在下面的提交功能中写了这个问题。这是我唯一需要做的事情。

谢谢！

function FindFileInput(){
   // check for file input
   var FileInput = $('input:file');
   if(FileInput.length > 0){
      return true;
   }else{
      return false;
   }
}

function validation(){
  // code to validate form
  ...
}

function ajaxSubmit(formData){
   $.ajax({
      // ajax submit code
   });
}

$(myForm).submit(function(e){
   e.preventDefault();

   // 1. if NO file input present
   if(FindFileInput() === false){
      if(validation() === true){
         // serialize and call ajaxSubmit function
      }
   }

   // 2. if file input IS present
   if(FindFileInput() === true){
      if(validation() === true){
         // QUESTION: How do I submit the form here???
      }
   }
});

【问题讨论】：

标签： jquery form-submit

【解决方案1】：

来自http://api.jquery.com/submit/：

现在，当表单提交时，消息会发出警报。有时候是这样的在实际提交之前，所以我们可以取消提交动作在事件对象上调用 .preventDefault() 或返回 false 来自我们的处理程序。我们可以手动触发事件，当另一个元素被点击：

所以把你的逻辑转过来。不要将 e.preventDefault() 作为默认调用，然后尝试撤消它，而是仅在实际需要时调用它。

$(myForm).submit(function(e){

    // 1. if NO file input present
    if(FindFileInput() === false){
        if(validation() === true){
            ajaxSubmit(formdata);
        }
     }

     // 2. if file input IS present
     if(FindFileInput() === true){
         if(validation() === true){
             return true; // submit form as normal, don't call e.preventDefault()
         }
     }

     // Prevent form from submitting normally
     e.preventDefault();
     return false;
});

【讨论】：

谢谢！上述建议也很有效，但从编程和学习的角度来看，这更有意义。

【解决方案2】：

Don't call the e.preventDefault() so early, do it only when you actually want to stop the form from being posted the default way (thus, when a file is selected).这样你就可以摆脱第二个 if 语句，当有文件要发送时，让提交 JS 函数什么都不做。这样，如果未选择任何文件，表单将按默认方式发送。

$(myForm).submit(function(e){

   // 1. if NO file input present
   if(FindFileInput() === false){
      if(validation() === true){
         e.preventDefault();
         // Do your AJAX-stuff here
      }
   }

});

【讨论】：

【解决方案3】：

this.submit() 前提是你没有用类似<input name="submit" /> 的东西覆盖它

演示：

http://jsfiddle.net/4buHP/

原生 .submit() 不会触发 jQuery 事件。

【讨论】：

【解决方案4】：

如果您希望提交继续，请不要阻止默认行为并返回 true。

$(myForm).submit(function(e){

    if(!FindFileInput()){
        if(validation()){
            //AJAX method
        }
    }else{
        if(validation()){
            return true;
        }
    }
    e.preventDefault();
    return false;
});

【讨论】：

【解决方案5】：

简单！我删除了 e.preventDefault();并添加了一些其他条件。但是我提供了一个非常程序化（不太理想）的解决方案。

$(myForm).submit(function(e){

   // 1. if NO file input present
   if(FindFileInput() === false){
      if(validation() === true){
         // serialize and call ajaxSubmit function

         return false; // stops form submissions, same as preventDefault but less chars.
      }
   }

   // 2. if file input IS present
   if(FindFileInput() === true){
      if(validation() === true){
         // QUESTION: How do I submit the form here???
         // no return false, moves forward.
      } else {
          return false;
      }
   } else {
      return false;
   }
});

【讨论】：