양식 제출 이벤트에서 제출 원인이 된 버튼은 어떻게 받을 수 있습니까?
양식을 제출하도록 트리거한 제출 단추의 값을 찾으려고 합니다.
$("form").submit(function() {
});
각 버튼에 대해 $("input[type=filename])."클릭 이벤트를 실행하고 일부 변수를 설정할 수 있지만, 제출 시 양식에서 단추를 빼는 것보다 더 우아하지 않은 것 같습니다.
는 활했습다를 이용했습니다.document.activeElement다음 답변에서 개략적으로 설명한 바와 같이:jQuery를 사용하여 초점 요소를 얻는 방법은 무엇입니까?
$form.on('submit', function() {
var $btn = $(document.activeElement);
if (
/* there is an activeElement at all */
$btn.length &&
/* it's a child of the form */
$form.has($btn) &&
/* it's really a submit element */
$btn.is('button[type="submit"], input[type="submit"], input[type="image"]') &&
/* it has a "name" attribute */
$btn.is('[name]')
) {
console.log("Seems, that this element was clicked:", $btn);
/* access $btn.attr("name") and $btn.val() for data */
}
});
버튼을 클릭하면 항상 초점이 맞춰진다는 점을 이용합니다.만약 당신이 한다면, 이것은 작동하지 않습니다.blur()클릭 직후에.
@도인은 또 다른 결점을 발견했습니다.사용자가 다음을 통해 양식을 제출하는 경우enter에서, 트필에서드텍스,,document.activeElement설정되지 않았습니다.당신은 이것을 스스로 조심해야 할 것입니다, 처리함으로써.keypress의 input[type="text"]그와 유사합니다.
2017-01 업데이트: 하이퍼폼을 사용하지 않기로 선택했습니다.activeElement하지만 모든 사건을 포착하기 위해 양식 제출로 이어집니다.이것의 코드는 Github에 있습니다.
하이퍼폼을 사용하는 경우 제출을 트리거한 버튼에 액세스하는 방법은 다음과 같습니다.
$(form).on('submit', function(event) {
var button = event.submittedVia;
});
저는 이것을 구현했고 그것이 될 것이라고 생각합니다.
$(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");
});
답변 감사합니다만, 이것은 매우 우아하지는 않습니다...
이제 표준이 있습니다.submitter속성을 입력합니다.
Firefox 75 및 Chrome/Edge 81에서 이미 구현되었습니다!
document.addEventListener('submit',function(e){
console.log(e.submitter)
})
지원하지 않는 브라우저의 경우 이 폴리필 사용
참고: 이전 브라우저를 대상으로 하는 경우 다음과 같은 다른 항목을 입력해야 합니다.closest또는matches제출 이벤트를 추가하기 전에 폴리필이 로드되었는지 확인합니다.
!function(){
var lastBtn = null
document.addEventListener('click',function(e){
if (!e.target.closest) return;
lastBtn = e.target.closest('button, input[type=submit]');
}, true);
document.addEventListener('submit',function(e){
if ('submitter' in e) return;
var canditates = [document.activeElement, lastBtn];
lastBtn = null;
for (var i=0; i < canditates.length; i++) {
var candidate = canditates[i];
if (!candidate) continue;
if (!candidate.form) continue;
if (!candidate.matches('button, input[type=button], input[type=image]')) continue;
e.submitter = candidate;
return;
}
e.submitter = e.target.querySelector('button, input[type=button], input[type=image]')
}, true);
}();
테스트 양식을 만들고 Firebug를 사용하여 값을 얻는 방법을 찾았습니다.
$('form').submit(function(event){
alert(event.originalEvent.explicitOriginalTarget.value);
});
안타깝게도 파이어폭스만 이 이벤트를 지원합니다.
제 목적에 더 적합해 보이는 접근법이 있습니다.
첫째, 모든 형식에 대해:
$('form').click(function(event) {
$(this).data('clicked',$(event.target))
});
양식에 대해 이 클릭 이벤트가 실행되면 나중에 액세스할 원래 대상(이벤트 개체에서 사용 가능)을 기록합니다.이것은 꽤 광범위한 획으로, 양식의 아무 곳에서나 클릭할 수 있습니다.최적화에 대한 의견은 환영할 만하지만, 결코 눈에 띄는 문제를 일으키지 않을 것이라고 생각합니다.
그런 다음 $('form')로 표시합니다.submit »와 같은 것을 사용하여 마지막으로 클릭한 항목을 조회할 수 있습니다.
if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();
이 링크에 따르면 이벤트 개체에 필드가 포함되어 있습니다.Event.target다음 중 하나:
이벤트를 시작한 개체를 나타내는 문자열을 반환합니다.
저는 방금 그 값이 무엇인지 테스트하는 페이지를 만들었는데, 그 표현은 버튼 클릭이 아니라 양식 자체를 위한 것으로 보입니다.즉, Javascript는 클릭한 버튼을 확인할 수 있는 기능을 제공하지 않습니다.
Dave Anderson의 솔루션에 대해서는 사용하기 전에 여러 브라우저에서 테스트하는 것이 좋습니다.잘 될 수도 있지만, 어느 쪽이든 말씀드릴 수 없습니다.
한 가지 깨끗한 방법은 각 양식 버튼에서 클릭 이벤트를 사용하는 것입니다.다음은 저장, 취소 및 삭제 단추가 있는 HTML 양식입니다.
<form name="formname" action="/location/form_action" method="POST">
<input name="note_id" value="some value"/>
<input class="savenote" type="submit" value="Save"/>
<input class="cancelnote" type="submit" value="Cancel"/>
<input class="deletenote" type="submit" value="Delete" />
</form>
다음은 jquery입니다.어떤 버튼을 눌렀는지('저장' 또는 '삭제')에 따라 적절한 '액션'을 동일한 서버 기능으로 보냅니다.'취소'를 클릭하면 페이지를 다시 로드합니다.
$('.savenote').click(function(){
var options = {
data: {'action':'save'}
};
$(this).parent().ajaxSubmit(options);
});
$('.deletenote').click(function(){
var options = {
data: {'action':'delete'}
};
$(this).parent().ajaxSubmit(options);
});
$('.cancelnote').click(function(){
window.location.reload(true);
return false;
});
양식의 SubmitEvent에 대한 Submiter 속성이 있습니다.그러나 현재 Safari에서는 이 기능이 작동하지 않습니다.
<form id="form">
<button value="add" type="submit">Add</button>
<button value="remove" type="submit">Remove</button>
</form>
let form = document.getElementById('form');
form.onsubmit = (event) => {
e.preventDefault();
console.log(e.submitter.type);
}
브라우저 간에 작동하는 다른 접근 방식입니다.은 하만지, 당은의합니다야해존신에 .form요 대신 event으로 에 '합니다. 이 제출 시 할 수 .이렇게 하면 나중에 양식 제출 시 참조할 수 있는 '제출자' 속성이 양식 요소 개체에 기본적으로 추가됩니다.
<form id="form">
<button onclick="this.form.submitter = 'add'" type="submit">Add</button>
<button onclick="this.form.submitter = 'remove'" type="submit">Remove</button>
</form>
let form = document.getElementById('form');
form.onsubmit = (event) => {
e.preventDefault();
console.log(form.submitter);
}
버튼을 수 몇 가지 .name+valuejQuery + AJAX를 사용하여 서버로 전송됩니다.난 그들을 별로 좋아하지 않았어요...
최고 중 하나는 여기에 제시된 헌터의 솔루션이었습니다!
하지만 제가 직접 또 썼습니다.
나는 그것이 좋기 때문에 공유하고 싶고, 내가 필요로 할 때 그것은 ajax(document.ready 이후)를 통해 로드된 양식과도 작동합니다.
$(document).on('click', 'form input[type=submit]', function(){
$('<input type="hidden" />').appendTo($(this).parents('form').first()).attr('name', $(this).attr('name')).attr('value', $(this).attr('value'));
});
간단! 제출 단추를 누르면 숨김 필드가 양식에 추가됩니다. 이 필드는 다음과 같습니다.name그리고.value제출 단추의.
편집: 아래 버전이 읽기 더 쉽습니다.또한 이전에 첨부된 숨겨진 필드를 제거하는 작업을 수행합니다(같은 양식을 두 번 제출하는 경우, AJAX를 사용할 때 완벽하게 가능합니다).
개선된 코드:
$(document).on('click', 'form input[type=submit]', function(){
var name = $(this).attr('name');
if (typeof name == 'undefined') return;
var value = $(this).attr('value');
var $form = $(this).parents('form').first();
var $input = $('<input type="hidden" class="temp-hidden" />').attr('name', name).attr('value', value);
$form.find('input.temp-hidden').remove();
$form.append($input);
});
(이벤트)
function submForm(form,event){
var submitButton;
if(typeof event.explicitOriginalTarget != 'undefined'){ //
submitButton = event.explicitOriginalTarget;
}else if(typeof document.activeElement.value != 'undefined'){ // IE
submitButton = document.activeElement;
};
alert(submitButton.name+' = '+submitButton.value)
}
<form action="" method="post" onSubmit="submForm(this, event); return false;">
제공된 예제 중 일부를 사용해 보았지만 우리의 목적에 맞지 않았습니다.
http://jsfiddle.net/7a8qhofo/1/ 에서 보여드릴 바이올린이 있습니다.
저는 비슷한 문제에 직면했고, 이것이 우리가 우리의 형태로 문제를 해결한 방법입니다.
$(document).ready(function(){
// Set a variable, we will fill later.
var value = null;
// On submit click, set the value
$('input[type="submit"]').click(function(){
value = $(this).val();
});
// On data-type submit click, set the value
$('input[type="submit"][data-type]').click(function(){
value = $(this).data('type');
});
// Use the set value in the submit function
$('form').submit(function (event){
event.preventDefault();
alert(value);
// do whatever you need to with the content
});
});
이벤트 개체에서 제출자 개체 가져오기
양식을 제출하면 이벤트 개체를 쉽게 얻을 수 있습니다.여기서 제출자 개체를 가져옵니다.아래와 같이:
$(".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"));
}
저는 이 답변에서 자세히 설명했습니다: (영어)
의심스러운 점이 있으면 저에게 알려주세요.
이 방법으로 "event.originalEvent"를 사용할 수 있습니다.x" 및 "event.originalEvent".y":
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>test</title>
</head>
<body>
<form id="is_a_form">
<input id="is_a_input_1" type="submit"><br />
<input id="is_a_input_2" type="submit"><br />
<input id="is_a_input_3" type="submit"><br />
<input id="is_a_input_4" type="submit"><br />
<input id="is_a_input_5" type="submit"><br />
</form>
</body>
</html>
<script>
$(function(){
$.fn.extend({
inPosition: function(x, y) {
return this.each(function() {
try{
var offset = $(this).offset();
if ( (x >= offset.left) &&
(x <= (offset.left+$(this).width())) &&
(y >= offset.top) &&
(y <= (offset.top+$(this).height())) )
{
$(this).css("background-color", "red");
}
else
{
$(this).css("background-color", "#d4d0c8");
}
}
catch(ex)
{
}
});
}
});
$("form").submit(function(ev) {
$("input[type='submit']").inPosition(ev.originalEvent.x ,ev.originalEvent.y);
return false;
});
});
</script>
jQuery는 제출 이벤트에 대한 데이터를 제공하지 않는 것 같습니다.당신이 제안한 방법이 최선인 것 같습니다.
다른 어떤 것도 제 요구 사항을 충족시키지 못했기 때문에 다른 해결책일 뿐입니다.클릭 및 키 누름(입력 및 공백)이 감지된다는 장점이 있습니다.
// Detects the Events
var $form = $('form');
$form.on('click keypress', 'button[type="submit"]', function (ev) {
// Get the key (enter, space or mouse) which was pressed.
if (ev.which === 13 || ev.which === 32 || ev.type === 'click') {
// Get the clicked button
var caller = ev.currentTarget;
// Input Validation
if (!($form.valid())) {
return;
}
// Do whatever you want, e.g. ajax...
ev.preventDefault();
$.ajax({
// ...
})
}
}
이것이 저에게 가장 효과적이었습니다.
보다 구체적인 이벤트 처리기와 JQuery를 사용하면 이벤트 개체가 클릭되는 버튼이 됩니다.필요한 경우 이 이벤트에서 위임 양식을 받을 수도 있습니다.
$('form').on('click', 'button', function (e) {
e.preventDefault();
var
$button = $(e.target),
$form = $(e.delegateTarget);
var buttonValue = $button.val();
});
이 문서에는 시작하는 데 필요한 모든 것이 있습니다.JQuery Doc.
나는 나에게 도움이 되는 이 기능을 씁니다.
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"));
폼 요소가 섀도에 있는 웹 구성 요소를 사용하는 작업에서 루트 나는 가져온 모듈을 통해 다음과 같은 방식으로 작동하도록 토바이어스 부쇼르의 우수한 폴리필을 적용했습니다.이 기능은 Edge, Safari, Chrome, Firefox와 같은 일반 클라이언트에서만 호환됩니다.또한, Mikko Rantalainen이 지적한 바와 같이, 이것은 따르지 않습니다 (그리고 우리는 언제든지 업데이트할 수 있습니다) https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-form-submit .
if( !('SubmitEvent' in self && 'submitter' in SubmitEvent.prototype) ){
// polyfill SubmitEvent.submitter (a Safari issue as-of 2021)
// https://developer.mozilla.org/docs/Web/API/SubmitEvent
const submitter = Symbol.for('submitter');
Event[ submitter ] = null;
const submitterSelector = 'input[type=submit], input[type=image], input[type=button], button';
Object.defineProperty(Event.prototype, 'submitter', {
get: function(){
if('submit' === this.type){
let node = Event[ submitter ];
const form = this.target;
if(!node || !form.contains(node)){
node = form.querySelector(submitterSelector);
}
// always return a node, default as though form.submit called
return node || form;
}
return undefined;
},
set: function(value){
if('submit' === this.type){
this.submitter = value;
}
}
});
self.addEventListener('click', function polyfill_SubmitEvent_submitter_click(event){
const node = event.composedPath()[0];
const closest = node.closest?.(submitterSelector) ?? null;
Event[ submitter ] = closest;
}, true);
}
$(document).ready(function() {
$( "form" ).submit(function (event) {
// Get the submit button element
let submit_button = event.handleObj;
//submit button has the object of the use clicked button
});
}다음 HTML 코드의 버튼 ID를 얻을 수 있습니다.
<form id="theForm" action="" method="POST">
<button name="sbtn" id="sbtn" value="Hey button" type="submit">Submit</button>
</form>
다음 JavaScript 사용(.val() 특성 활용):
$('#theForm').on('click', 'button', function (e) {
e.preventDefault();
var
$button = $(e.target),
$form = $(e.delegateTarget);
var buttonValue = $button.val();
});
재쿼리 사용 안 함
submit(e){
console.log(e.nativeEvent.submitter)
}
저는 마침내 질문에 대한 완전하고 쉬운 답을 찾을 수 있었습니다: 양식 제출 이벤트에서 제출을 유발한 버튼을 어떻게 얻을 수 있습니까?
간단한 예를 들어 보겠습니다.
CODE HTML : 양식
<form id="myForm" enctype="multipart/form-data" method="post">
...
all input, select, textarea ...
....
<button id="bt1" value="add" type="submit">Add</button>
<button id="bt2" value="back" type="submit">Back</button>
<button id="bt3" value="remove" type="submit">Remove</button>
<button id="bt4" value="register" type="submit">Register</button>
</form>
CODE JavASCript : 이벤트 수신기 및 액션
var myFctSubmit = function(event){
var myTarget = event.target || event.srcElement;
var myButton = event.originalEvent.submitter;
var balise_form = $(myTarget).attr('id');
var balise_button = $(myButton).attr('id');
//Now you know the button and
//you can apply the script you want...
//here in this exemple :
//balise_form = myForm
//balise_button = {button that you click}
}
$('#myForm').bind('submit',myFctSubmit);
따라서 이 문제에 대한 해결책은 다음 요소를 가져오는 것입니다.
event.originalEvent.submitter
모두 행운을 빕니다.
언급URL : https://stackoverflow.com/questions/2066162/how-can-i-get-the-button-that-caused-the-submit-from-the-form-submit-event
'sourcecode' 카테고리의 다른 글
| C#의 Dapper와 Heidi의 Stored Procedure를 사용하면 null 값을 얻습니다. (0) | 2023.08.31 |
|---|---|
| 스칼라와 마리아를 이용한 간단한 curd rest api (0) | 2023.08.31 |
| TeamCity PowerShell 러너에서 전파할 오류를 표시하려면 어떻게 해야 합니까? (0) | 2023.08.31 |
| AJAX CORS 및 보안 고려 사항 이해 (0) | 2023.08.31 |
| PHP에서 업로드 형식의 파일 확장자 확인 (0) | 2023.08.31 |