주석 - HTML 양식의 여러 제출 버튼




html 주석 (16)

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 를 사용해야합니까?


ASP 버튼에는 제출하는 것을 설정할 수있는 UseSubmitBehavior 라는 속성이 있음을 알았을 때 기본적으로 ASP.NET 컨트롤에서만 기본적으로 동일한 것에 대한 답을 찾으려 할 때이 질문을 UseSubmitBehavior .

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

누군가가 ASP.NET 버튼 방식을 찾고있는 경우를 대비하여.


CSS로 할 수 있습니다.

먼저 Next 버튼을 사용하여 마크 업에 버튼을 넣은 다음, Prev 버튼을 클릭하십시오.

그런 다음 CSS를 사용하여 원하는 방식으로 CSS를 배치하십시오.


JavaScript를 사용하여 양식을 제출합니다. 이 기능은 양식 요소의 OnKeyPress 이벤트에 의해 트리거되며 Enter 키가 선택되었는지 여부를 감지합니다. 이 경우 양식을 제출합니다.

이 작업을 수행하는 방법을 설명하는 두 페이지가 있습니다. 1 , 2 . 이를 바탕으로 사용 예는 다음과 같습니다 ( 1 기반).

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

당신이 준 예제를 사용하여 :

<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

때로는 @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 코드에서 제출 버튼 뒤에 뒤로 버튼을 두지 만 왼쪽으로 플로팅하여 제출 버튼 앞에있는 페이지에 표시하는 것입니다.

이를 위해 탭 순서를 변경하면됩니다. 간단하게 유지하십시오.


순수한 HTML로는이 작업을 수행 할 수 없습니다. 이 트릭에는 JavaScript를 사용해야합니다.

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

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

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

사용자가 Form2에서 Enter 를 누르면 다음 제출 단추가 실행됩니다.


이 시도..!

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


이게 도움이 되길 바란다. 버튼을 오른쪽으로 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" 됩니다.


이런 식으로 매우 비슷한 문제를 해결했습니다.

  1. JavaScript가 활성화 된 경우 (대부분의 경우 현재) 제출 단추는 JavaScript (jQuery)를 통해 페이지를로드 할 때 단추로 "성능이 저하됩니다 ". " 저하 된 "버튼 유형 버튼의 클릭 이벤트도 JavaScript를 통해 처리됩니다.

  2. JavaScript가 활성화되어 있지 않으면 양식은 여러 제출 버튼으로 브라우저에 제공됩니다. 이 경우 양식 내의 textfield 에서 Enter 를 누르면 의도 된 default 대신 첫 번째 버튼으로 양식을 제출하지만 최소한 양식을 계속 사용할 수 있습니다. 이전 다음 버튼으로 제출할 수 있습니다.

작업 예 :

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


이전 버튼 유형을 다음과 같은 버튼으로 변경하십시오.

<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를 누르고 요청 이 서버로 이동하면 양식 name/value 쌍의 콜렉션이 포함 된 서버 측 코드에서 submitButton 의 값을 확인할 수 있습니다. 예를 들어 ASP Classic 에서

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

참조 : 단일 양식에서 여러 제출 단추 사용


첫 번째 버튼이 기본적으로 사용된다는 사실이 여러 브라우저에서 일관된 경우 소스 코드에서 올바른 방법으로 배치 한 다음 CSS를 사용하여 명백한 위치를 전환하십시오.

예를 들어 좌우로 float 하여 시각적으로 전환합니다.


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

Enter 키 누르기에서 트리거하려는 첫 번째 단추를 양식의 기본 단추로 표시하십시오. 두 번째 버튼의 경우 키보드의 백 스페이스 버튼에 연결합니다. 백 스페이스 이벤트 코드는 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>


Tabindex 를 사용하여이 문제를 해결할 수 있습니다. 또한 버튼 순서를 변경하는 것이 더 효율적인 방법입니다.

단추의 순서를 변경하고 float 값을 추가하여 HTML 보기에 표시 할 원하는 위치를 지정하십시오.


<input type="submit" name="perv" 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




submit-button