Ad

Do Something Before Form Submit

- 1 answer

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

  1. 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>).

  2. Onclick of the button, Do your Validation / fadeIn / fadeOutall you need and submit the form by javascript submit() 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
Ad