Form still submitting after preventDefault?

Question

I am loading a from dynamically onto the page, I then setup the event to capture and handle the form submit.

But for whatever reason the form, still does the usual post and goes to the page instead of the ajax post.

I'm pretty sure its all correct but can't figure out why?

I load the form dynamically like this:

$('body').on('click', 'a[data-toggle="modal"]', function (e) {
    var action = $(this).attr('href');

    $.ajax({
        url: action,
        type: "GET",
        success: function (response) {
            $('<div class="modal fade"></div>').html(response).modal();
            hookupFormSubmit();
        }
    });

    e.preventDefault();
});

hookupFormSubmit looks like this:

var hookupFormSubmit = function () {

    $('.modal-dialog').on('submit', 'form', function (event) {
        event.preventDefault();

        var $form = $(this);

        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize(),

            success: function(data, status) {

                $form.closest('.modal').modal('hide');

            }
        });

    });
};

And my form itself:

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
            @using (Html.BeginForm())
            {
                @Html.ValidationSummary(true)
                @Html.EditorForModel()
                <p>
                    <input type="submit" value="Send Message!" />
                </p>
            }
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

Put a 'return false;' statement on your submission handler function and see... — Siva, May 26 '14 at 05:07
Does the form also get submitted via ajax? And do you have an actual form in the dialog? `
........
` ... I can see one the submit button and two buttons but I don't see `` or ``. — PeterKA, May 26 '14 at 05:20
@WereWolf-TheAlpha no, everything is added via jquery to the dom. — shenku, May 26 '14 at 05:49

score 1 · Answer 1 · answered May 26 '14 at 05:58

1

replace

$('.modal-dialog').on('submit', 'form', function (event) {

with

$('.modal').on('submit', 'form', function (event) {

answered May 26 '14 at 05:58

Jeetendra Chauhan

1,977
2
15
21

score 0 · Answer 2 · answered May 26 '14 at 05:02

0

i guess you set form runat="server" thats why form is submitting every time. i suggest if not runat="server" is not required. remove this attribute from Form tag

answered May 26 '14 at 05:02

Harjeet Singh

388
2
6
22

score 0 · Accepted Answer · answered May 26 '14 at 05:36

0

When you create the dialog, you're not inserting the html into the DOM.

answered May 26 '14 at 05:36

Maurice Perry

32,610
9
70
97

I think you may be corrent, let me check. – shenku May 26 '14 at 05:51

Form still submitting after preventDefault?

3 Answers3