¿Cómo enviar el formulario sobre el cambio de la lista desplegable?

293

Estoy creando una página en JSP donde tengo una lista desplegable y una vez que el usuario selecciona un valor, debe hacer clic en el botón Ir y luego el valor se envía al Servlet.

            </select>
            <input type="submit" name="GO" value="Go"/>

¿Cómo lo hago para que lo haga al cambiar? Por ejemplo, cuando el usuario selecciona a John, todos sus detalles se recuperan de la base de datos y se muestran. Quiero que el sistema lo haga sin tener que hacer clic en el botón Ir.

Juan
fuente

Respuestas:

662

Solo solicite ayuda de JavaScript.

<select onchange="this.form.submit()">
    ...
</select>

Ver también:

BalusC
fuente
66
Muchos usuarios bloquean JavaScript, ¿hay alguna manera de hacerlo sin JavaScript?
deweydb
55
@deweydb: No. De lo contrario, lo habría respondido :) Solo muestre un <noscript>banner que la experiencia del sitio es mejor si JS está habilitado. Una alternativa completamente diferente es usar <ul><li><input type="submit">y tirar una carga de CSS para que parezca una verdadera lista desplegable. Pero entonces ya no hay forma de <select>hacerlo.
BalusC
89
@deweydb "Muchos usuarios bloquean javascript ..." ¿Cita? Honestamente, nunca me encontré con un usuario que bloquee JavaScript: comencé a creer que estos usuarios son un mito. Les evitaría usar la mitad de Internet, por un lado; y cualquier persona lo suficientemente inteligente como para bloquear el script probablemente sea consciente de lo inocuo y ubicuo que es.
Nathan Hornby
77
@BalusC agregue esto para las personas que están preocupadas por los usuarios que no tienen habilitado JavaScript <noscript>This form requires that you have javascript enabled to work properly please enable javascript in your browser.</noscript> también @NathanHornby si realmente desea una cita, ¿por qué no va a una biblioteca pública? t trate de pasarlo por un mito que tiene y se está haciendo principalmente por razones de seguridad para mantener la integridad de las computadoras, ya que algunos javascript son códigos maliciosos ...
Belldandu
10
@deweydb Es simple. Simplemente ponga un submitbotón en las <noscript>etiquetas. Solo se mostrará si los usuarios usan noscript. Los usuarios que tienen JS habilitado pueden simplemente seleccionar el elemento, y los usuarios con noscript simplemente harán clic en el botón Enviar. :)
Aaron Esau
81

JavaScript simple hará -

<form action="myservlet.do" method="POST">
    <select name="myselect" id="myselect" onchange="this.form.submit()">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
    </select>
</form>

Aquí hay un enlace para un buen tutorial de JavaScript .

MD Sayem Ahmed
fuente
¡Gracias! La anterior también funciona para MVC @using (Html.BeginForm ("Actioname", "controllername", FormMethod.Post)) <select name = "myselect" id = "myselect" onchange = "this.form.submit () "> <option value =" 1 "> Uno </option> <option value =" 2 "> Dos </option> <option value =" 3 "> Tres </option> <option value =" 4 " > Cuatro </option> </select>
charulatha krishnamoorthy
11

aparte de usarlo this.form.submit(), también envía por identificación o nombre. ejemplo tengo forma como esta:<form action="" name="PostName" id="IdName">

  1. Por nombre : <select onchange="PostName.submit()">

  2. Por id: <select onchange="IdName.submit()">

sate wedos
fuente
¡No se necesita JavaScript!
MikeyE
Creo que 'submit ()' es un elemento HTML. no javascript. CMIIW
sate wedos
Lo sé, eso es lo que quise decir con mi comentario. Estaba tratando de darte algunos accesorios. :-)
MikeyE
Espera, ¿en serio no es JavaScript?
James Haug
10
Todo lo escrito en los atributos * se interpreta como Javascript. Entonces PostName.submit () es javascript.
Asif Shahzad
9

Para aquellos en la respuesta anterior. Definitivamente es JavaScript. Es solo en línea.

Por cierto el equivalente de jQuery si desea aplicar a todas las selecciones:

$('form select').on('change', function(){
    $(this).closest('form').submit();
});
nitsram
fuente