JQuery Submit Form From Inside Submit Function

Question

The following is what I'd like to do in my JQuery script. In the submit function (4th) below, I want to decide if the form has file input and submit with either ajax or just a regular form submit without ajax. In other words, if the form has upload, do a regular submit.

I wrote the question in the submit function below. That is the only thing I need to make it work.

Thank you!

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???
      }
   }
});

Answer 1

If you want the submit to continue just don't prevent the default behavior and return true.

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

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

Answer 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). That way you can get rid of the second if-statement, and just let the submit JS-function do nothing when there is a file to send. That way the form will be sent the default way, if no file is selected.

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

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

});

Answer 3

Simple! I removed e.preventDefault(); and added some else conditions. However I provided a very procedural (less ideal) solution.

$(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;
   }
});

Answer 4

this.submit() provided that you haven't overridden it with something like <input name="submit" />

demo:

http://jsfiddle.net/4buHP/

The native .submit() doesn't fire the jQuery event.

Answer 5

From http://api.jquery.com/submit/:

Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler. We can trigger the event manually when another element is clicked:

So turn your logic around. Don't call e.preventDefault() as default and then try to undo it, but rather only call it when it is actually needed.

$(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;
});