JQuery submit not working in Chrome

Question

Following is the form

@using (Html.BeginForm(MVC.CollectionPlanConfirmation.ActionNames.Edit, MVC.CollectionPlanConfirmation.Name, FormMethod.Post, new { @id = "collectionPlanForm" }))
{
.................
}

Submit button is outside Form. Following is the submit button on my MVC view.

<input type="submit" value="Save" class="aSubmit" onclick="return SubmitForm();" />

Following is the jquery that should submit the form.

<script type="text/javascript">    
function SubmitForm() {
...... validation code........
$('#collectionPlanForm').submit();
}
</script>

I could see, IE8, and Firefox submitting the form, but it doesn't go well with Chrome. It doesn't do anything at all.

What could be the reason, and how to fix it?

Any help on this, much appreciated.

Thanks

Answer 1

The best way to perform a submit for jquery is in this way.

$('#submitButton').click( function() {
    $.ajax({
        url: 'some-url',
        type: 'post',
        dataType: 'json',
        data: $('form#myForm').serialize(),
        success: function(data) {
             console.log("success");
        }
    });
});

http://jsfiddle.net/BD3Rt/

Always nice to keep html clean and separate your jquery/javascript code.

Answer 2

put ID for form and use $("#yorID").submit() and you can see the example here example

Answer 3

Try this:

HTML

<input type="button" value="Save" class="aSubmit" />

SCRIPT

$(function () {
    $(document).on('click', '.aSubmit', function () {
        $('#collectionPlanForm').submit();
    });
});

DEMO FIDDLE