HTML 양식의 여러 제출 버튼
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있지만 NextHTML 구조에서 가장 먼저 나타납니다.
.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 the previous page
ElseIf Request.Form("submitButton") = "Next Page" Then
' Code for the next page
End If
참조 : 단일 양식에서 여러 제출 단추 사용
첫 번째 버튼이 기본적으로 사용된다는 사실이 브라우저에서 일관성이 있다면, 소스 코드에서 올바른 방법으로 놓은 다음 CSS를 사용하여 명백한 위치를 전환하십시오.
float 예를 들어 왼쪽과 오른쪽으로 시각적으로 전환합니다.
때때로 @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>
설치 대화 상자처럼 작동하게하려면 "다음"버튼 OnLoad에 초점을 두십시오.
이렇게하면 사용자가 Return에 도달하면 양식이 제출되어 전달됩니다. 그들이 돌아가려면 Tab버튼을 누르 거나 클릭하십시오.
CSS로 할 수 있습니다.
와 마크 업에 버튼을 넣어 Next다음, 첫번째 버튼 Prev후 버튼을 누릅니다.
그런 다음 CSS를 사용하여 원하는 방식으로 CSS를 배치하십시오.
순수한 HTML로는이 작업을 수행 할 수 없습니다. 이 트릭에는 JavaScript를 사용해야합니다.
그러나 HTML 페이지에 두 개의 양식을 배치하면이 작업을 수행 할 수 있습니다.
Form1에는 이전 버튼이 있습니다.
Form2에는 사용자 입력 + 다음 버튼이 있습니다.
사용자 Enter가 Form2를 누르면 다음 제출 단추가 시작됩니다.
JavaScript를 사용하여 양식을 제출합니다. 이 기능은 양식 요소의 OnKeyPress 이벤트에 의해 트리거되며 Enter키가 선택 되었는지 여부를 감지합니다 . 이 경우 양식을 제출합니다.
이 작업을 수행하는 방법을 설명하는 두 페이지가 있습니다. 1 , 2 . 이를 바탕으로 사용 예는 다음과 같습니다 ( here 기반 ).
<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)" />
대부분의 브라우저에서 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 및 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를 사용하면 이전 페이지가 작동하지 않습니다.
뒤로 버튼은 여전히 작동합니다!
한 페이지에 여러 개의 활성 버튼이 있으면 다음과 같이 할 수 있습니다.
Enter키 누르기시 트리거하려는 첫 번째 단추를 양식의 기본 단추로 표시하십시오. 두 번째 버튼 Backspace은 키보드 의 버튼에 연결합니다 . BackspaceEVENTCODE는 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 코드에서 제출 버튼 뒤에 뒤로 버튼을 두지 만 왼쪽으로 플로팅하여 제출 버튼 앞에 페이지에 표시되도록하는 것입니다.
또 다른 간단한 옵션은 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
처음 으로이 문제를 제기했을 때 선택의 단순성으로 이전 / 다음이 아닌 경우 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
}
문자열 구문 분석을 피하기 위해 숫자 연산 코드를 사용하여 이것을 약간 강화할 수도 있지만 열거 형으로 재생하지 않으면 코드를 읽기 어렵고 수정 가능하며 자체 문서화 할 수 없으며 구문 분석은 간단합니다.
에서 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>
이것이 내가 시도한 것입니다.
- 버튼에 다른 이름을 지정해야합니다
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();
}
ASP 버튼에는 UseSubmitBehavior제출하는 작업을 설정할 수 있는 속성이 있음을 알았을 때 기본적으로 ASP.NET 컨트롤에서만 기본적으로 동일한 것에 대한 답을 찾으려고 할 때이 질문을 보았습니다.
<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');
}
});
이 시도..!
<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>이런 식으로 매우 비슷한 문제를 해결했습니다.
JavaScript가 활성화 된 경우 (대부분의 경우 현재) 제출 단추는 JavaScript (jQuery)를 통해 페이지로드시 단추로 "성능이 저하됩니다 ". " 저하 된 "버튼 유형 버튼 의 클릭 이벤트 도 JavaScript를 통해 처리됩니다.
JavaScript가 활성화되어 있지 않으면 양식은 여러 제출 버튼으로 브라우저에 제공됩니다. 타격이 경우 EnterA의
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>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
참고 URL : https://stackoverflow.com/questions/48/multiple-submit-buttons-in-an-html-form
'Programing' 카테고리의 다른 글
| MySQL에서 잠금 대기 시간 초과를 디버깅하는 방법은 무엇입니까? (0) | 2020.04.05 |
|---|---|
| Android에서 원형 ImageView를 만드는 방법은 무엇입니까? (0) | 2020.04.05 |
| 일치하는 함수 포인터를 호출하기 위해 튜플 "풀기" (0) | 2020.04.05 |
| SortedList와 SortedDictionary의 차이점은 무엇입니까? (0) | 2020.04.05 |
| 파이썬 들여 쓰기를 수정하는 방법 (0) | 2020.04.05 |