hold submit for modal dialog confirmation in mvc 5 - asp.net-mvc

Question

I'm trying to display a modal dialog when data is submitted on my create view. I need the modal to force the submit to wait for user confirmation on the modal dialog. Then the data needs to be submitted. Below is my create view code using bootstrap 3.0 modal-dialog:
<div class="form-group">
#Html.LabelFor(model => model.Name, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="col-md-offset-2 col-md-10">
<input id="create" type="submit" value="Create" class="btn btn-default"/>
</div>
</div>
<div id="modalBox" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">X</a>
<h1>Confirmation</h1>
</div>
<div class="modal-body">
<h6>Click YES to confirm</h6>
</div>
<div class="modal-footer">
<button id="noPost" class="btn btn-default" name="postConfirm" value="false" data-dismiss="modal">No Thanks</button>
<button id="yesPost" class="btn btn-primary" name="postConfirm" value="true" data-dismiss="modal">YES</button>
</div>
</div>
</div>
#section scripts{
<scripts>
$(function () {
var modalBox = function (e) {
e.preventDefault();
$("#modalBox").modal({ show: true });
};
$("#create").click(modalBox);
});
<scripts>
}
This does interrupt the submit function and brings up the modal dialog but I don't know how to submit the data back to the controller once a selection is made on the dialog. I have also tried using the jquery ui modal dialog with the script below:
<script>
$("#create").click(function (e) {
e.preventDefault();
$("#postModal").dialog("open");
});
$("#postModal").dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: {
"No Thanks": function (data) {
$("#create").submit();
$(this).dialog("close");
},
"YES": function () {
$("#create").submit();
$(this).dialog("close");
}
}
});
</script>
This does bring up the modal dialog but I still can't get it to submit the model data back to the controller. Any help would be appreciated.
UPDATE
By inspecting the produced html I discovered my input fields resided within a form that I didn't put there. I suspect this is due to me using the #Html.ValidationSummary(true) or something built into MVC. So instead of using:
$("#create").submit();
I used:
$("form:first").submit();
To submit the first, and only form, on the page and it worked!

Answer 1

Change your create button type to type=button, and make it to just open modal view. And make your yespost button in modal div holder to type submit . Also you can try to put whole modal div holder inside your form-group div. Here you are making post before openning modal view. It s because your button have 2 logic task, separate those task and this should work.