html button v.s. html submit?

Tengo un cuadro de texto de entrada y un botón de enviar búsqueda, y cuando el usuario hace clic en el botón Buscar enviar, quiero redirigir usuario a url http://testsearch/results.aspx?k=<value of text box k>, por ejemplo, si el usuario pone "StackOverflow" en el cuadro de texto y luego hace clic en el botón de búsqueda , quiero redirigir usuario a la página siguiente,html button v.s. html submit?

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

encuentro cuando el botón utilizo para el botón de búsqueda, funciona (ver más abajo códigos fuente),

<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;"/>

pero cuando uso enviar para el botón Buscar, no funciona (ver más abajo códigos de clase), ¿por qué?

<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;"/>

gracias de antemano, George

Fuente

2009-12-30 George2

Ambos ejemplos de código parecen ser iguales – naivists

No entiendo cómo funciona el caso del "botón" si no coloca ningún código en su evento onclick. ¿Es el ejemplo completo? – helios

¡Corrija mi muestra, gracias! – George2

Incluso puede utilizar el botón de envío de esta manera:

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

presentar Semánticamente botón se utiliza para enviar formularios no redirigir las páginas. Deberías usar el tipo de botón normal para esto. Sin embargo, como te mostré, puedes usar el botón de enviar también, pero eso no es semántico, creo.

La siguiente línea impide que se envíe el formulario.

return false;

Eso es lo que se echa en falta en el código :)

Gracias

Fuente

2009-12-30 10:04:32 Sarfraz

¿Por qué enviar no funciona en mi escenario? Quiero saber cómo se maneja el navegador de forma diferente al botón de control, para que el envío no funcione en mi escenario. – George2

necesita poner return falso; declaración al final del evento onlcick del botón de enviar para que no se envíe, más bien realiza la acción indicada en el evento onclick. – Sarfraz

Lo siento, olvidé agregar el evento onclick en mi código. Solo corregido. ¿Cuáles son las diferencias entre el envío y el botón en mi caso y por qué enviar no funciona? En mi código original, no hay elemento de formulario. – George2

<button>-elements y <input type="button"/> no hacen nada por defecto, a menos que usted les diga que hacer algo con Javascript.

<input type="submit"/> presentará el formulario que se encuentra.

lo tanto, si <input type="submit"/> no va a funcionar, lo tienes probablemente no en la misma <form/>-element.

Fuente

2009-12-30 10:09:28 Harmen

Para hacer que el botón de enviar funcione, tenemos que incluirlo en un formulario? – George2

Sí, ajuste los elementos '' en '

' – Harmen

<button> significa "poner un botón en la página y hacer lo que indique el evento onclick". Entonces, si no escribe un controlador onclick, la página no hace nada.

Si utiliza enviar está bien, porque quiere redirigir a otra página.

Si quieres botón para utilizar de todos modos se puede hacer de esta manera:

<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>

Advertencia: botón de enviar con onclick

Si usted tiene un botón de envío (dentro de un formulario, que es, un botón de trabajo) presentará con un evento onclick, algunos navegadores:

1) ejecutar onclick

2) execu te submit

tu onClick intenta redirigir pero el botón de enviar gana.

Si se quiere evitar que usted tiene algunas opciones:

a) el cambio botón de enviar al botón normal de

b) evitar la cosa presentar (añadir onsubmit = "return false;" para formar el elemento)

c) utilice el procedimiento de envío (form action = "..." method = "get", no onclick event), el navegador estará contento y puede controlar el envío en el evento onsubmit (puede cancelarlo) o no).

Fuente

2009-12-30 10:09:40 helios

Agregué una advertencia que es muy importante (depuré una situación similar hace algún tiempo). Creo que responde la pregunta. – helios

Además, el evento onclick de un botón de envío no se activará si el usuario envía el formulario presionando Enter en un campo de texto. – robertc

Si ese es el único campo en su formulario, simplemente configure el método del formulario para "obtener" y funcionará.

<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>

Fuente

2009-12-30 10:10:09

Lo siento, olvidé agregar el evento onclick en mi código Simplemente corregido. ¿Cuáles son las diferencias entre el envío y el botón en mi caso y por qué el envío no funciona? En mi código original, no hay ningún elemento de formulario. – George2

Si desea hacerlo con JavaScript, le sugiero que consulte @Sarfraz Respuesta de Ahmed. Pero, a menos que tenga una buena razón para usar JavaScript allí, buscaría HTML sin formato (como en mi respuesta). –

Para hacer que el botón de enviar funcione, tenemos que incluirlo en un formulario? – George2

asegurarse de que tiene la entrada de una etiqueta de formulario con un método GET:

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

Fuente

2009-12-30 10:12:35

Lo siento, olvidé agregar el evento onclick en mi código. Solo corregido. ¿Cuáles son las diferencias entre el envío y el botón en mi caso y por qué enviar no funciona? En mi caso original, no hay elemento de formulario. – George2

Si estoy entendiendo correctamente, que no está funcionando, ya que no se encuentra en una etiqueta de formulario. Si lo pones en una etiqueta de formulario con method = "get" debería funcionar. El botón funciona porque no tiene que estar en una forma.

Fuente

2009-12-30 10:12:55

Respuesta

Cuestiones relacionadas