Stavo facendo una pagina di modifica account e per motivi estetici avrei voluto nascondere l'input submit, per poi simularci un click col metodo .click()
Senza alcuno style applicato, usando btn.click() funziona tutto correttamente, ma se aggiungo (per renderlo invisibile) metto al bottone
btn {
position: absolute;
left: -9999px;
}
Facendo .click() non funziona più.
C'è un modo alternativo per nascondere un elemento e riuscire ad interagirci, o va bene questo ma sbaglio qualcosa?
Ci sono vari pezzi di codice richiesti per il template lato backend, che sono corretti e possono essere ignorati
Form html:
<form method="post" enctype="multipart/form-data" class="form">
<input type="text" name="username" value="{{ user.username | title}}" title="Username" id="username">
<input type="email" value="{{ user.email }}" title="Email" id="email">
<h3 id="btn_modifica" title="Modifica le tue informazioni">Modifica</h3> // Finto bottone da cui far partire il .click()
<input type="submit" value="invia" style="position: absolute; left: -9999px" id="btn_sub"> //Bottone nascosto
</form>
Lato javascript:
let btn_sub = document.getElementById ('btn_sub')
let btn_modifica = document.getElementById ('btn_modifica')
btn_modifica.addEventListener ('click', enable)
function enable () {
btn_modifica.textContent = 'Conferma'
btn_modifica.removeEventListener ('click', enable)
btn_modifica.addEventListener ('click', disable)
}
function disable () {
btn_modifica.textContent = 'Modifica'
btn_modifica.removeEventListener ('click', disable)
btn_modifica.addEventListener ('click', enable)
if (confirm ('Confermare?')) btn_sub.click();
}