Binding jQuery change function to submit function

Question

I'm unable to trigger a form submission upon changing its input. I think I need event handling but I've never really learned what that is.

Here's my HTML:

<form action="/upload">
  <input type="file" name="file">
</form>

Here's my JS:

$('input').change(function(e){
var closestForm=$(this).closest("form");
    closestForm.submit(function(e) {   
  closestForm.ajaxSubmit({   
              success: function(data){
                    console.log('form submitted successfully');
              }
      }); //ajaxSubmit
    return false;
  }); //submit 
}); //change

Please note I'd like to do the submit using AJAX but that isn't the issue as I have other parts of my codebase where I'm able to use the jQuery Form plugin ajaxSubmit() no problem.

Thoughts?

Anoop · Accepted Answer · 2012-09-27 20:36:33Z

2

Since you want submit form on input change. you don't require submit event on form

 $('input').change(function(e){
    var closestForm=$(this).closest("form"); 
      closestForm.ajaxSubmit({   
                  success: function(data){
                        console.log('form submitted successfully');
                  }
          }); //ajaxSubmit
        return false; 
    }); //change

answered Sep 27, 2012 at 20:36

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tim peterson Over a year ago

-@Shusl, thanks. Unfortunately that triggers an error specific to the jQuery form plugin. Do you have any recommendations while still including the submit event?

Anoop Over a year ago

@timpeterson. if you are looking for file uploader then you can follow these thred stackoverflow.com/questions/166221/… and stackoverflow.com/questions/2302344/…. other wise you can use jQuery ajax.

tim peterson Over a year ago

To everyone reading this accepted answer, please see my answer too for the complete instructions of how to tackle this problem.

chris.ribal · Accepted Answer · 2012-09-27 20:40:08Z

0

You could try to "lock" the form submission until the field was filled in, like this:

var form_locked = true;

$("input").change(function(e){
    if($(this).val() == "") {
        form_locked = true;
    }else{
        form_locked = false;
    }
});

$("form").submit(function(e) {

    // prevent default form submit
    e.preventDefault();

    if(form_locked) {
        alert("Please fill in the field!");
    }else{
        // Do your form submission stuff here
    }

});

answered Sep 27, 2012 at 20:40

chris.ribal

4572 silver badges11 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:43:12Z

0

I solved my own problem following the error message i got which led to the following SO Q&A. jQuery form plugin - Uncaught TypeError on file upload.

My error messages was similar to this:

jquery.form.js:357 Uncaught TypeError: 
Object function (a,b){return new d.fn.init(a,b,g)} has no method 'handleError'

Basically as soon as I downloaded the latest jQuery Form plugin js file I was able to eliminate the submit() function and just use ajaxSubmit() as @Shusl suggested.

So special thanks to @Shusl for getting me on the right track.

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Sep 27, 2012 at 20:50

tim peterson

24.4k63 gold badges188 silver badges304 bronze badges

Collectives™ on Stack Overflow

Binding jQuery change function to submit function

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related