jQuery submit() is not firing

Question

I am trying to trigger the submit of a form from a link outside the form (not the submit button).

Here is the basics of the form:

<form action="/Hospice/TabPatientTrackingPost" id="formTabPatientTrackingPost" method="post">

    [a big form with lots of inputs]

    <div class="pull-right">
        <button type="submit" class="btn btn-brand" id="btnSave" name="btnSave">Save</button>
        <button type="reset" class="btn btn-brand" id="btnCancel">Cancel</button>
    </div>
</form>

Here is what the link looks like:

<a href="/Hospice/TabLiving/1" onclick="triggerSave();">Living</a></li>

JS Function:

 function triggerSave() {
    alert("triggerSave test alert");
    $("#formTabPatientTrackingPost").submit(); 
}

But, the code $("#formTabPatientTrackingPost").submit(); is not causing the form to post the submit.

The alert("triggerSave test alert"); is firing, but the form is not submitting.

It works fine if I just click the Save button.

Any ideas what I am doing wrong?

No errors in the console, and triggerSave() is getting called in the `onclick` of the link. — L_7337, Jul 16 '14 at 21:20
Is there any code specified for the Submit event in the form? $('#form').submit(function(){...}); — celerno, Jul 16 '14 at 21:25
I see everyone's jsfiddle below works, but there is something wrong with mine that is preventing .submit() and .trigger('click') from working. I'll keep working on it and see what I can figure out. thx. — L_7337, Jul 16 '14 at 21:39

score 2 · Answer 1 · answered Jul 16 '14 at 21:21

2

Based on what you have posted, this works fine for me.

http://jsfiddle.net/jFYN2/

triggerSave();

I would check to make sure you're including the right version of jQuery.

Also verify that you do not have any syntax issues in the [a big form with lots of inputs]

answered Jul 16 '14 at 21:21

Chris Fremgen

4,649
1
26
26

1

Also check that the script is being executed when the document loads! `$(document).ready(function(){/*...*/})` – Jul 16 '14 at 21:25

score 2 · Answer 2 · answered Jul 16 '14 at 21:21

2

try this: http://jsfiddle.net/8rLGN/2/

$('a').click(function(e) {
    e.preventDefault();
    alert("triggerSave test alert");
    $("#btnSave").trigger('click'); 
});

answered Jul 16 '14 at 21:21

Amin Jafari

7,157
2
18
43

score 2 · Answer 3 · answered Jul 16 '14 at 21:30

2

You need to make sure your function is available globally when calling functions from the onclick attribute, try:

triggerSave = function() {
    alert("triggerSave test alert");
    $("#formTabPatientTrackingPost").submit();
}

DEMO

answered Jul 16 '14 at 21:30

Kyle Needham

3,379
2
24
38

The `alert` is getting called, so it seems that part is working. – L_7337 Jul 16 '14 at 21:31
@L_7337 check the demo the form does get submitted as well. – Kyle Needham Jul 16 '14 at 21:32

score 0 · Accepted Answer · edited May 23 '17 at 12:29

As I worked on this more, I realized the problem was only occurring in Chrome. Everything worked in Firefox and IE (yeah, who would have guessed).

Then, that led me to this post: JQuery submit not working in Chrome

So, my final solution was to use an AJAX POST to get this working:

    triggerSave = function () {
    $.ajax({
        url: '/Hospice/TabPatientTrackingPost',
        type: 'POST',
        dataType: 'json',
        data: $('form#formTabPatientTrackingPost').serialize(),
        success: function (data) {
            console.log("success");
        }
    });
}

Thank you to everyone that helped! +1 for all the useful answers.

jQuery submit() is not firing

4 Answers4