243


32

HTMLフォーム内の複数の送信ボタン

HTMLフォームでウィザードを作成したとしましょう。 1つのボタンが戻り、そして1つが進みます。 Enterキーを押すと、マークアップの最初に_back_ボタンが表示されるので、ボタンを使用してフォームを送信します。

例:

私がやりたいことは、ユーザーがEnterを押したときにどのボタンを使ってフォームを送信するかを決めることです。 そうすると、Enterキーを押すとウィザードは前のページではなく次のページに移動します。 これを行うには `tabindex`を使う必要がありますか?

23 Answer


132


これが役に立つことを願っています。 右側のボタンをフロートさせるというトリックをやっているだけです。

このように、PrevボタンはNextボタンの左側にありますが、NextはHTMLコードの最初に来ます。

.f {
  float: right;
}
.clr {
  clear: both;
}

*編集:*他の提案よりも優れている点:JavaScriptが利用できない、アクセス可能、両方のボタンが `type =" submit "のまま


60


前のボタンの種類を次のようなボタンに変更することは可能でしょうか。


これでNextボタンがデフォルトになるでしょう。それに加えてあなたのブラウザがそれを強調するように `default`属性を追加することもできます:


お役に立てば幸いです。


53


送信ボタンにこのような同じ名前を付けます。


ユーザーがenterを押して_Request_がサーバーに送られると、フォームの名前と値のペアのコレクションを含むサーバーサイドコードで `submitButton`の値をチェックすることができます。 例えば、古典的なASPでは:

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for Previous Page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for Next Page
End If

参照:http://www.chami.com/tips/internet/042599I.html [一つのフォームで複数の送信ボタンを使う]


30


最初のボタンがデフォルトで使用されているという事実がブラウザ間で統一されているのであれば、それらをソースコード内で正しい方向に配置しないでください。 例えばそれらを視覚的に切り替えるためにそれらを左右に「フロート」させます。


17


あなたが本当にそれをインストールダイアログのように動作させたいだけなら、OnLoadの "Next"ボタンに焦点を合わせるだけでいいのです。 ユーザーがReturnキーを押すと、フォームが送信されて先に進みます。 彼らが戻って行きたい場合は、彼らはタブを押すか、ボタンをクリックすることができます。


16


@palotasbによる解決策では不十分な場合があります。 たとえば、[次へ]や[前へ]などのボタンの上に[フィルタ]送信ボタンが配置されているというユースケースがあります。 回避策を見つけました。_copy_送信ボタン。隠しdivのデフォルトの送信ボタンとして機能し、他の送信ボタンの上のフォーム内に配置する必要があります。 技術的には、Enterキーを押したときに表示される[次へ]ボタンをクリックしたときに別のボタンによって送信されます。 しかし、名前と値は同じなので、結果に違いはありません。

        div.defaultsubmitbutton {
            display: none;
        }








        Filtered results
        Filtered result 1
        Filtered result 2
        Filtered result 3


16


CSSでも動作します

最初に次のボタン、次に前のボタンとしてマークアップに入れます。

それから、CSSを使用してそれらをあなたが望むように見えるように配置する


16


Kevin、これは純粋なHTMLではできません。 このトリックはJavaScriptに頼らなければなりません。

ただし、HTMLページに2つのフォームを配置すると、これを実行できます。

Form1には前へボタンがあります。

Form2では、任意のユーザーに次へボタンを入力させるでしょう。

ユーザーがForm2で[.kbd]#Enter#を押すと、Next submitボタンが起動します。


15


フォームの送信にはJavascriptを使用します。 この関数はフォーム要素のOnKeyPressイベントによって起動され、Enterキーが選択されたかどうかを検出します。 その場合は、フォームを送信します。

これを行う方法についてのテクニックを提供する2つのページがここにあります: 1、http://www.java2s.com/Code/JavaScript/Form-Control / SubmitaformViaEnter.htm [2]。 これらに基づいて、こちらが使用例です( こちらに基づく)。

<! -  function submitenter(myfield、e){var keycode; if(window.event){keycode = window.event.keyCode;そうでなければ(e){keycode = e.which;} } else {trueを返します。 }

if(keycode == 13){myfield.form.submit(); falseを返します。 } else {trueを返します。 }}
//-->


13


ケビン、

これは、ほとんどのブラウザでJavaScriptやCSSがなくても機能します。

Previous Page
Next Page

Firefox、Opera、Safari、Google Chromeはすべて機能します。 いつものように、IEが問題です。

このバージョンは、JavaScriptがオンになっているときに機能します。

Previous Page
Next Page

そのため、このソリューションの問題点は次のとおりです。JavascriptをオフにしてIEを使用している場合、前のページは機能しません。 念のために言うと、戻るボタンはまだ機能します。