371

I am creating a page in JSP where I have a dropdown list and once the user selects a value he has to click on the go button and then the value is sent to the Servlet.

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

How do I make it so that it does it on change? E.g. when the user selects John all his details are retrived from the DB and displayed. I want the system to do it without having to click the go button.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
John
  • 4,413
  • 6
  • 25
  • 28
  • 2
    Inline event handlers like `onchange` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Please _never_ suggest or encourage these attributes. The last browser that still needs them reached end of life nearly two decades ago. It’s `document.getElementById("yourSelect").addEventListener("change", ({ target }) => target.form.submit());`. – Sebastian Simon Oct 23 '22 at 11:23
  • How TF is that more intuitive... – Douglas Held Jul 17 '23 at 19:15

4 Answers4

844

Just ask assistance of JavaScript.

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

See also:

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • 8
    A lot of users block javascript, is there a way to do this without javascript? – deweydb Oct 09 '13 at 18:49
  • 6
    @deweydb: Nope. I would otherwise have answered it :) Just show a ` – BalusC Oct 09 '13 at 18:51
  • 115
    @deweydb "A lot of users block javascript…" Citation? I've honestly never come across a user that blocks javascript - I've started to believe that these users are a myth. It would prevent them from using half of the internet, for one thing; and anyone savvy enough to block script is probably aware of how innocuous and ubiquitous it is. – Nathan Hornby Apr 11 '14 at 14:50
  • 9
    @BalusC please add this for people that are worried about users not having javascript enabled `` also @NathanHornby if you really want a citation why dont you go to a public library most public library's block javascript for security reasons as well as some schools too so don't try to pass it off as a myth it has and is being done mainly for security reasons to keep the integrity of computers as some javascript is malicious code... – Belldandu Jul 14 '14 at 13:58
  • 1
    @Kamijou: This is already covered in my 1st comment, along with a second alternative. – BalusC Jul 14 '14 at 14:27
  • @BalusC ah sorry bout that – Belldandu Jul 17 '14 at 17:07
  • Hi, just came across your answer, is there a way to tell JS to ignore a default (selected) option? I.e. only submit if the option doesn't match the default one (which would be something like "Choose Action")? Thanks! – Nobilis Jan 13 '15 at 12:13
  • 1
    Beware using id="submit" for submit buttons in the form. This will cause TypeError - not a function! :) – Michal Vrchota May 04 '17 at 13:17
  • 1
    @MichalVrchota only if you use `onchange="submit()"` in a certain non-standards-compliant webbrowser developed by some team in Redmond. The answer in its current form is in a different syntax. – BalusC May 04 '17 at 14:11
  • 24
    @deweydb It's simple. Just put a `submit` button in ` – Aaron Esau Aug 13 '17 at 05:51
  • How can I put specific action in this? – huykon225 Jun 27 '18 at 02:41
  • @huykon225 `if (oldValue != newValue) specificAction()` – BalusC Jun 27 '18 at 10:37
  • 2
    @NathanHornby I block javascript using NoScript extension for Firefox. Then, when website is broken (almost all of them are) I only enable those scripts that bring it back to functional state, and leave various trackers turned off. Basically, I manually opt-in to use javascript on internet. – Vanity Slug - codidact.com Nov 13 '19 at 16:09
  • This seems to submit a random form on the page instead of the containing form of the select. – Arrow_Raider Apr 09 '20 at 18:58
  • @Arrow_Raider: that may happen when you're nesting forms, which is illegal in HTML. – BalusC Apr 09 '20 at 19:07
112

Simple JavaScript will do - 

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

Here is a link for a good javascript tutorial.

MD Sayem Ahmed
  • 28,628
  • 27
  • 111
  • 178
21

other than using this.form.submit() you also can submiting by id or name. example i have form like this : <form action="" name="PostName" id="PostID">

  1. By Name : <select onchange="PostName.submit()">

  2. By Id : <select onchange="PostID.submit()">

Sate Wedos
  • 539
  • 8
  • 20
  • No JavaScript needed! – MikeyE Feb 06 '18 at 06:32
  • I know, that's what I meant by my comment. I was trying to give you some props. :-) – MikeyE Feb 11 '18 at 23:36
  • Wait, is that seriously not JavaScript? – James Haug Mar 13 '18 at 17:34
  • 15
    Anything written inside on* attributes is interpretted as Javascript. So PostName.submit() is javascript. – Asif Shahzad Jan 31 '19 at 11:56
  • 1
    The parentheses indicate we're dealing with a "function". HTML is a declarative and not an imperative language, so it doesn't have the concept of a function so submit() is JavaScript. Your other cue would be when you write an tag for example, you are telling the browser *what exists there*. When you write PostName.submit() you are telling the browser *what to do* under a certain condition. That's roughly the difference between declarative and imperative languages. – TheAgent Jun 27 '20 at 12:57
  • for me it is showing the name of the form is not defined, with this way of solution – rinilnath Oct 05 '21 at 08:37
16

To those in the answer above. It's definitely JavaScript. It's just inline.

BTW the jQuery equivalent if you want to apply to all selects:

$('form select').on('change', function(){
    $(this).closest('form').submit();
});
roapp
  • 530
  • 6
  • 17
nitsram
  • 686
  • 5
  • 5