1つのフォームに2つの送信ボタン


534

フォームに2つの送信ボタンがあります。サーバーサイドでヒットしたものを特定するにはどうすればよいですか?


受け入れられた回答をオウムの回答に変更することを検討してください。
Peter Mortensen

2
@PeterMortensen-受け入れられた答えも、Parrotの答えも、今日は最高ではありません。attributeを使用した新しいHTML5ソリューションについては、Leoの回答を参照してくださいformaction。または、ユーザーにHTMLを表示してブラウザーに送信する値から独立させる方法については、kirilの回答を参照してください。GregやParrotの回答よりもコード化しやすい方法で国際化の問題を解決します。
ToolmakerSteve

回答:


448

それぞれに名前を付けると、クリックされたものが他の入力として送信されます。

<input type="submit" name="button_1" value="Click me">

101
また、ボタンの名前が正しいことを確認してください!たとえば、「button-1」は機能しません。誰かの手間を大幅に省くことができるので、これを覚えておいてください。
pdolinaj 2013年

22
通常、フォーム内のすべての入力はフォームとともに送信されます。ボタンの値はクリックされた場合にのみ送信されるため、これらの事前定義された名前のフォーム値を検索する必要があります。私は、すべてに同じ名前を付け、異なる値を付けることを含む他の答え(stackoverflow.com/a/21778226/88409)がより理にかなっていると思います。次に、1つの既知のフォームフィールド名の下で値を取得します。また、ラジオボタンの機能(同じ名前、異なる値)と同様に、指定された入力名に対して1つの値(クリックされた値)のみが送信されることも明確になります。
Triynko 2015年

6
@Triynko、Robin Greenがその回答のコメントで述べたように、これは国際化に適しています。たとえば、ページがスペイン語で表示される場合、ボタンのテキストは異なる可能性があります。したがって、コードのロジックがそのボタンのテキストに依存していると、その場合は機能しなくなります。名前では、ユーザーには表示されないため、「プライベート」変数として扱い、ユーザーへのメッセージとして扱うことはできないため、名前を付ける方が安全です。
sfarbota 2017

@sfarbotaのコメントを明確にする:Parrotの回答に示されている最初のソリューションは、ユーザーに表示される値のテストに依存しているため、問題があります。それは怪しいです-ユーザーに見える単語を変更するときに壊れるコードは「壊れやすい」と考えられます。第二オウムの答えに示す解決策は結構です-それは、この1と同じです。Parrotの2番目のソリューションも、対応するコードを記述しているため、このコードよりも役立つ回答です。
ToolmakerSteve

2
attributeを使用した新しいHTML5ソリューションについては、Leoの回答を参照してくださいformaction。または、ユーザーに表示されるHTMLをブラウザーに送信される値から独立させる方法については、kirilの回答を参照してください-国際化の問題を解決します。
ToolmakerSteve

875

解決策1:
各入力に異なる値を指定し、同じ名前を維持します。

<input type="submit" name="action" value="Update" />
<input type="submit" name="action" value="Delete" />

次に、コードチェックで、どちらがトリガーされたかを確認します。

if ($_POST['action'] == 'Update') {
    //action for update here
} else if ($_POST['action'] == 'Delete') {
    //action for delete
} else {
    //invalid action!
}

その問題は、ロジックを入力内のユーザーに表示されるテキストに結び付けることです。


解決策2:
それぞれに一意の名前を付け、$ _ POSTでその入力の存在を確認します。

<input type="submit" name="update_button" value="Update" />
<input type="submit" name="delete_button" value="Delete" />

そしてコードでは:

if (isset($_POST['update_button'])) {
    //update action
} else if (isset($_POST['delete_button'])) {
    //delete action
} else {
    //no button pressed
}

37
i18nの目的では、選択した回答を使用する方がよい場合があります。
Robin Green、

11
@LaszloPappは答え自体が言うように、上記の選択した答えを使用すると、ロジックに影響を与えることなくフォームを国際化(つまり、異なる言語または方言に翻訳)できます。あなたはこの回答の最初のオプションを使用する場合は、ロジックは、フォームが実際に提示されている言語によって異なります。
ロビン・グリーン

