Do something before form submit
Ad
Tried looking this up, found some answers, but they did not work for me. I have a form that I am validating, and I want something to fade in before it submits.
$('#btnConfirm').click(validateForm);
function validateForm(){
//...validation....
else{
$('#ConfirmGiftCard').submit(function(){
$('#ThankYou').fadeIn(1000).delay(1000).fadeOut(1000);
setTimeout(function(){
return true;
}, 2000)
});
}
ConfirmGiftCard is the name of my form. btnConfirm is a submit button inside it.
Ad
Answer
Ad
Make sure the your button isn't a submit button, so that it doesn't submit the form immediately on click. Make it a normal button instead (
<input type="button" />
or<button type="button"></button>
).Onclick of the button, Do your
Validation
/fadeIn
/fadeOut
all you need and submit the form by javascriptsubmit()
function when needed.
$('#btnConfirm').click(validateForm);
function validateForm(){
//...validation....
else {
$('#ThankYou').fadeIn(1000).delay(1000).fadeOut(1000,function(){
document.getElementById('ConfirmGiftCard').submit();
//$('#ConfirmGiftCard').submit(); //This also should work, but I prefer native JS submit function because its more reliable.
//$('#ConfirmGiftCard')[0].submit(); //Or even this works, which calls the same native JS method I used above (first one).
});
}
Ad
source: stackoverflow.com
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad