Attendez 3 secondes avant que le formulaire ne soit soumis | JavaScript

Question

J'ai ce morceau de code ici:

function checkAmount() 
{ 
    var PayField = document.getElementById('paymentamount'); 
    var Pound = document.getElementById('pound'); 

    if (PayField.value == "") 
    { 
     PayField.style.border = '1px #F00 solid'; 
     Pound.style.color = '#F00'; 
     alert('You need to enter an amount that you wish to donate'); 

     return false; 
    } 
    return true; 
} 

Lorsqu'un utilisateur tape une quantité valide et clique sur le bouton de paiement, le formulaire doit attendre 3 secondes puis soumet après avoir attendu 3 secondes.

J'ai essayé d'utiliser setTimeout() avec, mais cela ne fonctionne pas du tout. Je ne veux pas utiliser jQuery avec ceci, pouvez-vous me fournir un code comment le faire.

Cheers.

Answer 1

Ajouter un ID à votre formulaire:

<form id="whatever"> 

Puis, dans votre JavaScript:

var waited = false; 
function checkAmount() 
{ 
    var PayField = document.getElementById('paymentamount'); 
    var Pound = document.getElementById('pound'); 

    if (PayField.value == "") 
    { 
     PayField.style.border = '1px #F00 solid'; 
     Pound.style.color = '#F00'; 
     alert('You need to enter an amount that you wish to donate'); 

     return false; 
    } 
    if (waited) 
    { 
     return true; 
    } 
    waited = true; 
    setTimeout(function() { document.getElementById('whatever').submit() }, 3000); 
    return false; 
} 

Answer 2

démonstration de travail: http://jsbin.com/ifola4/2

Disons que votre formulaire a id 'donationForm'

<form id='donationForm' onsubmit='return checkAmount();'> 

---

function checkAmount() 
    { 
     if(checkAmount.validated) 
     return true; 

     checkAmount.validated = false; //we will assign the property to the function itself. 
     var PayField = document.getElementById('paymentamount'); 
     var Pound = document.getElementById('pound'); 

     if (PayField.value == "") 
     { 
      PayField.style.border = '1px #F00 solid'; 
      Pound.style.color = '#F00'; 
      alert('You need to enter an amount that you wish to donate'); 

      return false; 
     } 

     setTimeout(function() 
      { 
      checkAmount.validated = true; 
         document.getElementById('donationForm').submit(); 
        }, 3000); 
     return false; 
    }