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

263

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

例：

<form>
  <!-- Put your cursor in this field and press Enter -->
  <input type="text" name="field1" />

  <!-- This is the button that will submit -->
  <input type="submit" name="prev" value="Previous Page" />

  <!-- But this is the button that I WANT to submit -->
  <input type="submit" name="next" value="Next Page" />
</form>
スニペットを展開

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

html  forms  form-submit  submit-button 
— ケビン
ソース

回答:

142

これがお役に立てば幸いです。私はfloatボタンを右に動かすというトリックをしているだけです。

このように、Prevボタンはボタンの左側にありNextますがNext、HTML構造の最初に来ます：

.f {
  float: right;
}
.clr {
  clear: both;
}
<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>
スニペットを展開

他の提案に対する利点：JavaScriptコードがなく、アクセス可能で、両方のボタンが残っていtype="submit"ます。

— パロタスブ
ソース
23
タブの順序を変更せずにこれを行わないでください。タブボタンを押すと、ボタンが画面に表示されるときにボタンが循環します。
— スティーブ
61

前のボタンタイプを次のようなボタンに変更します。 

<input type="button" name="prev" value="Previous Page" />

これで、[ 次へ ]ボタンがデフォルトになります。さらにdefault、ブラウザに次のようにハイライト表示されるように、属性を追加することもできます。

<input type="submit" name="next" value="Next Page" default />
— ウォーリー・ローレス
ソース
39
何のdefaultことを話しているの？有効な「デフォルト」属性はありません：w3.org/html/wg/drafts/html/master/…（HTML5、HTML 4.01 Transitional / Strict、XHTML 1.0 Strictにはありません）。また、入力タイプをからsubmitに変更したbutton方がよい理由はわかりません。問題なく、1つのフォームに複数の送信タイプの入力要素を含めることができます。なぜこの回答がそれほど賛成されているのか、私にはよくわかりません。
— Sk8erPeter 2013年
3
タイプ「ボタン」の入力がある場合、フォームアクションは実行されません。onclickなどを使用して、「デフォルト」フォームアクション（「送信」タイプのボタンを押すことによって実行される）以外の機能を実行できます。それが私が探していたものであり、それが私がそれを支持した理由です。「デフォルト」属性について話すことはできませんが、私の問題の一部ではありませんでした;）しかし、あなたの説明に感謝します。
— ジョナス14
2
@ Sk8erPeter、@ Jonas ....うーん..このdefault属性はグローバル属性だと思います。列挙型属性に関連する列挙型属性..w3.org / html / wg / drafts / html / master / …。その点を除いて..この回答のボタンの側面は回答ではありません..これは「条件付き提案」またはクエリ（質問自体）です。
— Brett Caswell、2015
3
@ジョナス：はい、type="button"フォームを送信しません、type="submit"しますが、これらのボタンのタイプを変更することは間違いなく解決策ではありません。これらのボタンは基本的に同じように動作するはずだからです-OPの質問は、「次へ」ボタンをEnterキーを押すためのデフォルト。そして、受け入れられた答えには可能な解決策があります。
— Sk8erPeter、2015
4
@BrettCaswell：これらのボタンのタイプを変更することは悪い回避策です（以前のコメントを参照）。（前述したように）HTMLのタグに有効なdefault属性はなくinput、（人気のある）ブラウザーはこの属性を持つボタンを強調表示しません。つまり、この属性の非標準の実装がないため、まだわかりません。 @Wally Lawlessが何について話していたか、そしてなぜこの答えがそれほど過大評価されているのか。defaultHTML5で導入された有効な属性は1つだけですが、<track>タグに対してのみ有効です：developer.mozilla.org/en-US/docs/Web/HTML/Element/track
— Sk8erPeter
56

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

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />

ユーザーが押しEnterてリクエストがサーバーに送信されると、submitButtonフォームname/valueペアのコレクションを含むサーバー側のコードの値を確認できます。たとえば、ASPクラシックでは：

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

参照：1つのフォームで複数の送信ボタンを使用する

— Huseyint
ソース
26
これはユーザーが要求したものではありません。ユーザーは、Enterキーが押されたときにアクティブになるフォームの送信ボタンを制御する方法を知りたいと思っていました。これがデフォルトのボタンです。
— kosoant 2009年
20
ボタンのラベルさえ知らないI18nアプリケーションでは機能しません。
— Chris
どのシステムまたはテクノロジーソリューションで、サーバー自体が「次へ」および「戻る」ボタンに使用されたラベルを知らないのでしょうか？サーバーが最初に「次へ」ボタンと「戻る」ボタンを生成しませんでしたか？（ローカリゼーションがクライアント側で処理される場合、サーバーは知らないかもしれませんが、HTMLについてこれを聞いたことがありません）
— Jacob
この回答は質問を完全に逃しています。別の質問の可能性があります。なぜこれほど多くの賛成票を投じるのですか？ボタンのラベルをチェックしてはならないことは言うまでもありません...多くのトラブルを引き起こします。「文字列を「前のページ」に短縮する必要がある」という単純な場合でも、サイトの機能が損なわれます。
— Tylla
30

