pulsante html v.s. invio html?

Ho una casella di testo di input e un pulsante di invio di ricerca, e quando l'utente fa clic sul pulsante Cerca di invio, desidero reindirizzare l'utente all'url http://testsearch/results.aspx?k=<value of text box k>, ad esempio, se l'utente inserisce "StackOverflow" nella casella di testo e fa clic sul pulsante di ricerca , voglio reindirizzare utente alla pagina seguente,pulsante html v.s. invio html?

http://testsearch/results.aspx?k=StackOverflow

trovo quando il tasto che uso per pulsante di ricerca, funziona (vedi sotto codici sorgente),

<input type="text" id="k" name="k" /> 
    <input type="button" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>

ma quando uso invia per il pulsante Cerca, non funziona (vedi sotto s codici ource), perché?

<input type="text" id="k" name="k" /> 
<input type="submit" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>

grazie in anticipo, George

fonte

2009-12-30 George2

entrambi gli esempi di codice sembrano uguali – naivists

Non capisco come funziona il caso "pulsante" se non si inserisce alcun codice nel proprio evento onclick. È l'esempio completo? – helios

Correggere il mio campione, grazie! – George2

È anche possibile utilizzare il pulsante di invio in questo modo:

<input type="submit" id="Go" value="Search" onclick="document.location='http://testsearch/results.aspx?k=StackOverflow'; return false;" />

semanticamente presentare pulsante viene utilizzato per inviare moduli non reindirizzare pagine. Dovresti usare il normale tipo di pulsante per questo. Comunque, come ho dimostrato, puoi usare anche il pulsante di invio, ma non è semantico, penso.

La riga sottostante impedisce di inviare il modulo.

return false;

questo è ciò che vi manca nel codice :)

Grazie

fonte

2009-12-30 10:04:32 Sarfraz

Perché l'invio non funziona nel mio scenario? Voglio sapere in che modo il browser gestisce l'invio in modo diverso dal pulsante delle maniglie, in modo che l'invio non funzioni nel mio scenario? – George2

è necessario inserire return false; dichiarazione alla fine dell'evento onlcick del pulsante di invio in modo che non venga inoltrata, piuttosto esegue l'azione indicata nell'evento onclick. – Sarfraz

Scusa, ho dimenticato di aggiungere l'evento onclick nel mio codice. Appena corretto Quali sono le differenze tra submit e button nel mio caso e perché submit non funziona? Nel mio codice originale, non esiste un elemento Form. – George2

<button>-elements e <input type="button"/> non fare nulla per impostazione predefinita, a meno che non gli si dice di fare qualcosa con Javascript.

<input type="submit"/> sarà inviare il modulo è in.

Quindi, se <input type="submit"/> non funziona, avete capito bene, probabilmente non nel <form/>-element stesso.

fonte

2009-12-30 10:09:28 Harmen

Spiacente, ho dimenticato di aggiungere l'evento onclick nel mio codice. Appena corretto Quali sono le differenze tra submit e button nel mio caso e perché submit non funziona? Nel mio codice originale, non esiste un elemento Form. – George2

Per far funzionare il pulsante di invio, dobbiamo includerlo in un modulo? – George2

Sì, racchiude gli elementi '' 'in'

' – Harmen

<button> significa "inserire un pulsante nella pagina e fare ciò che dice l'evento onclick". Quindi se non scrivi un gestore onclick la pagina non fa nulla.

Se si utilizza l'invio è ok, perché si desidera reindirizzare a un'altra pagina.

Se si desidera pulsante da utilizzare in ogni caso si può fare in questo modo:

<script> 
function doTheSearch() { 
    // do the submit mannually 
    document.getElementById('myForm').submit(); 
} 
</script> 
<form id="myForm" action="results.aspx"> 
<input type="text" id="k" name="k" /> 
    <input type="button" id="Go" value="Search" onclick="doTheSearch();" /> 
</form>

Attenzione: pulsante di invio con onclick

Se si dispone di un pulsante di invio (all'interno di un modulo, è, un lavoro bottone) presentare con un evento onclick, alcuni browser:

1) eseguire onclick

2) execu te invia

il tuo onclick prova a reindirizzare ma il pulsante di invio vince.

Se si vuole evitare che avete alcune opzioni:

a) modifica pulsante Invia per normale pulsante

b) evitare la cosa presentare (aggiungere onsubmit = "return false;" per formare elemento)

c) utilizzare la procedura di invio (modulo action = "..." method = "get", nessun evento onclick), il browser sarà felice e sarà possibile controllare l'invio nell'evento onsubmit (è possibile annullarlo o no).

fonte

2009-12-30 10:09:40 helios

Spiacente, ho dimenticato di aggiungere evento onclick nel mio codice. Appena corretto Quali sono le differenze tra submit e button nel mio caso e perché submit non funziona? Nel mio codice originale, non esiste un elemento Form. – George2

Ho aggiunto un avviso molto importante (ho eseguito il debug di una situazione simile qualche tempo fa). Penso che risponda alla domanda. – helios

Anche l'evento onclick di un pulsante di invio non viene generato se l'utente invia il modulo premendo enter in un campo di testo. – robertc

Se questo è l'unico campo nel modulo, è sufficiente impostare il metodo del modulo per "ottenere" e funzionerà.

<html> 
<body> 
    <form action="http://localhost/mytest" method="get" > 
     <input type="text" id="k" name="k" /> 
     <input type="submit" id="Go" value="Search" /> 
    </form> 
</body> 
</html>

fonte

2009-12-30 10:10:09

Scusa, ho dimenticato di aggiungere onclick evento nel mio codice Solo corretto: quali sono le differenze tra submit e button nel mio caso e perché submit non funziona? Nel mio codice originale, non c'è nessun elemento Form. – George2

Se vuoi farlo con JavaScript ti suggerisco di guardare @Sarfraz Risposta di Ahmed Ma, a meno che tu non abbia una buona ragione per usare JavaScript, andrei per un semplice HTML (come nella mia risposta) –

Per far funzionare il pulsante di invio, dobbiamo includerlo in un modulo? – George2

assicurarti di aver ottenuto l'ingresso di in un tag form con un metodo GET:

<form action='http://testsearch/results.aspx' method='GET'> 
    ... inputs 
</form>

fonte

2009-12-30 10:12:35

Spiacente, ho dimenticato di aggiungere evento onclick nel mio codice. Appena corretto Quali sono le differenze tra submit e button nel mio caso e perché submit non funziona? Nel mio caso originale, non esiste un elemento di forma. – George2

Se ho la comprensione correttamente, non funziona perché non è in un tag form. Se lo metti in un tag form con method = "get" dovrebbe funzionare. Il pulsante funziona perché non deve essere in una forma.

fonte

2009-12-30 10:12:55

Scusa, ho dimenticato di aggiungere evento onclick nel mio codice. Appena corretto Quali sono le differenze tra submit e button nel mio caso e perché submit non funziona? Nel mio codice originale, non esiste un elemento Form. – George2

pulsante html v.s. invio html?

risposta

Problemi correlati