Come inviare il modulo in caso di modifica dell'elenco a discesa?


293

Sto creando una pagina in JSP in cui ho un elenco a discesa e una volta che l'utente seleziona un valore deve fare clic sul pulsante Vai e quindi il valore viene inviato al Servlet.

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

Come lo faccio in modo che lo faccia al cambio? Ad esempio, quando l'utente seleziona John, tutti i suoi dettagli vengono recuperati dal DB e visualizzati. Voglio che il sistema lo faccia senza dover fare clic sul pulsante Vai.

Risposte:


662

Chiedi assistenza a JavaScript.

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

Guarda anche:


6
Molti utenti bloccano javascript, c'è un modo per farlo senza javascript?
Deweydb,

5
@deweydb: No. Altrimenti avrei risposto :) Mostra solo un <noscript>banner che l'esperienza del sito è migliore se JS è abilitato. Un'alternativa completamente diversa consiste nell'utilizzare <ul><li><input type="submit">e inserire un carico di CSS per farlo sembrare un vero elenco a discesa. Ma poi non c'è più alcun mezzo <select>.
BalusC

89
@deweydb "Molti utenti bloccano javascript ..." Citazione? Sinceramente non ho mai incontrato un utente che blocchi javascript - ho iniziato a credere che questi utenti siano un mito. Impedirebbe loro di usare metà di Internet, per prima cosa; e chiunque sia abbastanza esperto da bloccare la sceneggiatura è probabilmente consapevole di quanto sia innocuo e onnipresente.
Nathan Hornby,

7
@BalusC per favore aggiungi questo per le persone che sono preoccupate per gli utenti che non hanno abilitato javascript <noscript>This form requires that you have javascript enabled to work properly please enable javascript in your browser.</noscript> anche @NathanHornby se vuoi davvero una citazione perché non vai in una biblioteca pubblica la maggior parte del blocco javascript della biblioteca pubblica per motivi di sicurezza così come alcune scuole così non ' t tento di trasmetterlo come un mito che ha e viene fatto principalmente per motivi di sicurezza per mantenere l'integrità dei computer poiché alcuni javascript sono codici dannosi ...
Belldandu,

10
@deweydb È semplice. Basta inserire un submitpulsante nei <noscript>tag. Mostrerà solo se gli utenti usano noscript. Gli utenti che hanno abilitato JS possono semplicemente selezionare l'elemento e gli utenti con noscript faranno semplicemente clic sul pulsante di invio. :)
Aaron Esau il

81

JavaScript semplice farà -

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

Ecco un link per un buon tutorial javascript .


Grazie !, Anche sopra funziona per MVC @using (Html.BeginForm ("Actioname", "controllername", FormMethod.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>
charulatha krishnamoorthy,

11

oltre all'utilizzo this.form.submit(), invio anche per ID o nome. esempio ho forma come questa:<form action="" name="PostName" id="IdName">

  1. Per nome : <select onchange="PostName.submit()">

  2. Per ID: <select onchange="IdName.submit()">


Nessun JavaScript necessario!
MikeyE,

penso che "submit ()" sia un elemento HTML. non javascript. CMIIW
sate wedos,

Lo so, questo è ciò che intendevo con il mio commento. Stavo cercando di darti alcuni oggetti di scena. :-)
MikeyE,

Aspetta, non è davvero JavaScript?
James Haug,

10
Qualsiasi cosa scritta negli attributi * viene interpretata come Javascript. Quindi PostName.submit () è javascript.
Asif Shahzad,

9

A quelli nella risposta sopra. È sicuramente JavaScript. È solo in linea.

A proposito l'equivalente di jQuery se si desidera applicare a tutte le selezioni:

$('form select').on('change', function(){
    $(this).closest('form').submit();
});
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.