最初のボタンがデフォルトで使用されるという事実がブラウザー間で一貫している場合は、それらをソースコードの適切な場所に配置し、CSSを使用して見かけ上の位置を切り替えます。

float たとえば、それらを左右に切り替えて視覚的に切り替えます。

— ポルソンビー
ソース
18

@palotasbが提供するソリューションでは不十分な場合があります。たとえば、「フィルター」送信ボタンが「次へ」や「前へ」などのボタンの上に配置される使用例があります。私はこれの回避策を見つけました：非表示のdivのデフォルトの送信ボタンとして機能する必要がある送信ボタンをコピーし、他の送信ボタンの上にあるフォーム内に配置します。技術的には、Enterキーを押すと、表示されている[次へ]ボタンをクリックするときとは異なるボタンによって送信されます。ただし、名前と値は同じであるため、結果に違いはありません。

<html>
<head>
    <style>
        div.defaultsubmitbutton {
            display: none;
        }
    </style>
</head>
<body>
    <form action="action" method="get">
        <div class="defaultsubmitbutton">
            <input type="submit" name="next" value="Next">
        </div>
        <p><input type="text" name="filter"><input type="submit" value="Filter"></p>
        <p>Filtered results</p>
        <input type="radio" name="choice" value="1">Filtered result 1
        <input type="radio" name="choice" value="2">Filtered result 2
        <input type="radio" name="choice" value="3">Filtered result 3
        <div>                
            <input type="submit" name="prev" value="Prev">
            <input type="submit" name="next" value="Next">
        </div>
    </form>
</body>
</html>
— netiul
ソース
17

JavaScriptを使用してフォームを送信します。この関数は、フォーム要素のOnKeyPressイベントによってトリガーされ、Enterキーが選択されたます。この場合、フォームが送信されます。

：ここではこれを行う方法のテクニックを与える2つのページです1、2。これらに基づいて、ここに使用例を示します（ここに基づいて）：

<SCRIPT TYPE="text/javascript">//<!--
function submitenter(myfield,e) {
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else if (e) {
    keycode = e.which;
  } else {
    return true;
  }

  if (keycode == 13) {
    myfield.form.submit();
    return false;
  } else {
    return true;
  }
}
//--></SCRIPT>

<INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />
— ヤアコフエリス
ソース
2
JavaScriptが無効になっている場合はどうなりますか？
— Jon Winstanley、
2
JSをコメント化するために<！-および->を使用しないでください。これらのタグはJavaScript言語トークンではありません
— Marecky
2
@Marecky彼らはJSをコメントアウトしないでください。<script>をサポートするブラウザで<script>の内容を解析する場合、これらは無視されます。今日、それらは実際には必要ありません。しかし、非常に古いブラウザでは、これはスクリプトがプレーンテキストとして印刷されないようにするための互換性ハックでした。
— リーム
17

インストールダイアログのように機能させたい場合は、[次へ]ボタンのOnLoadにフォーカスを移します。

これにより、ユーザーReturnがを押すと、フォームが送信されて先に進みます。戻る場合はTab、ボタンを押すかクリックします。

— スコット・ゴットロイ
ソース
2
それらは、誰かがフォームに記入し、ヒットがテキストフィールドにいる間に戻ることを意味します。
— ジョーダンライター
17

これは純粋なHTMLでは実行できません。このトリックはJavaScriptに依存する必要があります。

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

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

Form2にはユーザー入力と次へボタンがあります。

ユーザーがEnterForm2を押すと、[次へ]送信ボタンが起動します。

— フライスワット
ソース
16

CSSでそれを行うことができます。

Nextボタンを最初にマークアップに配置し、次にPrevボタンを配置します。

次に、CSSを使用して、希望どおりに表示されるように配置します。

— qui
ソース
14

これは、ほとんどのブラウザーでJavaScriptまたはCSSなしで機能します。

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

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

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

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

したがって、このソリューションの欠点は次のとおりです。

JavaScriptをオフにしてInternet Explorerを使用すると、前のページは機能しません。

ちなみに、戻るボタンはまだ機能します！

— ジョリオン
ソース
1
JavaScriptがないと、type = "button"であるため、「前のページ」ボタンをアクティブにできません。
— Riskop 2018年
あなたの提案の問題は、ボタンtype = "button"がフォームをポストしないため、基本的に何もしないことですが、アンカー付きの2番目のバージョンはPOSTではなくGETを作成します。
— Tylla
12

