it-swarm.it

Come posso ascoltare l'evento di invio modulo in javascript?

Voglio scrivere la mia libreria javascript di convalida del modulo e ho cercato su Google come rilevare se si fa clic su un pulsante di invio, ma tutto quello che ho trovato è il codice in cui devi usare onClicca su onSubmit="function()" in html.

Vorrei creare questo javascript in modo da non dover toccare alcun codice html come aggiungere onSubmit o onClick javascript.

107
ed1t

Vedi risposta di Derek , che ora dovrebbe essere la risposta accettata. Include tutto ciò che questa risposta aveva incluso e altro ancora.

(Ho provato a eliminare questa risposta dopo che Derek ha aggiornato il suo per includere esempi di libreria, ma con il segno di spunta verde, SO non me lo permette)

13
Ben Lee

Perché le persone usano sempre jQuery quando non è necessario?
Perché le persone non possono semplicemente usare JavaScript semplice?

var ele = /*Your Form Element*/;
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);            //Old IE
}

callbackNAME _ è una funzione che si desidera chiamare quando viene inviato il modulo.

Informazioni su EventTarget.addEventListener, controlla questa documentazione su MDN .

Per annullare l'evento submitnativo (impedire l'invio del modulo), utilizzare .preventDefault() nella funzione di callback,

document.querySelector("#myForm").addEventListener("submit", function(e){
    if(!isValid){
        e.preventDefault();    //stop form from submitting
    }
});

Ascolto dell'evento submitcon le librerie

Se per qualche motivo hai deciso che è necessaria una libreria (ne stai già utilizzando una o non vuoi affrontare problemi tra browser), ecco un elenco di modi per ascoltare l'evento di invio nelle librerie comuni:

  1. jQuery

    $(ele).submit(callback);
    

    Dove eleè il riferimento dell'elemento del modulo e callbackè il riferimento della funzione di callback. riferimento

    <iframe width="100%" height="100%" src="http://jsfiddle.net/DerekL/wnbo1hq0/show" frameborder="0"></iframe>
  1. AngularJS (1.x)

    <form ng-submit="callback()">
    
    $scope.callback = function(){ /*...*/ };
    

    Molto semplice, dove $scope è l'ambito fornito dal framework all'interno di controller . riferimento

  2. React

    <form onSubmit={this.handleSubmit}>
    
    class YourComponent extends Component {
        // stuff
    
        handleSubmit(event) {
            // do whatever you need here
    
            // if you need to stop the submit event and 
            // perform/dispatch your own actions
            event.preventDefault();
        }
    
        // more stuff
    }
    

    Passa semplicemente un gestore al prop onSubmitname__. riferimento

  3. Altri framework/librerie

    Fare riferimento alla documentazione del proprio framework.


Validazione

Puoi sempre eseguire la convalida in JavaScript, ma con HTML5 abbiamo anche la convalida nativa.

<!-- Must be a 5 digit number -->
<input type="number" required pattern="\d{5}">

Non hai nemmeno bisogno di JavaScript! Ogni volta che la convalida nativa non è supportata, è possibile eseguire il fallback a un validatore JavaScript.

Demo: http://jsfiddle.net/DerekL/L23wmo1L/

446

Questo è il modo più semplice per chiamare la tua funzione javascript quando si verifica un onSubmit.

HTML

<form>
    <input type="text" name="name">
    <input type="submit" name="submit">
</form>

JavaScript

window.onload = function() {
    var form = document.querySelector("form");
    form.onsubmit = submitted.bind(form);
}

function submitted(event) {
    event.preventDefault();
}
6
Derek Dawson

In base alle tue esigenze puoi anche fare quanto segue senza librerie come jQuery:

Aggiungi questo alla tua testa:

window.onload = function () {
    document.getElementById("frmSubmit").onsubmit = function onSubmit(form) {
        var isValid = true;
        //validate your elems here
        isValid = false;

        if (!isValid) {
            alert("Please check your fields!");
            return false;
        }
        else {
            //you are good to go
            return true;
        }
    }
}

E il tuo modulo potrebbe ancora assomigliare a:

    <form id="frmSubmit" action="/Submit">
        <input type="submit" value="Submit" />
    </form>
2
HEDWIN