한 형태의 제출 버튼 2 개


534

양식에 두 개의 제출 단추가 있습니다. 어느 것이 서버 측에 충돌했는지 어떻게 알 수 있습니까?


허용 된 답변을 Parrots의 답변으로 변경하는 것을 고려하십시오 .
피터 모텐슨

2
@PeterMortensen-오늘날까지 가장 좋은 대답은 아닙니다. attribute를 사용하는 최신 HTML5 솔루션에 대한 Leo의 답변 을 참조하십시오 formaction. 또는 사용자에게 HTML을 표시하는 방법이 브라우저에 전송 된 값과 독립적으로 작동하는 방법에 대한 kiril의 답변 을 참조하십시오 . 국제화 문제를 Greg 또는 Parrot의 답변보다 코드화하기 쉬운 방법으로 해결합니다.
ToolmakerSteve

답변:


446

각각 이름을 지정하면 클릭 한 이름이 다른 입력으로 전송됩니다.

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

101
또한 버튼 이름이 올바른 이름인지 확인하십시오! 예를 들어 "button-1"은 작동하지 않습니다. 많은 번거 로움을 덜 수 있으므로 이것을 명심하십시오.
pdolinaj

22
일반적으로 양식의 모든 입력은 양식과 함께 전송됩니다. 버튼의 값은 클릭 한 경우에만 제출되므로 미리 정의 된 이름에 대한 양식 값을 검색해야합니다. 다른 값으로 동일한 이름을 부여 하는 다른 대답 ( stackoverflow.com/a/21778226/88409 )이 더 합리적이라고 생각합니다. 그런 다음 알려진 단일 양식 필드 이름으로 값을 가져옵니다. 또한 라디오 버튼의 작동 방식 (같은 이름, 다른 값)과 같이 주어진 입력 이름에 대해 하나의 값 (클릭 한 값) 만 전송된다는 것이 더 분명합니다.
Triynko

6
@Triynko는 Robin Green이 그 답변에 대한 의견에서 말했듯이 국제화에 더 좋습니다. 예를 들어, 페이지가 스페인어로 렌더링 된 경우 버튼의 텍스트가 다를 수 있습니다. 따라서 코드의 논리를 해당 버튼의 텍스트에 의존하게하면이 경우 중단됩니다. 이름으로가는 것은 사용자에게 표시되지 않는 값이므로 "개인"변수로 취급 할 수 있고 사용자에게는 메시지로 취급 할 수 없으므로 더 안전합니다.
sfarbota

@sfarbota의 의견을 명확히하려면 : Parrot의 답변에 표시된 첫 번째 해결책은 사용자가 볼 수있는 값 을 테스트하는 데 의존하기 때문에 문제가됩니다 . 사용자가 볼 수있는 단어를 변경할 때 깨지는 코드는 "취약한"것으로 간주됩니다. 패럿의 대답에 도시 용액을 미세 - 그것은 이것과 동일하다. Parrot의 두 번째 솔루션은 또한 해당 코드를 작성하여 표시하므로이 코드보다 유용한 답변입니다.
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
국제화를 위해이 선택한 답변을 사용하는 것이 좋습니다 수 있습니다.
로빈 그린

11
대답 자체 @LaszloPapp은 위에서 선택한 답변을 사용하는 경우, 당신은 논리에 영향을주지 않고 (즉, 다른 언어 또는 방언으로 번역) 양식을 국제화 할 수 말했다. 이 대답에 첫 번째 옵션을 사용하는 경우, 논리는 형태가 실제로 제시되는 언어에 따라 달라집니다.
로빈 그린

1
@RobinGreen : 대부분의 사람들이 두 번째 논리를 사용할 것이라고 생각합니까?
lpapp

5
i18n = 국제화, 그리고 18은 첫 글자와 마지막 글자 사이의 18 글자를 나타냅니다.
Buttle Butkus

