jQuery: 양식 제출 시 어떤 버튼을 클릭했는지 확인하는 방법은 무엇입니까?
나는 있습니다.submit()양식 제출을 위해 설정된 이벤트입니다.또한 페이지에는 여러 양식이 있지만, 이 예에서는 하나만 있습니다.어떤 제출 버튼을 적용하지 않고 클릭했는지 알고 싶습니다..click()각 이벤트에 대한 이벤트.
설정은 다음과 같습니다.
<html>
<head>
<title>jQuery research: forms</title>
<script type='text/javascript' src='../jquery-1.5.2.min.js'></script>
<script type='text/javascript' language='javascript'>
$(document).ready(function(){
$('form[name="testform"]').submit( function(event){ process_form_submission(event); } );
});
function process_form_submission( event ) {
event.preventDefault();
//var target = $(event.target);
var me = event.currentTarget;
var data = me.data.value;
var which_button = '?'; // <-- this is what I want to know
alert( 'data: ' + data + ', button: ' + which_button );
}
</script>
</head>
<body>
<h2>Here's my form:</h2>
<form action='nothing' method='post' name='testform'>
<input type='hidden' name='data' value='blahdatayadda' />
<input type='submit' name='name1' value='value1' />
<input type='submit' name='name2' value='value2' />
</form>
</body>
</html>
각 버튼에 .click() 이벤트를 적용하는 것 외에 어떤 제출 버튼을 클릭했는지 확인할 수 있는 방법이 있습니까?
저는 같은 질문을 했습니다.양식 제출 이벤트에서 제출 원인이 된 버튼은 어떻게 받을 수 있습니까?
저는 결국 이 해결책을 생각해냈고 그것은 꽤 잘 작동했습니다.
$(document).ready(function() {
$("form").submit(function() {
var val = $("input[type=submit][clicked=true]").val();
// DO WORK
});
$("form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
양식이 여러 개인 경우 이를 약간 수정해야 할 수 있지만 여전히 적용되어야 합니다.
저는 이것이 효과가 있다는 것을 발견했습니다.
$(document).ready(function() {
$( "form" ).submit(function () {
// Get the submit button element
var btn = $(this).find("input[type=submit]:focus" );
});
}
이것은 나에게 도움이 됩니다.
$("form").submit(function() {
// Print the value of the button that was clicked
console.log($(document.activeElement).val());
}
양식을 제출할 때:
document.activeElement클릭한 제출 단추가 나타납니다.document.activeElement.getAttribute('value')그 버튼의 가치를 알려줄 겁니다
키를 눌러 양식을 제출한 경우,document.activeElement어떤 형태든 될 것입니다.input그 당시에 집중되어 있었습니다.제출 단추가 아닌 경우에는 "클릭된 단추"가 없을 수 있습니다.
원주민 재산이 있고,submitter인터페이스에서.
표준 웹 API:
var btnClicked = event.submitter;
jQuery:
var btnClicked = event.originalEvent.submitter;
제 목적에 더 적합해 보이는 접근법이 있습니다.
첫째, 모든 형식에 대해:
$('form').click(function(event) {
$(this).data('clicked',$(event.target))
});
양식에 대해 이 클릭 이벤트가 실행되면 나중에 액세스할 원래 대상(이벤트 개체에서 사용 가능)을 기록합니다.이것은 꽤 광범위한 획으로, 양식의 아무 곳에서나 클릭할 수 있습니다.최적화에 대한 의견은 환영할 만하지만, 결코 눈에 띄는 문제를 일으키지 않을 것이라고 생각합니다.
에 면러그로$('form').submit()와 같은 것으로 조회할 수 .
if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();
와우, 몇몇 해결책들은 복잡해질 수 있습니다!단순 글로벌을 사용해도 괜찮다면 입력 버튼 클릭 이벤트가 먼저 실행된다는 점을 활용하십시오.$('#myForm input')을 사용하여 여러 양식 중 하나에 대한 $('input') 선택기를 추가로 필터링할 수 있습니다.
$(document).ready(function(){
var clkBtn = "";
$('input[type="submit"]').click(function(evt) {
clkBtn = evt.target.id;
});
$("#myForm").submit(function(evt) {
var btnID = clkBtn;
alert("form submitted; button id=" + btnID);
});
});
가장 좋은 해결책은
$(document.activeElement).attr('id')
이것은 입력뿐만 아니라 버튼 태그에서도 작동합니다.또한 버튼의 ID도 가져옵니다.
다른 가능한 해결책은 양식에 숨겨진 필드를 추가하는 것입니다.
<input type="hidden" id="btaction"/>
그런 다음 Ready(준비) 기능에 어떤 키를 눌렀는지 기록하는 기능을 추가합니다.
$('form#myForm #btnSubmit').click(function() {
$('form#myForm #btaction').val(0);
});
$('form#myForm #btnSubmitAndSend').click(function() {
$('form#myForm #btaction').val(1);
});
$('form#myForm #btnDelete').click(function() {
$('form#myForm #btaction').val(2);
});
이제 양식 제출 처리기에서 숨겨진 변수를 읽고 이를 기반으로 결정합니다.
var act = $('form#myForm #btaction').val();
스탠과 yannh가 한 일을 기반으로 하지만 이것은 기본적으로 첫 번째 버튼입니다.이 전체적인 접근 방식의 장점은 버튼에 초점이 맞춰져 있지 않은 경우에도 클릭과 엔터 키를 모두 선택할 수 있다는 것입니다.양식에 입력할 수 있도록 허용해야 하는 경우 버튼이 집중되어 있을 때(즉, Stan의 답변) 이에 응답하십시오.저의 경우, 사용자의 현재 초점이 텍스트 상자에 있더라도 입력이 양식을 제출할 수 있도록 허용하고 싶었습니다.
저도 'id'가 아닌 'name' 속성을 사용하고 있었는데, 이 방법은 동일합니다.
var pressedButtonName =
typeof $(":input[type=submit]:focus")[0] === "undefined" ?
$(":input[type=submit]:first")[0].name :
$(":input[type=submit]:focus")[0].name;
이건 나한테 효과가 있었어요
$('#Form').submit(function(){
var btn= $(this).find("input[type=submit]:focus").val();
alert('you have clicked '+ btn);
}
제 솔루션은 다음과 같습니다.
$('#form').submit(function(e){
console.log($('#'+e.originalEvent.submitter.id));
e.preventDefault();
});
양식을 제출하면 이벤트 개체를 쉽게 얻을 수 있습니다.여기서 제출자 개체를 가져옵니다.아래와 같이:
$(".review-form").submit(function (e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
let submitter_btn = $(e.originalEvent.submitter);
console.log(submitter_btn.attr("name"));
}
이 양식을 백엔드로 보내려는 경우, 새 FormData()로 새 양식 요소를 만들고 버튼을 누른 키-값 쌍을 설정한 다음 백엔드에서 액세스할 수 있습니다.이런 거.
$(".review-form").submit(function (e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
let form = $(this);
let newForm = new FormData($(form)[0]);
let submitter_btn = $(e.originalEvent.submitter);
console.log(submitter_btn.attr("name"));
if ((submitter_btn.attr("name") == "approve_btn") ||
(submitter_btn.attr("name") == "reject_btn")){
newForm.set("action_for", submitter_btn.attr("name"));
} else {
console.log("there is some error!");
return;
}
}
저는 기본적으로 사용자가 작업의 추가 프로세스를 위해 제품을 승인하거나 승인/거부할 수 있는 형태를 갖추려고 했습니다.제 HTML 양식은 다음과 같습니다.
<form method="POST" action="{% url 'tasks:review-task' taskid=product.task_id.id %}"
class="review-form">
{% csrf_token %}
<input type="hidden" name="product_id" value="{{product.product_id}}" />
<input type="hidden" name="task_id" value="{{product.task_id_id}}" />
<button type="submit" name="approve_btn" class="btn btn-link" id="approve-btn">
<i class="fa fa-check" style="color: rgb(63, 245, 63);"></i>
</button>
<button type="submit" name="reject_btn" class="btn btn-link" id="reject-btn">
<i class="fa fa-times" style="color: red;"></i>
</button>
</form>
의심스러운 점이 있으면 저에게 알려주세요.
.click 이벤트를 추가하지 않는 것이 해당 이벤트에 대해 별도의 처리기를 사용하지 않으려는 경우 다음과 같은 한 가지 기능으로 모든 클릭(제출)을 처리할 수 있습니다.
$(document).ready(function(){
$('input[type="submit"]').click( function(event){ process_form_submission(event); } );
});
function process_form_submission( event ) {
event.preventDefault();
//var target = $(event.target);
var input = $(event.currentTarget);
var which_button = event.currentTarget.value;
var data = input.parents("form")[0].data.value;
// var which_button = '?'; // <-- this is what I want to know
alert( 'data: ' + data + ', button: ' + which_button );
}
답변에 수 없기 양식에 된 형식을 하여 첨부)를 .form속성)을 선택합니다.최신 브라우저용입니다. http://caniuse.com/ #filename=form-filename.closest('form')되지 않는 지원지 예경사용다니됩비의 됩니다.form속성
$(document).on('click', '[type=submit]', function() {
var form = $(this).prop('form') || $(this).closest('form')[0];
$(form.elements).filter('[type=submit]').removeAttr('clicked')
$(this).attr('clicked', true);
});
$('form').on('submit', function() {
var submitter = $(this.elements).filter('[clicked]');
})
사용해 보십시오.
$(document).ready(function(){
$('form[name="testform"]').submit( function(event){
// This is the ID of the clicked button
var clicked_button_id = event.originalEvent.submitter.id;
});
});
$("form input[type=submit]").click(function() {
$("<input />")
.attr('type', 'hidden')
.attr('name', $(this).attr('name'))
.attr('value', $(this).attr('value'))
.appendTo(this)
});
숨김 필드 추가
저에게 최고의 솔루션은 다음과 같습니다.
$(form).submit(function(e){
// Get the button that was clicked
var submit = $(this.id).context.activeElement;
// You can get its name like this
alert(submit.name)
// You can get its attributes like this too
alert($(submit).attr('class'))
});
이 우수한 답변을 사용하여 활성 요소(버튼)를 확인하고, 양식에 숨겨진 입력을 추가하고, 제출 처리기 끝에 선택적으로 제거할 수 있습니다.
$('form.form-js').submit(function(event){
var frm = $(this);
var btn = $(document.activeElement);
if(
btn.length &&
frm.has(btn) &&
btn.is('button[type="submit"], input[type="submit"], input[type="image"]') &&
btn.is('[name]')
){
frm.append('<input type="hidden" id="form-js-temp" name="' + btn.attr('name') + '" value="' + btn.val() + '">');
}
// Handle the form submit here
$('#form-js-temp').remove();
});
참고 사항:개인적으로 수업을 추가합니다.form-jsJavaScript를 통해 제출된 모든 양식에 적용됩니다.
Stan 답변과 유사하지만:
- 버튼이 두 개 이상인 경우 첫 번째 버튼만 받아야 합니다. => [0]
- Enter 키를 사용하여 양식을 제출할 수 있는 경우 기본값 => myDefaultButtonId를 관리해야 합니다.
$(document).on('submit', function(event) {
event.preventDefault();
var pressedButtonId =
typeof $(":input[type=submit]:focus")[0] === "undefined" ?
"myDefaultButtonId" :
$(":input[type=submit]:focus")[0].id;
...
}
이것은 제가 사용하는 솔루션이며 매우 잘 작동합니다.
// prevent enter key on some elements to prevent to submit the form
function stopRKey(evt) {
evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
var alloved_enter_on_type = ['textarea'];
if ((evt.keyCode == 13) && ((node.id == "") || ($.inArray(node.type, alloved_enter_on_type) < 0))) {
return false;
}
}
$(document).ready(function() {
document.onkeypress = stopRKey;
// catch the id of submit button and store-it to the form
$("form").each(function() {
var that = $(this);
// define context and reference
/* for each of the submit-inputs - in each of the forms on
the page - assign click and keypress event */
$("input:submit,button", that).bind("click keypress", function(e) {
// store the id of the submit-input on it's enclosing form
that.data("callerid", this.id);
});
});
$("#form1").submit(function(e) {
var origin_id = $(e.target).data("callerid");
alert(origin_id);
e.preventDefault();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form1" name="form1" action="" method="post">
<input type="text" name="text1" />
<input type="submit" id="button1" value="Submit1" name="button1" />
<button type="submit" id="button2" name="button2">
Submit2
</button>
<input type="submit" id="button3" value="Submit3" name="button3" />
</form>활성 단추를 가져오는 데 사용할 수 있습니다.
var val = document.activeElement.textContent;
https://stackoverflow.com/a/17805011/1029257 에 도움이 되었습니다.
제출 단추를 누른 후에만 제출된 양식입니다.
var theBtn = $(':focus');
if(theBtn.is(':submit'))
{
// ....
return true;
}
return false;
는 jQuery jQuery를 사용할 수 .originalEvent.submitterASP는 Chrome입니다.NetCore »:
내 .cshtml 양식:
<div class="form-group" id="buttons_grp">
<button type="submit" name="submitButton" value="Approve" class="btn btn-success">Approve</button>
<button type="submit" name="submitButton" value="Reject" class="btn btn-danger">Reject</button>
<button type="submit" name="submitButton" value="Save" class="btn btn-primary">Save</button>
...
jQuery 제출 처리기:
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
$(document).ready(function() {
...
// Ensure that we log an explanatory comment if "Reject"
$('#update_task_form').on('submit', function (e) {
let text = e.originalEvent.submitter.textContent;
if (text == "Reject") {
// Do stuff...
}
});
...
jQuery Microsoft가 내 ASP와 함께 번들로 제공했습니다.NetCore 환경은 v3.3.1입니다.
다음과 같은 "제출" 버튼이 있다고 가정해 보겠습니다.
<button type="submit" name="submitButton" id="update" value="UpdateRecord" class="btn btn-primary">Update Record</button>
<button type="submit" name="submitButton" id="review_info" value="ReviewInfo" class="btn btn-warning sme_only">Review Info</button>
<button type="submit" name="submitButton" id="need_more_info" value="NeedMoreInfo" class="btn btn-warning sme_only">Need More Info</button>
이 "제출" 이벤트 핸들러는 다음과 같습니다.
$('#my_form').on('submit', function (e) {
let x1 = $(this).find("input[type=submit]:focus");
let x2 = e.originalEvent.submitter.textContent;
두 표현식 모두 작동합니다. 번째 버튼을 하면 ""x1"과 "x2"가 반환됩니다.Update Record.
, 은 꽤합니다: 저는또해한만을고, 그은꽤잘니다작합.
와 CSSjQuery를합니다.
먼저 빠른 CSS 클래스를 만들었는데, 이것은 내장되거나 별도의 파일에 포함될 수 있습니다.
<style type='text/css'>
.Clicked {
/*No Attributes*/
}
</style>
다음으로 양식 내 버튼 클릭 이벤트에서 CSS 클래스를 버튼에 추가합니다.만약 버튼에 이미 CSS 클래스가 있다면, 그것을 제거하세요. (우리는 두 개의 CSS 클래스를 원하지 않습니다 [만일의 경우].
// Adds a CSS Class to the Button That Has Been Clicked.
$("form :input[type='submit']").click(function ()
{
if ($(this).hasClass("Clicked"))
{
$(this).removeClass("Clicked");
}
$(this).addClass("Clicked");
});
이제 버튼에 CSS 클래스가 있는지 테스트합니다. 테스트한 버튼에 CSS가 없으면 다른 버튼도 CSS가 됩니다.
// On Form Submit
$("form").submit(function ()
{
// Test Which Button Has the Class
if ($("input[name='name1']").hasClass("Clicked"))
{
// Button 'name1' has been clicked.
}
else
{
// Button 'name2' has been clicked.
}
});
이것이 도움이 되길 바랍니다!건배!
버튼 ID 정보의 홀더로 입력 유형="숨김"을 생성할 수 있습니다.
<input type="hidden" name="button" id="button">
<input type="submit" onClick="document.form_name.button.value = 1;" value="Do something" name="do_something">
이 경우 양식은 제출 시 값 "1"(버튼의 ID)을 전달합니다.이것은 제출(?)하기 전에 클릭이 발생한 경우 작동합니다. 항상 사실인지 확실하지 않습니다.
어떤 <버튼> 또는 <입력 유형="버튼"을 구별하는 간단한 방법...>를 누르면 'ID'를 확인할 수 있습니다.
$("button").click(function() {
var id = $(this).attr('id');
...
});
여기 이것을 사용한 샘플이 있습니다.양식을 선택하여 제출할 올바른 양식을 가져오고, 마지막으로 클릭한/초점 요소를 저장할 데이터 필드를 선택합니다.또한 클릭 이벤트가 실행되기 전에 발생하는지 확인하기 위해 타임아웃 내에 제출 코드를 포장했습니다(일부 사용자는 크롬에서 때때로 제출 후 클릭 이벤트가 발생한다고 댓글로 보고했습니다).
RETURN 키에 클릭 이벤트를 보내기 위해 브라우저에 의존하지 않고 키와 마우스/손가락으로 탐색할 때 작동합니다(하지만 아프지는 않습니다), 버튼과 필드에 대한 포커스 이벤트를 위한 이벤트 핸들러를 추가했습니다.
버튼을 클릭하면 자동으로 저장되는 항목에 ="download" 유형의 버튼을 추가할 수 있습니다.
데모에서 빨간색 테두리를 설정하여 선택한 항목을 표시하고 이름과 값/라벨을 표시하는 경고를 표시합니다.
여기 FIDDLE이 있습니다.
다음은 (동일한) 코드입니다.
Javascript:
$("form").submit(function(e) {
e.preventDefault();
// Use this for rare/buggy cases when click event is sent after submit
setTimeout(function() {
var $this=$(this);
var lastFocus = $this.data("lastFocus");
var $defaultSubmit=null;
if(lastFocus) $defaultSubmit=$(lastFocus);
if(!$defaultSubmit || !$defaultSubmit.is("input[type=submit]")) {
// If for some reason we don't have a submit, find one (the first)
$defaultSubmit=$(this).find("input[type=submit]").first();
}
if($defaultSubmit) {
var submitName=$defaultSubmit.attr("name");
var submitLabel=$defaultSubmit.val();
// Just a demo, set hilite and alert
doSomethingWith($defaultSubmit);
setTimeout(function() {alert("Submitted "+submitName+": '"+submitLabel+"'")},1000);
} else {
// There were no submit in the form
}
}.bind(this),0);
});
$("form input").focus(function() {
$(this.form).data("lastFocus", this);
});
$("form input").click(function() {
$(this.form).data("lastFocus", this);
});
// Just a demo, setting hilite
function doSomethingWith($aSelectedEl) {
$aSelectedEl.css({"border":"4px solid red"});
setTimeout(function() { $aSelectedEl.removeAttr("style"); },1000);
}
더미 HTML:
<form>
<input type="text" name="testtextortexttest" value="Whatever you write, sir."/>
<input type="text" name="moretesttextormoretexttest" value="Whatever you write, again, sir."/>
<input type="submit" name="test1" value="Action 1"/>
<input type="submit" name="test2" value="Action 2"/>
<input type="submit" name="test3" value="Action 3"/>
<input type="submit" name="test4" value="Action 4"/>
<input type="submit" name="test5" value="Action 5"/>
</form>
덤 CSS:
input {display:block}
나는 나에게 도움이 되는 이 기능을 씁니다.
var PupulateFormData= function (elem) {
var arr = {};
$(elem).find("input[name],select[name],button[name]:focus,input[type='submit']:focus").each(function () {
arr[$(this).attr("name")] = $(this).val();
});
return arr;
};
그런 다음 사용
var data= PupulateFormData($("form"));
언급URL : https://stackoverflow.com/questions/5721724/jquery-how-to-get-which-button-was-clicked-upon-form-submission
'your programing' 카테고리의 다른 글
| WCF: 시스템.Net.SocketException - 각 소켓 주소(프로토콜/네트워크 주소/포트)는 일반적으로 하나만 사용할 수 있습니다. (0) | 2023.08.30 |
|---|---|
| VBA(Excel)에서 Bash 스크립트를 호출하는 방법 (0) | 2023.08.30 |
| 오라클의 다른 스키마에서 데이터 선택 (0) | 2023.08.30 |
| Python의 파일에서 문자 읽기 (0) | 2023.08.30 |
| pkg-config 검색 경로에서 패키지 카이로를 찾을 수 없습니다.노드 j.s 설치 캔버스 문제 (0) | 2023.08.10 |