I need help with a specific script, I have a form that performs an action with the "GET" method and I need to put a delay of 200ms before the form's action is executed.
Form:
<form action="#" method="GET" autocomplete="chrome-off" enctype="text/plain" id="form_cotation">
<div >
<div >
<b>Faça Sua Cotação Gratuita</b>
</div>
<div >
<div >
<label for="destinyGroup" >Qual seu destino</label>
<select name="destinyGroup" id="destinyGroup" >
<option value="">Selecione seu destino</option>
<option value="1">Brasil</option>
<option value="2">América Latina (inclui México)</option>
<option value="4">Estados Unidos e Canadá</option>
<option value="3">Europa</option>
<option value="5">Ásia</option>
<option value="6">África</option>
<option value="7">Oceania</option>
<option value="8">Múltiplos destinos</option>
</select>
</div>
<div >
<label >Data da Viagem:</label>
<div >
<div >
<input type="text" id="departure" name="departure" value="" placeholder="Embarque" autocomplete="chrome-off" data-date-format='yyyy-mm-dd'>
</div>
</div>
<div >
<div >
<input type="text" id="arrival" name="arrival" value="" placeholder="Chegada" autocomplete="chrome-off" data-date-format='yyyy-mm-dd'>
</div>
</div>
</div>
<div >
<label for="ages" >Idade do(s) passageiro(s):</label>
<input type="text" id="ages" name="ages" value="Selecione as idades" readonly>
<div >
<div >
<div >
<div >
<div >
<label ><span
><b>0 a 40</b></span>
anos</label>
</div>
<div >
<div >
<div >
<div >
<button >-</button>
</div>
</div>
<div >
<div >
<input type="text" name="old0" value="0" readonly>
</div>
</div>
<div >
<div >
<button > </button>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<label ><span
><b>41 a 64</b></span>
anos</label>
</div>
<div >
<div >
<div >
<div >
<button >-</button>
</div>
</div>
<div >
<div >
<input type="text" name="old1" value="0" readonly>
</div>
</div>
<div >
<div >
<button > </button>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<label ><span
><b>65 a 75</b></span>
anos</label>
</div>
<div >
<div >
<div >
<div >
<button >-</button>
</div>
</div>
<div >
<div >
<input type="text" name="old2" value="0" readonly>
</div>
</div>
<div >
<div >
<button > </button>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<label ><span
><b>76 a 99</b></span>
anos</label>
</div>
<div >
<div >
<div >
<div >
<button >-</button>
</div>
</div>
<div >
<div >
<input type="text" name="old3" value="0" readonly>
</div>
</div>
<div >
<div >
<button > </button>
</div>
</div>
</div>
</div>
</div>
<div >
<a type="submit" >
<b>
Aplicar
</b>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<label for="name" >Nome:</label>
<input type="text" name="name" value="nome" id="name">
</div>
<div >
<label for="email" >E-mail:</label>
<input type="email" name="email" id="email" value="email" id="email">
</div>
<div >
<label for="phone" >Telefone:</label>
<input type="text" name="phone" id="phone" value="telefone" id="phone">
</div>
</div>
<div >
<button id="submitbtnt" type="submit">Cotar agora! ››</button>
</div>
</div>
</form>
and script
let timeToWait = 200;
let button = document.getElementById('submitbtnt');
setTimeout(() => {
button.onclick = function(e) {
e.preventDefault();
location.href ='URL-AQUI'
}
}, timeToWait);
I've tried in several ways but I'm not able to activate the delay with setTimeout()
In short, what I need is to leave a delay of 200ms before right after clicking the submit button
CodePudding user response：
to prevent form submit ion you need to run preventDefault() on the submit event
const formCotation = document.getElementById('form_cotation');
formCotation.addEventListener("submit", function(event){
event.preventDefault();
setTimeout(() => {
formCotation.submit()
}, 200);
});
CodePudding user response：
You need to add the setTimeout inside the onclick function, so the delay start right after users click the button
button.onclick = function(e) {
setTimeout(() => {
e.preventDefault();
location.href ='URL-AQUI'
}, timeToWait);
}