HTML 양식의 여러 제출 버튼

08-06-2019
|

문제

HTML 형식으로 마법사를 생성한다고 가정해 보겠습니다.하나의 버튼은 뒤로 가고 하나는 앞으로갑니다.이후 뒤쪽에 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

참조: 단일 양식에 여러 제출 버튼 사용

첫 번째 버튼이 기본적으로 사용된다는 사실이 브라우저 전반에 걸쳐 일관된다면 소스 코드에 올바른 방향으로 배치한 다음 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>

Kevin, 이것은 순수한 HTML로는 할 수 없습니다.이 트릭을 위해서는 JavaScript를 사용해야 합니다.

그러나 HTML 페이지에 두 개의 양식을 배치하면 이를 수행할 수 있습니다.

Form1에는 이전 버튼이 있습니다.

Form2에는 사용자 입력 + 다음 버튼이 있습니다.

사용자가 누를 때 입력하다 Form2에서는 다음 제출 버튼이 실행됩니다.

CSS로 할 수 있습니다.

마크업에 버튼을 넣으세요. Next 버튼을 먼저 누른 다음 Prev 나중에 버튼을 누르세요.

그런 다음 CSS를 사용하여 원하는 방식으로 표시되도록 배치합니다.

양식을 제출하려면 Javascript를 사용하겠습니다.이 함수는 양식 요소의 OnKeyPress 이벤트에 의해 트리거되고 Enter 키가 선택되었는지 감지합니다.이 경우 양식을 제출합니다.

다음은 이를 수행하는 방법에 대한 기술을 제공하는 두 페이지입니다. 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)" />

케빈,

이는 대부분의 브라우저에서 자바스크립트나 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가 문제입니다.

이 버전은 자바스크립트가 켜져 있을 때 작동합니다.

<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를 사용하면 이전 페이지가 작동하지 않습니다.
뒤로 버튼은 여전히 작동합니다!

한 페이지에 여러 개의 활성 버튼이 있는 경우 다음과 같이 할 수 있습니다.

트리거할 첫 번째 버튼을 표시하세요. 입력하다 양식의 기본 버튼으로 키를 누르십시오.두 번째 버튼의 경우 역행 키이 키보드의 버튼. 역행 키이 이벤트 코드는 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>

도움이 되었기를 바랍니다.

이 작업을 수행하려면 탭 순서를 변경하는 것만으로도 충분합니다.간단하게 유지하세요.

또 다른 간단한 옵션은 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
}

문자열 구문 분석을 피하기 위해 숫자 연산 코드를 사용하여 이를 약간 강화할 수도 있지만 Enum을 사용하지 않으면 코드 읽기, 수정 가능, 자체 문서화가 어렵고 구문 분석이 쉽지 않습니다.

이것이 내가 시도한 것입니다:1.버튼에 다른 이름을 제공해야합니다.두 버튼 중 하나를 클릭하면 필요한 작업을 수행하는 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 (제이쿼리)."에서 이벤트를 클릭합니다.타락한" 버튼 유형 버튼은 다음을 통해서도 처리됩니다. 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