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

08-06-2019
|

質問

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 これをする？

解決

これがお役に立てば幸いです。私はただトリックをやっているだけです 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"

他のヒント

以前のボタンの種類を次のようなボタンに変更していただけますか。

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

これで、「次へ」ボタンがデフォルトになり、さらに次のボタンを追加することもできます。 default 属性をそれに追加すると、ブラウザーは次のように強調表示します。

<input type="submit" name="next" value="Next Page" default />

それが役立つことを願っています。

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

<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 Previous Page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for Next Page
End If

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

最初のボタンがデフォルトで使用されるという事実がブラウザ間で一貫しているのであれば、ソースコード内で最初のボタンを正しく配置し、CSS を使用して見かけの位置を切り替えてみてはいかがでしょうか。 float たとえば、それらを左右に動かして視覚的に切り替えることができます。

本当にインストールダイアログのように動作させたい場合は、OnLoad で「次へ」ボタンにフォーカスを移すのはどうでしょうか。そうすることで、ユーザーが Return キーを押すと、フォームが送信されて先に進みます。戻りたい場合は、Tab キーを押すか、ボタンをクリックします。

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

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

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

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

Form2 にはユーザー入力と「次へ」ボタンが含まれます。

ユーザーが押したとき 入力 Form2 では、[次へ送信] ボタンが起動します。

CSSで実現できます。

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

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

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)" />

ケビン、

これは、ほとんどのブラウザで 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 はすべて動作します。
いつものように、IE が問題です。

このバージョンは、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 をオフにして IE を使用すると、前のページは機能しません。
念のため言っておきますが、「戻る」ボタンはまだ機能します。

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

トリガーしたい最初のボタンにマークを付けます 入力 フォーム上のデフォルトボタンとしてキーを押します。2 番目のボタンに関連付けます バックスペース キーボードのボタン。 バックスペース イベントコードは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>

お役に立てれば。

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

もう 1 つの簡単なオプションは、HTML コードの送信ボタンの後に戻るボタンを配置しますが、それを左にフローティングして、送信ボタンの前のページに表示されるようにすることです。

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

すべての送信ボタンの名前は同じにしておきます -- "prev" 唯一の違いは value 一意の値を持つ属性。スクリプトを作成するとき、これらの一意の値は、どの送信ボタンが押されたかを判断するのに役立ちます。

そして、次のコーディングを書きます。

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if

初めてこれに遭遇したとき、選択肢が前/次ではない場合の onclick()/js ハックを思いつきました。そのシンプルさは今でも気に入っています。こんなふうになります：

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

文字列の解析を避けるために、数値のオペレーションコードを使用してこれをわずかに強化することもできますが、列挙型を使用しない限り、コードの可読性、変更性、自己文書性が低くなり、解析はとにかく簡単です。

これが私が試したことです: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();

}

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

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

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

誰かがそれを行うためのasp.netボタンの方法を探している場合に備えて。

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

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});

私は次の方法で非常によく似た問題を解決しました。

もし javascript (最近のほとんどの場合) が有効になっている場合、すべての送信ボタンが "劣化した「ページ読み込み時のボタンへ」 javascript (jクエリ)。「」のイベントをクリックします。劣化した" ボタン型のボタンは、 javascript.
もし 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>

これを試して..！

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

使用できます Tabindex この問題を解決するには、ボタンの順序を変更することもより効率的な方法です。ボタンの順番を変更して追加 float 値を使用して、それらに表示したい位置を割り当てます。 HTML ビュー。

あなたが与えた例を使用すると、次のようになります。

<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

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow