322

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
  • 992,635
  • 352
  • 3,478
  • 3,452
John
  • 3,883
  • 6
  • 23
  • 27

4 Answers4

732

Just ask assistance of JavaScript.

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

See also:

BalusC
  • 992,635
  • 352
  • 3,478
  • 3,452
  • 7
    A lot of users block javascript, is there a way to do this without javascript? – deweydb Oct 09 '13 at 18:49
  • 5
    @deweydb: Nope. I would otherwise have answered it :) Just show a ` – BalusC Oct 09 '13 at 18:51
  • 97
    @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
  • 7
    @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
  • 14
    @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
  • 1
    @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. – wha7ever 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
88

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
  • 26,780
  • 23
  • 104
  • 174
14

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();
});
beaver
  • 485
  • 9
  • 16
nitsram
  • 640
  • 5
  • 5
11

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

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

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

sate wedos
  • 399
  • 5
  • 19
  • 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
  • Am I wrong ? please correct my statement. I'm not sure about that – sate wedos Mar 15 '18 at 07:45
  • 11
    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