Determina quale elemento ha inviato un modulo dall'interno di onsubmit

Esiste un modo per determinare quale elemento ha inviato un modulo da un gestore onsubmit? Cercando di scrivere un gestore generico che sappia quale elemento è stato cliccato. Ad esempio, dato il seguente modulo:Determina quale elemento ha inviato un modulo dall'interno di onsubmit

<form onsubmit="onSubmitHandler"> 
    <input type="submit" name="submit1" /> 
    <input type="submit" name="submit2" /> 
</form>

Come è possibile determinare all'interno del onSubmitHandler quale pulsante di invio è stato fatto clic? Ho provato event.target/event.srcElement, ma questo fornisce il modulo, non il pulsante di invio effettivo.

Aggiornamento: Sto scrivendo un controllo generico qui, quindi non ha idea di cosa ci sia nel modulo. La soluzione deve funzionare senza conoscere e modificare l'html del modulo. Il mio fallback è camminare sul DOM per trovare tutti i pulsanti che potrebbero causare un invio, ma vorrei evitarlo.

fonte

2009-02-12 Chris Hynes

Non è garantito che tutti i pulsanti di invio siano stati selezionati. Per esempio. L'invio da parte di JS (form.submit()) non comporterà alcun valore di pulsanti incluso nel post back –

Anche questo va bene. Un po 'più di background sul problema: questo è per un componente AJAX.Sto cancellando il primo invio, facendo le mie cose, e poi ho bisogno di rieseguire il primo invio come è successo, con tutti i valori di forma corretti. Per quanto sono stato in grado di determinare, l'unico modo per farlo è quello di camminare sul DOM e aggiungere i gestori di clic a tutto ciò che potrebbe causare un invio, e quindi salvarlo. Si supponga che l'ultima cosa che è stata selezionata sia la cosa che ha inviato il modulo, quindi chiamare .click() su di esso quando è necessario inviare nuovamente il modulo. –

Una soluzione alternativa potrebbe essere quella di spostare il trigger dell'evento dall'evento inviare il modulo, per evento onclick dell'elemento presentare, come ad esempio:

<form name='form1'> 
    <input type="submit" name="submit1" onclick="onSubmitHandler"/> 
    <input type="submit" name="submit2" onclick="onSubmitHandler"/> 
</form>

Nella funzione di gestione è possibile determinare l'elemento Sottoporre semplicemente ispezionando il nome del target dell'evento e se è necessario accedere alle informazioni del modulo o ad altri elementi, è possibile ottenere questo dall'attributo "form" degli elementi di invio.

fonte

2009-02-12 16:18:50

Oltre a questi, è necessario un gestore onsubmit, poiché è possibile che un evento di invio avvenga senza che venga premuto un pulsante. La specifica lascia semiaperta la domanda su quale pulsante (se presente) viene attivato premendo Invio mentre è focalizzato su un controllo non pulsante e i browser non sono coerenti (anche se dai miei esperimenti sembra che sia il primo pulsante del modulo o del tutto assente). – Stewart

Non utilizzare un tipo di pulsante di invio standard.

rendere la funzione presentare prendere un argomento aggiuntivo che rappresenta l'elemento che lo ha presentato, e il pulsante avrebbe un onclick che trasmette this come parametro:

<input type="button" onclick="submitHandler(this)">

fonte

2009-02-12 16:45:13 hasen

Ciò interromperà inutilmente il pulsante quando JavaScript non è disponibile. – bobince

Il pulsante funzionerà ancora senza js, ma l'unico metodo per determinare se il pulsante effettivamente premuto è quello del server. Puoi farlo dando un valore al pulsante, a proposito. – KooiInc

Questo deve essere tutto il lato client. In questo caso non mi interessa il server. Deve anche essere generico - non ho accesso alla pagina html. –

mio fallback è a piedi il DOM per trova tutti i pulsanti che potrebbero causare un invio, ma vorrei evitarlo.

... e aggiungere gli ascoltatori dei clic per memorizzare l'ultimo pulsante cliccato che viene letto dall'ascoltatore di invio, giusto?

Non riesco a pensare a nessun altro modo, mi dispiace.

fonte

2009-02-12 16:54:33 bobince

Sì, esattamente. È fragile perché se qualcos'altro nella pagina aggiunge un pulsante di invio dopo averlo agganciato si romperà. Ma quella sembra essere l'opzione migliore, sfortunatamente. –

O dovrei dire solo l'opzione. –

Questa soluzione funziona in Firefox. Non l'ho controllato in altri browser compatibili o in IE.
Non sono troppo fiducioso per IE, dovresti esaminarlo e pubblicare i risultati.

<form id="myForm"> 
    <input type="submit"> 
    <input type="submit"> 
</form>

document.getElementById('myForm').addEventListener('submit', function(e){ 
    e.preventDefault(); 
    e.explicitOriginalTarget.style.background = 'red'; 
}, false);

fonte

2009-02-12 17:04:01 meouw

È piuttosto carino, ma sembra un no sul crossbrowser: http://stackoverflow.com/questions/179826/crossbrowser-equivalent-of-explicitoriginaltarget-event-parameter, e sfortunatamente questo ha bisogno di gestire i grandi 4 browser, così che uno è fuori. –

eventi Click bolla, quindi si può solo aggiungere un "onclick" ascoltatore alla forma stessa, che controlla se l'origine click destinazione è un pulsante di invio; In tal caso, memorizzare un riferimento ad esso in qualche luogo associato al modulo a cui è possibile accedere dal gestore onsubmit.

Se si desidera gestire correttamente anche i moduli "Invio", ascoltare l'evento "onkeypress" o "onkeydown" del modulo, selezionare "Invio" e cancellare le informazioni sul pulsante di invio se l'obiettivo dell'evento è ISN " T un pulsante di invio.

fonte

2013-05-11 18:37:42 Doin

Determina quale elemento ha inviato un modulo dall'interno di onsubmit

risposta

Problemi correlati