ドロップダウンリストの変更時にフォームを送信する方法

293

JSPでページを作成しています。ドロップダウンリストがあり、ユーザーが値を選択すると、移動ボタンをクリックする必要があり、値がサーブレットに送信されます。

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

変更時にそれを行うにはどうすればよいですか？たとえば、ユーザーがジョンを選択すると、彼のすべての詳細がDBから取得されて表示されます。「実行」ボタンをクリックせずにシステムに実行させたい。

html jsp

— ジョン
ソース

662

JavaScriptの支援を求めてください。

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

以下も参照してください。

HTMLドッグ-JavaScriptチュートリアル

— BalusC
ソース

6

多くのユーザーがJavaScriptをブロックしていますが、JavaScriptなしでこれを行う方法はありますか？

— deweydb 2013年

5

@deweydb：いいえ。<noscript>JSが有効になっている場合は、サイトのエクスペリエンスが優れていることをバナーに表示するだけです。まったく異なる代替手段は<ul><li><input type="submit">、CSSのロードを使用して投入し、真のドロップダウンリストのように見せることです。しかし、それでは<select>もう手段はありません。

— BalusC 2013年

89

@deweydb「多くのユーザーがJavaScriptをブロックしています…」引用？私は正直なところ、JavaScriptをブロックするユーザーに出くわしたことはありません。これらのユーザーは神話であると信じ始めました。それは彼らがインターネットの半分を使うことを妨げるでしょう。そして、スクリプトをブロックするのに十分な知識がある人なら、それがどれほど無害でどこにでもあることに気づいているでしょう。

— Nathan Hornby

7

@BalusCは、ユーザーがjavascriptを有効にしていないことを心配している人のためにこれを追加してください。

<noscript>This form requires that you have javascript enabled to work properly please enable javascript in your browser.</noscript>

もしあなたが本当に公共図書館に行ってはいけない場合は、セキュリティ上の理由でほとんどの公共図書館のブロックjavascriptだけでなくいくつかの学校も引用しないでください。 t一部のJavaScriptは悪意のあるコードであるため、コンピューターの整合性を維持するためにセキュリティ上の理由で行われている神話としてそれを偽装しようとしています...

— Belldandu

10

@deweydb簡単です。タグにsubmitボタンを配置するだけ<noscript>です。ユーザーがnoscriptを使用する場合にのみ表示されます。JSを有効にしているユーザーは、要素を簡単に選択できます。noscriptを使用しているユーザーは、送信ボタンをクリックするだけです。:)

— アーロンエサウ2017

81

単純なJavaScriptで十分です-

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

これは、優れたJavaScriptチュートリアルのリンクです。

— MD Sayem Ahmed
ソース

ありがとう！上記の1つは、MVCでも@using（Html.BeginForm（ "Actioname"、 "controllername"、FormMethod.Post））<select name = "myselect" id = "myselect" onchange = "this.form.submit （） "> <option value =" 1 "> 1つ</ option> <option value =" 2 "> 2つ</ option> <option value =" 3 "> 3つ</ option> <option value =" 4 " > 4 </ option> </ select>

— charulatha krishnamoorthy

11

this.form.submit()IDや名前で送信する以外にも使用します。例私はこのようなフォームを持っています：<form action="" name="PostName" id="IdName">

名前で： <select onchange="PostName.submit()">
Idによって： <select onchange="IdName.submit()">

— サテウェドス
ソース

JavaScriptは必要ありません！

— MikeyE 2018

'submit（）'はHTML要素だと思います。JavaScriptではありません。CMIIW

— sate wedos

私が知っている、それは私が私のコメントで意味したものです。小道具をあげようとしていた。:-)

— MikeyE 2018

待ってください、それは本当はJavaScriptではありませんか？

— James Haug

10

on *属性内に記述されたものはすべてJavaScriptとして解釈されます。したがって、PostName.submit（）はJavaScriptです。

— Asif Shahzad

9

上記の回答の方へ。それは間違いなくJavaScriptです。インラインです。

ところで、すべての選択に適用する場合は、jQueryで同等のものを使用します。

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

— ニトスラム
ソース