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

Respuestas:


662

Solo solicite ayuda de JavaScript.

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

Ver también:


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 .


¡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()">


¡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();
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.