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

You should be binding the `SubmitForm` function to the form's `submit` event. — Blender, Jul 02 '13 at 06:24
Is there any error ? As I think its working with chrome http://jsfiddle.net/g8QVc/ and second this submit button automatically call the form submit. — pixelbyaj, Jul 02 '13 at 06:35
the submit button is outside the form.. and hence I am submitting it manually. Please see the edit in question. — Nirman, Jul 02 '13 at 06:44

score 3 · Accepted Answer · edited Jul 12 '13 at 10:39

3

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.

edited Jul 12 '13 at 10:39

GenericJon

8,746
4
39
50

answered Jul 02 '13 at 06:34

Sanath

4,774
10
51
81

this is partially working for me... that means, I am now able to submit the form.. but if the server-side validations gets failed, I have to display the same form with error messages printed on screen, otherwise want to redirect to another page. This is currently being handled in MVC code using "return View", and "return RedirectToAction(...)", respectively. – Nirman Jul 02 '13 at 07:11

score 2 · Answer 2 · answered Jul 02 '13 at 06:49

2

Try this:

HTML

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

SCRIPT

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

DEMO FIDDLE

answered Jul 02 '13 at 06:49

Olrac

1,527
2
10
22

score 1 · Answer 3 · answered Jul 02 '13 at 06:36

1

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

answered Jul 02 '13 at 06:36

Omar Shbaro

68
6

1

I have already done that. collectionPlanForm is the ID of my form only – Nirman Jul 02 '13 at 06:43
actually, submit button is outside the form in my case. – Nirman Jul 02 '13 at 06:54

JQuery submit not working in Chrome

3 Answers3

Linked