CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcformsgoogle-chrome
L_7337
L_7337

Reputation: 2748

jQuery submit() is not firing

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?

Upvotes: 2

Views: 583

Answers (4)

L_7337
L_7337

Reputation: 2748

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.

Upvotes: 0

Kyle Needham
Kyle Needham

Reputation: 3389

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

Upvotes: 2

Amin Jafari
Amin Jafari

Reputation: 7207

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

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

Upvotes: 2

Chris Fremgen
Chris Fremgen

Reputation: 5378

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]

Upvotes: 2

Related Questions