ajax form submit using jquery dialog - asp.net-mvc

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??

Answer 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) ?