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

score 3 · Accepted Answer · answered Jan 22 '12 at 21:21

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

Thank you! The above suggestion worked as well, but this makes more sense from a programming and learning point of view. — user1002039, Jan 22 '12 at 21:32

Sam Greenhalgh · Answer 2 · 2012-01-22T21:17:24.643

0

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

edited Jan 22 '12 at 21:17

answered Jan 22 '12 at 21:12

Sam Greenhalgh

5,952
21
37

score 0 · Answer 3 · answered Jan 22 '12 at 21:13

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
      }
   }

});

score 0 · Answer 4 · answered Jan 22 '12 at 21:14

0

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.

answered Jan 22 '12 at 21:14

Esailija

138,174
23
272
326

score 0 · Answer 5 · answered Jan 22 '12 at 21:19

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

JQuery Submit Form From Inside Submit Function

5 Answers5

Linked