Use fancybox to allow/prevent form submission - asp.net-mvc-3

Question

Below is the jQuery I'm using to try and prevent/allow a form to be submitted once the user clicks the submit button. The idea will be to present a fancybox modal dialog window with the data the user entered for review. If they ,like, they click Looks Good! and the form is submitted back to the ASP MVC3 controller. If not, since the e.preventDefault method has already been called the modal window closes and they can re-enter the data.
The problem is, obviously as I have this written now, if the user is happy with the data they've entered, the whole thing will go into an infinite loop since I'm the Look's Good! button calls the method that displayed it in the first place.
Is there a way to create a "standalone" method inside the submit() function so I would have access to the event object and, if not, what would be a better way (i.e. actually works) to allow the form to submit after clicking the Look's Good! button?
//Form submit functions
$('form').submit(function (e) {
e.preventDefault();
if ($('#AccountNumber').val() != $('#doubleaccount').val()) {
alert("Please re-enter the correct account number!");
} else {
var display = "<h1>Test</h1>" +
"<input type='button' value='Looks Good!' onclick='submit()'/>" +
"<input type='button' value='Try Again...' onclick='cancel()'/>";
$.fancybox(display, {
// fancybox API options
fitToView: false,
autoScale: true,
autoDimension: true,
closeClick: true,
openEffect: 'fade',
closeEffect: 'fade',
closeBtn: true,
openSpeed: 'fast',
closeSpeed: 'fast'
});
}
});
});//End doc.ready()
function submit() {
$('form').submit();
}
function cancel() {
$.fancybox.close();
}

Answer 1

Since you are preventing default, then you may need to submit the form via ajax to avoid the loop. I think this would do the trick :
function submitForm(){
jQuery.ajax({
cache: false,
type: "POST",
url: "process.asp", // your controller
data: jQuery("#myForm").serialize(), // serialize form with id="myForm"
success: function(data){
jQuery.fancybox("form successfully submitted"); // confirmation message
jQuery('#myForm')[0].reset(); // clear form fields
}
});
}
jQuery(function($) {
$("#myForm").on("submit", function(e){
e.preventDefault();
if ($('#AccountNumber').val() != $('#doubleaccount').val()) {
// validation : something went wrong
alert("Please re-enter the correct account number!");
} else {
var display = "<h1>Test</h1>" +
"<input id='submit' type='button' value='Looks Good!'/>" +
"<input id='cancel' type='button' value='Try Again...'/>";
$.fancybox(display,{
// other API options
afterShow: function(){
$("#submit, #cancel").on("click", function(event){
if( $(event.target).is("#submit") ){
submitForm();
}
$.fancybox.close();
});
}
}); // fancybox
}
}); // on submit
}); // ready
Notice that I added IDs to the form as well as the buttons to submit or cancel so I can bind events to all those selectors. Also notice that I used the afterShow callback to bind the click events in my buttons inside fancybox.
Useful to read : Ajax serialize docs
NOTE : .on() requires jQuery v1.7+
EDIT : you could actually replace this line in your validation conditional
alert("Please re-enter the correct account number!");
by this one :
$.fancybox("Please re-enter the correct account number!");
so everything will look more consistent ;)