1
@RobinGreen:ほとんどの人は2番目のロジックを使うと思いますよね?
lpapp 2013年

5
i18n = i [nternationalizatio] n、18は最初と最後の間の18文字を表します。
Buttle Butkus

18
OPはPHPを要求しませんでした。
ルディー14

110

さらに優れたソリューションは、ボタンタグを使用してフォームを送信することです。

<form>
    ...
    <button type="submit" name="action" value="update">Update</button>
    <button type="submit" name="action" value="delete">Delete</button>
</form>

ボタンのHTML (たとえば..>Update<..、ユーザーに表示されるものです。HTMLが提供されているため、ユーザーにはvalue表示されません。サーバーに送信されるだけです。このようにして、国際化や複数の表示言語(以前のソリューションでは、ボタンのラベルはサーバーに送信される値でもあります)。


13
どうやらブラウザの動作は異なります。値属性を送信するものもあれば、タグ間の文字列を送信するものもあるので、これには注意してください。
Jeroen Dierckx 14

1
私が提供スニペットが完全にサポートされていると思います(w3schools.com/tags/att_button_type.asp
キリル

2
@kirilそのリンクからのスニペットは、<button>submitとの2つの異なるタイプを使用しresetます。reset何も送信しないことに注意してください。フォームをリセットするだけです。したがって、Jeroenの議論は残っています。
fizruk 2014年

7
わかりました。次に、HTML5 W3Cワーキングドラフトを確認しました。引用:>> value属性は、フォーム送信のための要素の値を提供します。要素の値は、要素のvalue属性の値(存在する場合)、または空の文字列(存在する場合)です。>>注:ボタン(およびその値)は、ボタン自体がフォーム送信の開始に使用された場合にのみ、フォーム送信に含まれます。
キリル2014年

8
@Jeroen Bull。タグの間にテキストを送信するブラウザはどれですか?入力またはボタンは 'value'属性のみを送信する必要があります。ボタンは文字通り、画像やその他のHTMLタグを含め、タグの間に何かを持つことができます。それがinput要素の上にボタンを使用することの要点であり、ブラウザーがそのすべてのコンテンツを値としてダンプすることを示唆しようとしているのですか?ありえない。
Triynko 2015年

93

これに対する新しいHTML5アプローチ、formaction属性があります。

<button type="submit" formaction="/action_one">First action</button>
<button type="submit" formaction="/action_two">Second action</button>

どうやらこれはIE9以前では機能しませんが、他のブラウザでは問題ないはずです(参照:w3schools.com HTML <button> formaction Attribute)。

個人的には、私は通常、このアプローチをバックアップとして使用して、フォームをリモートで(より速く知覚されるフィードバックのために)送信するためにJavaScriptを使用しています。2つのうち、カバーされないのは、JavaScriptが無効になっているIE <9だけです。

もちろん、どのボタンが押されたかに関係なく、基本的に同じアクションをサーバー側で実行している場合、これは不適切な場合がありますが、ユーザー側のアクションが2つある場合は、サーバー側の2つのアクションにもマッピングされます。

編集: Pascal_dherのコメントに記載されているように、この属性は<input>タグでも使用できます。


1
「input」タグにも使用できます。w3schoolsへのコード化:ボタンタグを使用すると、異なるブラウザーが異なる値を送信する場合があります:w3schools.com/tags/tag_button.asp
Pascal_dher '18

3
私は12年間Web開発者でしたが、これは私にとって初めてのことであり、実際に必要なものでした。ありがとう!
KyleFarris

1
@KyleFarrisさん、どういたしまして!これは比較的最近になって可能になったと思いますので、これに出会ったことがない人でも驚きません。
レオ、

2
Railsユーザーへの注意:を使用してフォームを作成した場合、この属性の追加は機能しませんform_tag。動作させる唯一の方法は、に切り替えてform_for使用することf.submit formaction: 'your_path'です。
fgblomqvist


27

これはテストが非常に簡単です

<form action="" method="get">

<input type="submit" name="sb" value="One">
<input type="submit" name="sb" value="Two">
<input type="submit" name="sb" value="Three">

</form>

それをHTMLページに入れ、ボタンをクリックして、URLを見てください。


5
ここでGETを使用するのは少し悪い習慣です。可能であればPOSTを使用する必要があります。
Syncrossus

6
@Syncrossusこれはテスト用です。
エティエンヌマーティン

22

formactionHTML属性を使用(5行目):

<form action="/action_page.php" method="get">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <button type="submit">Submit</button><br>
    <button type="submit" formaction="/action_page2.php">Submit to another page</button>
</form>


@ToolmakerSteve-しかし、ユーザーは賛成しています。好きなものを選んでください!!
user12379095


11

複数の送信ボタンを処理する最良の方法は、サーバースクリプトでスイッチケースを使用することです

<form action="demo_form.php" method="get">

Choose your favorite subject:

<button name="subject" type="submit" value="html">HTML</button>
<button name="subject" type="submit" value="css">CSS</button>
<button name="subject" type="submit" value="javascript">Java Script</button>
<button name="subject" type="submit" value="jquery">jQuery</button>

</form>

サーバーコード/サーバースクリプト-フォームを送信する場所:

demo_form.php

<?php

switch($_REQUEST['subject']) {

    case 'html': //action for html here
                break;

    case 'css': //action for css here
                break;

    case 'javascript': //action for javascript here
                        break;

    case 'jquery': //action for jquery here
                    break;
}

?>

出典:W3Schools.com


はい、それはなど、あなたがプロセスに任意のスクリプト/ファイルを使用できますが、アクションスクリプト(サーバーサイド・スクリプト技術)についての考えを持っている必要があります例えば、PHP、ASP、JSPのデータを提出される <form action="demo_form.php" method="get">
Shailesh Sonare

はい。ActionScriptという名前の言語も存在するため、これは混乱を招きました。代わりに「サーバーコード」または「サーバースクリプト」と言う必要があります。
民間人

ボタンでそれができるとは思いもしませんでした
ウィリアム・イステッド

10

多分、ここで提案された解決策は2009年に機能しましたが、iveはこのすべての投票された回答をテストし、誰もどのブラウザーでも機能していません。

私が機能していることがわかった唯一の解決策はこれです:(しかし、私が使うのは少し醜いです)

<form method="post" name="form">
<input type="submit" value="dosomething" onclick="javascript: form.action='actionurl1';"/>
<input type="submit" value="dosomethingelse" onclick="javascript: form.action='actionurl2';"/>


2
なぜ使用しないのformaction="actionurl1"ですか?JavaScriptは必要ありません。
rybo111 2015

3
@ rybo111 IE9ブラウザー(魔女はまだ比較的広く使用されています)はサポートしていませんformaction
clueless007

1
@inaliaghle確かに、ユーザーの約1%-プロジェクトの対象者によって異なります。ユーザーの約1%がJavaScriptを使用していません。
rybo111 2015年

1
今後の読者のために:この回答のように、JavaScriptの使用には何の問題もありません。知っておくと便利なスキルです。OTOH、より高い賛成の回答もうまくいきます-この回答の最初の文は無視してください。何らかの理由で他の回答が機能しない場合は、コード全体をSOの質問として投稿し、何が発生するか(または発生しないか)を説明し、何が間違っているのかを尋ねます。
ToolmakerSteve

6

nameとして定義しarrayます。

<form action='' method=POST>
    (...) some input fields (...)
    <input type=submit name=submit[save] value=Save>
    <input type=submit name=submit[delete] value=Delete>
</form>

サーバーコードの例(PHP):

if (isset($_POST["submit"])) {
    $sub = $_POST["submit"];

    if (isset($sub["save"])) {
        // save something;
    } elseif (isset($sub["delete"])) {
        // delete something
    }
}

elseif非常に重要です。そうでない場合、両方が解析されます。楽しい。


これは優れた提案です。主な理由は、より多くのケースでより多くのボタンを簡単にswitch追加でき、ボタンを追加してそれをswitch(および/またはスペルミスなど)に追加するのを忘れた場合は、デフォルトのアクションでを使用するためです
グウィネス・ルウェリン

また、@ Patoは同様の答えを追加しましたが、おそらくもっと慣用的ですが、あなたの答えはうまくいきます!
Gwyneth Llewelyn

1
@GwynethLlewelyn自分で書いたときに他の回答が表示されなかったか、気づかなかった。それは実際には同じですが、これはほとんどの人がこのロジックを好む方法を強調するだけです。違いは、意味上の理由からの名前、新人またはそれから始めるのが好きな人のための十分な理解です。
シーシャス

5

使用しているサーバー側スクリプト方法を指定しなかったので、CherryPyを使用してPythonで機能する例を紹介します(他のコンテキストでも役立つ場合があります)。

<button type="submit" name="register">Create a new account</button>
<button type="submit" name="login">Log into your account</button>

値を使用してどのボタンが押されたかを判断する<button>代わりに、名前を使用できます(ではなくタグを使用<input>)。そうすれば、ボタンに同じテキストが含まれていても問題は発生しません。ボタンを含むすべてのフォーム項目の名前は、URLの一部として送信されます。CherryPyでは、これらのそれぞれがサーバー側コードを実行するメソッドの引数です。したがって、メソッドが**kwargs(各フォーム項目のすべての単一の名前を退屈に入力する代わりに)パラメータリストを保持している場合は、次のようにどのボタンが押されたかを確認できます。

if "register" in kwargs:
    pass #Do the register code
elif "login" in kwargs:
    pass #Do the login code

3
<form method="post">
<input type="hidden" name="id" value="'.$id.'" readonly="readonly"/>'; //any value to post PHP
<input type='submit' name='update' value='update' formAction='updateCars.php'/>
<input type='submit' name='delete' value='delete' formAction='sqlDelete.php'/>
</form>

2

GET配列の名前/値を読み取ることができるはずです。クリックされなかったボタンはそのリストには表示されないと思います。


おそらくPOSTアレイを意味します。
ypnos 2009

3
必ずしもそうとは限りませんが、フォームのメソッドが "POST"の場合、GET配列には表示されません。ほとんどのフォームはPOST経由で送信されます。
オウム

2
どちらか/または技術的に正しいが、それでも間違っている。method = "GET"を使用してフォームを送信できますが、それは非常に重要です。
リザードを請求する

4
w3.org/2001/tag/doc/whenToUseGet.htmlは、不適切に使用された場合にのみ「危険」になります。
メルカトル

2
ええ、私はGETを提案しようとしていたのではなく、単に一般化しようとしていました。
John Bubriski

1

このようにすることもできます(N個の入力がある場合は非常に便利です)。

<input type="submit" name="row[456]" value="something">
<input type="submit" name="row[123]" value="something">
<input type="submit" name="row[789]" value="something">

一般的な使用例は、ボタンごとにデータベースの異なるIDを使用することです。そのため、サーバーで行がクリックされたことが後でわかります。

サーバー側(この例ではPHP)では、「行」を配列として読み取り、IDを取得できます。 $_POST['row']次の形式の要素が1つだけの配列になります[ id => value ](例:[ '123' => 'something' ]

したがって、クリックされたIDを取得するには、次のようにします。

$index = key($_POST['row']);

http://php.net/manual/en/function.key.php


これは@Thieliciousが投稿した回答に似ていますが、あなたの方がおそらくもっと慣用的です。個人的には、読みやすさ(各ボタンの機能を覚えやすい)のために、インデックスには(数字ではなく)英数字タグを使用することを好みますが、YMMVを使用します。しかし$_POST['row']、連想配列であることを利用するのは賢明です!
Gwyneth Llewelyn

1
静的ボタンを扱う場合は、名前付きキーを使用する必要があることに同意します。ただし、できない場合もあります。これらの入力を動的に生成する場合があります。これの最も一般的なケースは、行のリストであり、各行はIDで識別されます。私が答えを書いたとき(4年前!)、私はそのケースについて考えていたと思います。私はそれを編集したので、番号がインデックスではなくIDであることはより明白です。
パト

よくやった!ええ、私は同意します、それは今より明白です。私はまだあなたの答えは@Thieliciousの答えよりもわずかに優れていると信じています(特にボタンが多い場合は、おそらくさらに効率的です)。
グウィネス・ルウェリン

1

1つのフォーム例で複数の送信ボタンのフォームアクション

 <input type="submit" name="" class="btn action_bg btn-sm loadGif" value="Add Address" title="" formaction="/addAddress"> 
 <input type="submit" name="" class="btn action_bg btn-sm loadGif" value="update Address" title="" formaction="/updateAddress"> 

0

シンプルなボタンをクリックすると、フォームのアクションを変更できます。

ドキュメントでこれを試してください。

$(".acceptOffer").click(function () {
       $("form").attr("action", "/Managers/SubdomainTransactions");
});

$(".declineOffer").click(function () {
       $("form").attr("action", "/Sales/SubdomainTransactions");
});

0

また、href属性を使用して、各ボタンに値を追加してgetを送信することもできます。ただし、フォームは必要ありません。

href="/SubmitForm?action=delete"
href="/SubmitForm?action=save"

これは、POSTルートの下のコントローラーには機能しません。
シャビモンテロ2018

したがって、「send a get」
Jonathan Laliberte、2018

3
申し訳ありませんが、GET必ずしも適切とは限りません。「モデルの状態を変更する」場合は、を使用しないでください。GETブラウザを更新すると、同じリクエストが2回透過的に送信される可能性があります。GET物事を「表示」しPOST、状態変更のリクエスト(追加、削除、編集など)を送信するためにのみ使用します。次に、POSTコントローラーアクションで状態(データベース、セッション...)を変更し、リダイレクトされた応答をキャストして、GET変更された新しい状態にします。GETモデル状態の変更を行うことは非常に不潔であり、優れたコーダーはそれを避けるべきです。申し訳ありません。きれいなコードrulez。
シャビモンテロ2018

そうだね。ただし、ダーティプレイはクリーンな場合があります。それはあなたが正確に何をしているのかに依存します。個人的には、取得時に削除と編集のリクエストをマッピングしませんが、それを機能させる方法があります。すでに削除されているかどうかを確認したり、ユーザーが削除する権限を持っているかどうかを確認したりします...
Jonathan Laliberte

-1

次のようにボタンを表示できます。

<input type="submit" name="typeBtn" value="BUY">
<input type="submit" name="typeBtn" value="SELL">

そして、コードでは次のようにして値を取得できます:

if request.method == 'POST':
    #valUnits = request.POST.get('unitsInput','')
    #valPrice = request.POST.get('priceInput','')
    valType = request.POST.get('typeBtn','')

(valUnitsとvalPriceは、説明のために残したフォームから抽出した他の値です)


-1

使用しているサーバー側スクリプト方法を指定していないため、PHPで機能する例を紹介します

<?php
   if(isset($_POST["loginForm"]))
   {
    print_r ($_POST); // FOR Showing POST DATA
   }
   elseif(isset($_POST["registrationForm"]))
   {
    print_r ($_POST);
   }
   elseif(isset($_POST["saveForm"]))
   {
    print_r ($_POST);
   }
   else{

   }
?>
<html>
<head>
</head>
<body>
  
  <fieldset>
    <legend>FORM-1 with 2 buttons</legend>
      <form method="post" >
      <input type="text" name="loginname" value ="ABC" >

     <!--Always use type="password" for password --> 
     <input type="text" name="loginpassword" value ="abc123" >
     
     <input type="submit" name="loginForm" value="Login"><!--SUBMIT Button 1 -->
     <input type="submit" name="saveForm" value="Save">  <!--SUBMIT Button 2 -->
   </form>
  </fieldset>



  <fieldset>
    <legend>FORM-2 with 1 button</legend>
     <form method="post" >
      <input type="text" name="registrationname" value ="XYZ" >
      
     <!--Always use type="password" for password -->
     <input type="text" name="registrationpassword" value ="xyz123" >
     
     <input type="submit" name="registrationForm" value="Register"> <!--SUBMIT Button 3 -->
   </form>
  </fieldset>
  

</body>
</html>

フォーム

ログイン-> loginFormをクリックすると

Save-> saveFormをクリックすると

登録->登録フォームをクリックすると

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.