ajax form submit using jquery dialog

Question

I want to show a confirmation dialog and if user press 'continue', the form will be submit.

This is the jquery code:

$(document).ready(function () {
    $('#submit').click(function () {

        $('#confirmation-dialog').dialog('open');
        return false; // prevents the default behaviour
    });
    $('#confirmation-dialog').dialog({
        autoOpen: false, width: 400, resizable: false, modal: true, //Dialog options
        buttons: {
            "Continue": function () {
                $(this).dialog('close');
                var form = $('transferForm', this);
                $(form).submit();
                    return true;
                    },

            "Cancel": function () {
                $(this).dialog("close");
                return false;
            }
        }
    });
});

And this is the form:

@using (Ajax.BeginForm("Transfer", "Location", null, new AjaxOptions
{
    UpdateTargetId = "update-message",
    InsertionMode = InsertionMode.Replace,
    HttpMethod = "POST",
    //OnBegin = "ajaxValidate",
    OnSuccess = "updateSuccess"

}, new { @id = "transferForm" }))
{

<div style="width:600px;">
<div class="editorLabel">
    @Html.LabelFor(m => m.FromEmail)
</div>
<div class="editorText">
    @Html.TextBoxFor(m => m.FromEmail)
</div>
<div class="clear"></div>
<div class="editorLabel">
    @Html.LabelFor(m => m.ToEmail)
</div>
<div class="editorText">
    @Html.TextBoxFor(m => m.ToEmail)
</div>
<div class="clear"></div>
<p>
    <input type="submit" name="submit" value="Transfer" class="btn" id="submit"/>
</p>
</div>
}
<div id="update-message"></div>
<div id="commonMessage"></div>
<div id="confirmation-dialog">
<p>Are you sure you want to proceed with transfer ?

</p>
</div>

But after the confirmation, the form is not submitted. What could be wrong here?? any ideas??

are you using a wrong jquery selector - var form = $('transferForm', this); Shouldn't it be var form = $('#transferForm', this); — aravind
– aravind, Commented Aug 24, 2012 at 12:51

adeneo · Accepted Answer · 2012-08-24 12:52:10Z

1

Try changing this:

var form = $('transferForm', this);
$(form).submit();

to:

$("#IDofForm").submit();

as this inside the dialogs event handlers probably does'nt refer to what you think it does, and you probably don't have an element with a transferForm tagname (which is what you're targeting when not using # or . in front of the selector) ?

answered Aug 24, 2012 at 12:52

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Reza.Hoque Over a year ago

yes u are right. 'this' thing doesn't work here. $("#IDofForm").submit();--this works. thanks.

Collectives™ on Stack Overflow

ajax form submit using jquery dialog

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related