1つのページに複数のアクティブなボタンがある場合は、次のようにすることができます。

Enterキーを押したときにトリガーする最初のボタンをフォームのデフォルトボタンとしてマークします。2番目のBackspaceボタンは、キーボードのボタンに関連付けます。BackspaceEVENTCODEは8です。

$(document).on("keydown", function(event) {
  if (event.which.toString() == "8") {
    var findActiveElementsClosestForm = $(document.activeElement).closest("form");

    if (findActiveElementsClosestForm && findActiveElementsClosestForm.length) {
      $("form#" + findActiveElementsClosestForm[0].id + " .secondary_button").trigger("click");
    }
  }
});
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

<form action="action" method="get" defaultbutton="TriggerOnEnter">
  <input type="submit" id="PreviousButton" name="prev" value="Prev" class="secondary_button" />
  <input type="submit" id='TriggerOnEnter' name="next" value="Next" class="primary_button" />
</form>
スニペットを展開

— ユーザー1591131
ソース
11

タブオーダーを変更するだけで、これを実現できます。単純にする。

別の簡単なオプションは、HTMLコードの送信ボタンの後ろに戻るボタンを配置することですが、左にフロートさせて、送信ボタンの前のページに表示します。

— ケニー・ジョンソン
ソース
10 
<input type="submit" name="perv" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page">

すべての送信ボタンの名前は同じにします-「前へ」。

唯一の違いは value一意の値を持つ属性です。スクリプトを作成するとき、これらの一意の値は、どの送信ボタンが押されたかを理解するのに役立ちます。

そして、次のコーディングを書いてください：

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
— じゃゆ
ソース
問題は、テキストフィールドでEnterキーを押すと、意図したもの（例では2番目）ではなく、最初の送信ボタンでフォームが送信されることです。フォームの送信に使用された送信ボタンを見つけるのは簡単で、それは問題ではありませんでした。
— Riskop、2018年
なんでname="perv"？
— Peter Mortensen
10

別の簡単なオプションは、HTMLコードで送信ボタンの後ろに戻るボタンを配置することですが、左にフロートさせるため、送信ボタンの前のページに表示されます。

タブオーダーを変更するだけで、これを実現できます。単純にする。

— ピーターモーテンセン
ソース
10

私がこれに初めて直面したとき、選択肢が前/次でなくて単純であるために、onclick（）/ JavaScriptハックを思いつきました。こんなふうになります：

@model myApp.Models.myModel

<script type="text/javascript">
    function doOperation(op) {
        document.getElementById("OperationId").innerText = op;
        // you could also use Ajax to reference the element.
    }
</script>

<form>
  <input type="text" id = "TextFieldId" name="TextField" value="" />
  <input type="hidden" id="OperationId" name="Operation" value="" />
  <input type="submit" name="write" value="Write" onclick='doOperation("Write")'/>
  <input type="submit" name="read" value="Read" onclick='doOperation("Read")'/>
</form>

いずれかの送信ボタンがクリックされると、目的の操作が非表示フィールド（フォームが関連付けられているモデルに含まれる文字列フィールド）に保存され、すべての決定を行うコントローラーにフォームが送信されます。コントローラーでは、次のように書くだけです。

// Do operation according to which submit button was clicked
// based on the contents of the hidden Operation field.
if (myModel.Operation == "Read")
{
     // Do read logic
}
else if (myModel.Operation == "Write")
{
     // Do write logic
}
else
{
     // Do error logic
}

数値演算コードを使用して文字列の解析を回避するためにこれを少し引き締めることもできますが、列挙型を使用しない限り、コードの可読性、変更性、自己文書化が低下し、とにかく解析が簡単になります。

— MiddleAgedMutantNinjaProgrammer
ソース
9

https://html.spec.whatwg.org/multipage/forms.html#implicit-submissionから

フォーム要素のデフォルトボタンは、フォームの所有者がそのフォーム要素であるツリー順の最初の送信ボタンです。

ユーザーエージェントがユーザーに暗黙的にフォームを送信させることをサポートしている場合（たとえば、一部のプラットフォームでは、テキストフィールドがフォーカスされているときに「Enter」キーを押すと、暗黙的にフォームが送信されます）...

次の入力をtype = "submit"にして、前の入力をtype = "button"に変更すると、望ましいデフォルトの動作が得られます。

<form>
   <input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->

   <input type="button" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
   <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>
— nikkypx
ソース
9

これは私が試したものです：

  1. ボタンに異なる名前を付けることを確認する必要があります
  2. ifいずれかのボタンがクリックされた場合に必要なアクションを実行するステートメントを記述します。

 

<form>
    <input type="text" name="field1" /> <!-- Put your cursor in this field and press Enter -->

    <input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
    <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

