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:

  • Capturing image with webcam
  • What are the possible ways to prevent form from double posting in ASP.NET MVC?
  • Visual Studio 2013 can't debug javascript in cshtml
  • How to include js files in asp.net MVC and have a valid path on all routes
  • How to hide details in jquery ajax from browser page source
  • Is there a way to check if JavaScript is disabled from controller
  • <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?

  • SignalR - Send message to user using UserID Provider
  • MVC Enum list bind in dropdown using angular JS
  • Javascript do not react on checkbox with variable id to show hidden Textbox
  • How to get a list from mvc controller to view using jquery ajax
  • How to set value into HTML5 date field from Asp.Net MVC Razor?
  • ASP.NET MVC Dropdown list on change to cause postback without Javascript
  • 4 Solutions collect form web for “jQuery submit() is not firing”

    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]

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

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

    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

    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.