18
OP는 PHP를 요구하지 않았습니다.
Rudey

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
브라우저 동작은 분명히 다릅니다. 일부는 value 속성을 제출하고 다른 일부는 태그 사이의 문자열을 제출합니다.
Jeroen Dierckx

1
제공된 스 니펫이 완벽하게 지원되는 것 같습니다 ( w3schools.com/tags/att_button_type.asp )
kiril

2
해당 링크에서 스 니펫을 @kiril하면 두 가지 유형이 있습니다 <button>: submitreset. 참고 reset아무것도 제출하지 않는, 그냥 양식을 재설정합니다. 따라서 Jeroen의 주장은 여전히 ​​남아 있습니다.
fizruk 2018

7
그래, 네 권리 그런 다음 HTML5 W3C 작업 초안을 확인했습니다. 인용 : >> value 속성은 양식 제출 목적으로 요소의 값을 제공합니다. 요소의 값은 요소의 값 속성 (있는 경우)이거나 비어있는 문자열입니다. >> 참고 : 버튼 (및 그 값)은 버튼 자체가 양식 제출을 시작하는 데 사용 된 경우에만 양식 제출에 포함됩니다.
kiril

8
@ 제로 엔 불. 어떤 브라우저가 태그 사이에 텍스트를 제출합니까? 입력 또는 버튼은 'value'속성 만 제출해야합니다. 버튼은 말 그대로 이미지 나 다른 HTML 태그를 포함하여 태그 사이에 아무 것도 가질 수 있습니다. 그것은 입력 요소 위에 버튼을 사용하는 요점이며 브라우저가 모든 내용을 값으로 덤프 할 것을 제안하려고합니까? 절대 안돼.
Triynko

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 속성 참조 ).

개인적으로 저는 일반적으로이 접근 방식을 백업으로 사용하여 Javascript를 사용하여 (빠른 인식 피드백을 위해) 원격으로 양식을 제출합니다. 둘 사이에서 다루지 않은 유일한 사람들은 Javascript가 비활성화 된 IE <9입니다.

물론, 어떤 버튼을 눌렀는지에 관계없이 기본적으로 동일한 작업을 서버 측에서 수행하는 경우 부적절 할 수 있지만 종종 사용 가능한 두 개의 사용자 측 작업이있는 경우 두 개의 서버 측 작업에도 매핑됩니다.

편집 : 주석에서 Pascal_dher가 지적한 것처럼이 속성은 <input>태그 에서도 사용할 수 있습니다.


1
"입력"태그에도 사용할 수 있습니다. w3schools로
인코딩

3
나는 12 년 동안 웹 개발자였으며 ​​이것은 나에게 새로운 것이었고 실제로 내가 실제로 필요한 것입니다. 감사!
KyleFarris

1
@KyleFarris를 환영합니다! 나는 이것이 최근에야 가능해 졌다고 믿기 때문에 아직 그것을 만나지 않았다면 놀라지 않을 것이다.
Leo

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 테스트 목적입니다.
Etienne Martin

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>

2
이것은 Leo의 이전 답변 과 비슷합니다 .
ToolmakerSteve

@ToolmakerSteve - 그러나 사용자는 한 upvoted . 골라보세요!!
user12379095

21
<form>
    <input type="submit" value="Submit to a" formaction="/submit/a">
    <input type="submit" value="submit to b" formaction="/submit/b">    
</form>

HTML5 기능. 최신 웹 브라우저에서 완벽하게 작동합니다. 감사합니다!
Stephane Lallemagne

1
참고 : 이것은 태그가 아닌 태그를 사용한다는 점을 제외하면 Leo의 이전 답변 과 동일한 것으로 보입니다 . inputbutton
ToolmakerSteve

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 년에 효과가 있었지만이 모든 상향식 답변을 테스트했으며 아무도 브라우저에서 작동하지 않습니다.

내가 찾은 유일한 해결책은 이것입니다 : (그러나 사용하기에는 약간 추악합니다)

<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"않습니까? 자바 스크립트가 필요하지 않습니다.
rybo111

