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);
});
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);
}
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 class="row">
<div class="text-center text-secondary h2 mb-3">
<b>Faça Sua Cotação Gratuita</b>
</div>
<div class="col-lg-6 ">
<div class="mb-3">
<label for="destinyGroup" class="form-label">Qual seu destino</label>
<select name="destinyGroup" id="destinyGroup" class="form-control ">
<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 class="row">
<label class="form-label">Data da Viagem:</label>
<div class="col-lg-6 ">
<div class="mb-3">
<input type="text" class="form-control " id="departure" name="departure" value="" placeholder="Embarque" autocomplete="chrome-off" data-date-format='yyyy-mm-dd'>
</div>
</div>
<div class="col-lg-6 ">
<div class="mb-3">
<input type="text" class="form-control " id="arrival" name="arrival" value="" placeholder="Chegada" autocomplete="chrome-off" data-date-format='yyyy-mm-dd'>
</div>
</div>
</div>
<div class="mb-3 relative">
<label for="ages" class="form-label">Idade do(s) passageiro(s):</label>
<input type="text" class="form-control " id="ages" name="ages" value="Selecione as idades" readonly>
<div class="w-100 selectAges">
<div class="card">
<div class="card-body ">
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>0 a 40</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old0" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>41 a 64</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old1" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>65 a 75</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old2" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>76 a 99</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old3" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<a type="submit" class="btn btn-warning btn-aplicar text-white save">
<b>
Aplicar
</b>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 ">
<div class="mb-3">
<label for="name" class="form-label">Nome:</label>
<input type="text" class="form-control " name="name" value="nome" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">E-mail:</label>
<input type="email" name="email" class="form-control " id="email" value="email" id="email">
</div>
<div class="mb-3">
<label for="phone" class=" form-label">Telefone:</label>
<input type="text" name="phone" class="phone form-control " id="phone" value="telefone" id="phone">
</div>
</div>
<div class="col-lg-12 mt-3 mb-3 order-3">
<button class="btn w-100 btn-cotation" 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
put setTimeout inside your button click function
Thank you, I did as you indicated and it worked here.