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

Question

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する必要がありますか？

score 150 · Accepted Answer

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"ます。

score 65 · Accepted Answer

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

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

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

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

score 61 · Accepted Answer

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

<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 つのフォームで複数の送信ボタンを使用する

score 31 · Accepted Answer

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

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

score 21 · Accepted Answer

palotasbが提供するソリューションでは不十分な場合があります。たとえば、「次へ」や「前へ」などのボタンの上に「フィルター」送信ボタンを配置するユースケースがあります。これに対する回避策を見つけました。非表示の div でデフォルトの送信ボタンとして機能する必要がある送信ボタンをコピーし、他の送信ボタンの上のフォーム内に配置します。

技術的には、表示されている [次へ] ボタンをクリックしたときとは異なるボタンによって送信されます。しかし、名前と値は同じなので、結果に違いはありません。

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

score 18 · Accepted Answer

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

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

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

Form2 には、ユーザー入力 + 次のボタンがあります。

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

score 17 · Accepted Answer

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

score 17 · Accepted Answer

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

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

score 16 · Accepted Answer

CSSでできます。

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

次に、CSS を使用して、必要な方法で表示されるように配置します。

score 13 · Accepted Answer

これは、ほとんどのブラウザーで 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 を使用すると、前のページは機能しません。

戻るボタンは引き続き機能します。

score 12 · Accepted Answer

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

Enterキーを押したときにトリガーする最初のボタンをフォームのデフォルトボタンとしてマークします。Backspace2 番目のボタンについては、キーボードのボタンに関連付けます。Backspaceイベントコードは 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>

score 11 · Accepted Answer

タブオーダーを変更するだけで、これを実現できます。複雑にしないでおく。

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

score 10 · Accepted Answer

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

タブオーダーを変更するだけで、これを実現できます。複雑にしないでおく。

score 10 · Accepted Answer

これに初めて遭遇したとき、選択肢が prev/next でない場合の 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
}

数値操作コードを使用して文字列の解析を回避することもできますが、列挙型で遊んでいない限り、コードは読みにくく、変更しにくく、自己文書化が難しく、解析は簡単です。

score 8 · Accepted Answer

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

ボタンに異なる名前を付けることを確認する必要があります
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();
}

score 8 · Accepted Answer

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

すべての送信ボタンの名前を「prev」と同じにしてください。

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

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

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

score 7 · Accepted Answer

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

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

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

score 6 · Accepted Answer

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

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

score -4 · Accepted Answer

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

<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

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

26 に答える 26

Related

Reference