3
@ rybo111 IE9 브라우저 (스위치는 비교적 널리 사용됨)는 지원하지 않습니다formaction
clueless007

1
@inaliaghle 사용자의 약 1 % 인 True는 프로젝트의 대상에 따라 다릅니다. 사용자의 약 1 %가 JavaScript를 사용하지 않습니다.
rybo111

1
미래 독자들을 위해 :이 답변에서와 같이 자바 스크립트를 사용하는 데 아무런 문제가 없습니다. 유용한 기술입니다. OTOH는 더 많이 찬성 한 답변도 잘 작동합니다.이 답변의 주요 문장을 무시하십시오. 어떤 이유로 든 다른 답변을 얻을 수 없다면 완전한 코드를 SO 질문으로 게시하고 무슨 일이 일어나는지 설명하십시오.
ToolmakerSteve

6

정의 namearray.

<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(및 / 또는 잘못 입력 한 것 등)
기네스 Llewelyn

또한 @Pato 는 아마도 더 관용적 인 비슷한 대답 을 추가 했지만 귀하의 답변 은 훌륭합니다!
Gwyneth Llewelyn

1
@GwynethLlewelyn 나는 다른 답변을 보지 못했거나 내 자신을 쓸 때 알지 못했습니다. 실제로 동일하지만 이는 대부분의 사람들이이 논리를 선호하는 방식을 강조합니다. 차이점은 의미상의 이유, 신인에 대한 좋은 이해 또는 그것으로 시작하기를 좋아하는 사람의 이름과 같습니다.
Thielicious

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

3
반드시 양식의 메소드가 "POST"인 경우 GET 배열에 표시되지 않습니다. 대부분의 양식은 POST를 통해 제출됩니다.
앵무새

2
기술적으로 옳지 만 잘못되었습니다. method = "GET"을 사용하여 양식을 제출할 수 있지만 매우 유용합니다.
Bill the Lizard

4
부적절하게 사용하는 경우에만 "cringeworthy"입니다 : w3.org/2001/tag/doc/whenToUseGet.html .
mercator

2
그래, GET을 제안하려고하지 않았고, 그냥 물건을 일반화하려고했다.
존 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']형식으로 하나의 요소 만있는 배열입니다 [ 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라는 것이 더 분명하도록 편집했습니다.
Pato

잘 했어! 네, 동의합니다. 지금은 더 분명합니다. 나는 아직도 귀하의 답변이 @Thielicious의 답변보다 조금 더 낫다고 믿습니다 (특히 버튼이 많은 경우 더 효율적일 수도 있습니다).
Gwyneth Llewelyn

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경로 아래의 컨트롤러에서는 작동하지 않습니다 .
Xavi Montero

따라서, "
Get

3
동의하지 GET않아서 죄송하지만 항상 적합하지는 않습니다. "모델 상태를 수정"하는 경우 브라우저를 새로 고치면 동일한 요청이 두 번 투명하게 전송 될 수 있으므로를 사용 해서는 안됩니다GET . GET사물을 "보고" POST상태 변경 요청 (추가, 제거, 편집 등)을 보내는 데만 사용하십시오 . 그런 다음 POST컨트롤러 작업에서 상태 (데이터베이스, sesion ...)를 GET변경하고 새로운 변경 상태 를 나타내는 리디렉션 응답을 캐스팅하십시오 . 이렇게 GET모델 상태 변경에 대한 매우 지저분하고 좋은 코더 때문에 피해야한다. 그렇게 말해서 미안합니다. 깨끗한 코드 규칙.
Xavi Montero

진실. 그러나 더러운 연주는 때때로 깨끗할 수 있습니다. 정확히 무엇을하고 있는지에 따라 다릅니다. 개인적으로는 가져 오기에 대한 삭제 및 편집 요청을 매핑하지 않지만 이미 삭제되었는지 확인하거나 사용자에게 권한이 있는지 확인하는 등 작동시키는 방법이 있습니다.
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을 클릭하면

저장-> saveForm을 클릭하면

등록-> registrationForm을 클릭하면

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.