0

I have this markup:

<form id="dpl" class="form-horizontal" method="post">
    <label class="col-md-1 control-label" for="report_date">Svc Date</label>
    <div class="col-md-3" id="dispatchLog-container">
        <div class="input-group date">
            <input id="dpl_date" name="start" type="text" class="form-control" required="" value="11/17/2015" tabindex="-1"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>

        </div>
    </div>
</form>

and this jQuery:

$('#dpl_date').on('change', function () {
    alert('pre submit');
    $('#dpl').submit();
    alert('post submit');
});

Behavior:

Both alerts fire onChange() but the form does not submit. Any ideas?

Rajan Goswami
  • 769
  • 1
  • 5
  • 17
H. Ferrence
  • 7,906
  • 31
  • 98
  • 161
  • 1
    Are you sure you aren't preventing form to be submited? Maybe a 'native' bootstrap jq event. I'd try: `$('#dpl')[0].submit();` – A. Wolff Nov 17 '15 at 12:51
  • Thanks @AWolf -- I'l give that a try now and postback – H. Ferrence Nov 17 '15 at 12:53
  • That did not work @AWolf – H. Ferrence Nov 17 '15 at 12:56
  • Just remove the space after on( – Aatman Nov 17 '15 at 12:58
  • @H.Ferrence Error in console? Are you using duplicate IDs? Anyway, you have to provide MCVE. – A. Wolff Nov 17 '15 at 12:58
  • But why would the alerts fire and not the .submit() if I remove some whitespace @GHOST93? – H. Ferrence Nov 17 '15 at 13:00
  • @H.Ferrence There is a space after your "on( "code at line please remove it and it will work. --$('dp1_date').on( 'change') ++$('dp1_date').on('change') – Aatman Nov 17 '15 at 13:01
  • @GHOST93 No, extra space as no incidence here and OP said event is fired as expected – A. Wolff Nov 17 '15 at 13:01
  • @H.Ferrence I tried your code on jsbin and the alerts were started working after removing the space.. https://jsbin.com/lapebufiwe/edit?html,js,console,output – Aatman Nov 17 '15 at 13:01
  • Check this link : http://stackoverflow.com/questions/16245248/submit-automatically-a-form-with-jquery-onchange-event – Rohan Kawade Nov 17 '15 at 13:03
  • Cannot replicate issue here: https://jsfiddle.net/vLuahprt/ – A. Wolff Nov 17 '15 at 13:03
  • There is an error in the console on `$('#dpl')[0].submit();` which someone suggested as an answer. When I remove it and go back to `$('#dpl').submit();` there are no errors in the console and form still does not submit. P.S. what does "MCVE" mean? – H. Ferrence Nov 17 '15 at 13:04
  • @H.Ferrence And what error do you get when using `$('#dpl')[0].submit();`??? If you have something like `submit isn't a method`, then i guess you are using element with name `submit` somewhere in your form http://stackoverflow.com/questions/833032/submit-is-not-a-function-error-in-javascript – A. Wolff Nov 17 '15 at 13:04
  • I get this error @AWolf `Uncaught TypeError: $(...)[0].submit is not a function` – H. Ferrence Nov 17 '15 at 13:07
  • 1
    So, have you somewhere in HTML markup (inside form obviously), element with attribute: `name="submit"` (check rendered HTML markup)??? See link in my previous posted comment – A. Wolff Nov 17 '15 at 13:08
  • @H.Ferrence how are you checking that the form gets submitted or not? I mean how are you handling the POST data in your code?? – Aatman Nov 17 '15 at 13:09
  • yes I do have `name=submit` @AWolf -- maybe that's it. It is there because I have a submit button for submitting, but I am also trying to "refresh" the page on certain onChange() events. I gotta to into a meeting for a few hours so I am stepping away from this issue until later. Thought it would be an easy fix. Maybe we're onto something. I'll post back later. – H. Ferrence Nov 17 '15 at 13:11
  • @H.Ferrence Just set name attribute to something else, e.g `name="_submit"`. And for sure this is your issue. Next time, instead of letting us guessing, provide MCVE, not only part of code. And if you had tested your posted code, you'd have find it works as expected – A. Wolff Nov 17 '15 at 13:17
  • Still does not work. Also, still unsure what "MCVE stands for. – H. Ferrence Nov 17 '15 at 18:22
  • Found it. It was both the `id="submit"` and the `name="submit"`on the submit button tag – H. Ferrence Nov 17 '15 at 18:30
  • Thanks for your help @AWolff. If you post an answer, I'll accept it. – H. Ferrence Nov 17 '15 at 18:41

1 Answers1

3

I think you miss the action attribute in your form tag

I've you try :

$('#dpl_date').change(function() {
  alert('pre submit');
  $('#dpl').submit();   
  alert('post submit');
});
goupil
  • 175
  • 10