Monday, 19 August 2013

Use fancybox to allow/prevent form submission

Use fancybox to allow/prevent form submission

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();
}

No comments:

Post a Comment