PHPでは、

if(isset($_POST['prev']))
{
    header("Location: previous.html");
    die();
}

if(isset($_POST['next']))
{
    header("Location: next.html");
    die();
}
— サミュエル・ムギシャ
ソース
問題は、テキストフィールドでEnterキーを押すと、意図したもの（例では2番目）ではなく、最初の送信ボタンでフォームが送信されることです。フォームの送信に使用された送信ボタンを見つけるのは簡単で、それは問題ではありませんでした。
— Riskop、2018年
7

基本的に同じことに対する答えを見つけようとしたときに、ASP.NETコントロールでのみ、この質問に出くわしました。ASPボタンには、UseSubmitBehaviorどのボタンを送信するかを設定できるようにするというプロパティがあることがわかったときです。

<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />

誰かがASP.NETボタンの方法を探している場合に備えて。

— バリー・フランクリン
ソース
6

JavaScript（ここではjQuery）を使用すると、フォームを送信する前に「前へ」ボタンを無効にすることができます。

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
— ギヨーム
ソース
1

これを試して..！

<form>
  <input type="text" name="Name" />
  <!-- Enter the value -->

  <input type="button" name="prev" value="Previous Page" />
  <!-- This is the button that will submit -->
  <input type="submit" name="next" value="Next Page" />
  <!-- But this is the button that I WANT to submit -->
</form>
スニペットを展開

— ゴサム・バルサミー
ソース
1

私はこの方法で非常に類似した問題を解決しました：

  1. JavaScriptが有効になっている場合（ほとんどの場合、現在）、すべての送信ボタンは、JavaScript（jQuery）を介したページのロード時にボタンに「機能低下」します。「機能低下」ボタンタイプボタンのクリックイベントもJavaScriptを介して処理されます。

  2. JavaScriptが有効になっていない場合、フォームは複数の送信ボタンを使用してブラウザーに提供されます。打つこの場合Enterにはtextfield、フォーム内の最初のボタンの代わりに、意図してフォームを送信しますデフォルトが、少なくとも形式はまだ使用可能です：あなたは両方で提出することができます前と次のボタンがあります。

作業例：

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>

    <body>
        <form action="http://httpbin.org/post" method="post">
            If JavaScript  is disabled, then you CAN submit the form
            with button1, button2 or button3.

            If you press enter on a text field, then the form is
            submitted with the first submit button.

            If JavaScript is enabled, then the submit typed buttons
            without the 'defaultSubmitButton' style are converted
            to button typed buttons.

            If you press Enter on a text field, then the form is
            submitted with the only submit button
            (the one with class defaultSubmitButton)

            If you click on any other button in the form, then the
            form is submitted with that button's value.

            <br />

            <input type="text" name="text1" ></input>
            <button type="submit" name="action" value="button1" >button 1</button>
            <br />

            <input type="text" name="text2" ></input>
            <button type="submit" name="action" value="button2" >button 2</button>
            <br />

            <input type="text" name="text3" ></input>
            <button class="defaultSubmitButton" type="submit" name="action" value="button3" >default button</button>
        </form>

        <script>
            $(document).ready(function(){

                /* Change submit typed buttons without the 'defaultSubmitButton'
                   style to button typed buttons */
                $('form button[type=submit]').not('.defaultSubmitButton').each(function(){
                    $(this).attr('type', 'button');
                });

                /* Clicking on button typed buttons results in:
                   1. Setting the form's submit button's value to
                      the clicked button's value,
                   2. Clicking on the form's submit button */
                $('form button[type=button]').click(function( event ){
                    var form = event.target.closest('form');
                    var submit = $("button[type='submit']",form).first();
                    submit.val(event.target.value);
                    submit.click();
                });
            });
        </script>
    </body>
</html>
スニペットを展開

— Riskop
ソース
0

Tabindexこの問題を解決するために使用できます。また、ボタンの順序を変更すると、これを実現するより効率的な方法になります。

ボタンの順序を変更し、float値を追加して、HTMLビューに表示する目的の位置に割り当てます。

— ジョティ・ミシュラ
ソース
-4

あなたが与えた例を使用して：

<form>
    <input type="text" name="field1" /><!-- Put your cursor in this field and press Enter -->
    <input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
    <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

「前のページ」をクリックすると、「前の」の値のみが送信されます。「次のページ」をクリックすると、「次へ」の値のみが送信されます。

ただし、Enterフォームのどこかを押すと、「前へ」も「次へ」も送信されません。

したがって、疑似コードを使用すると、次のことができます。

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
— ゲートキラー
ソース
1
どのボタンもトリガーされない（jsを使用しない）状況はありません。Enterキーを押すと、コードの最初のボタンがイベントをキャッチします。html-exampleでは、prev-buttonです。
— SimonSimCity
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.