제출할 양식을 트리거 한 제출 버튼의 값을 찾으려고합니다.
$("form").submit(function() {
});각 버튼에 대해 $ ( “input [type = submit]”). click () 이벤트를 발생시키고 일부 변수를 설정할 수 있지만 제출시 양식에서 버튼을 당기는 방법보다 덜 우아해 보입니다.
답변
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()클릭 한 후 오른쪽.
@Doin은 또 다른 단점을 발견했습니다. 사용자 enter가 텍스트 필드 를 통해 양식을 제출 하면 document.activeElement이 설정되지 않습니다. keypress에서 이벤트를 처리하여 직접 조심해야합니다 input[type="text"].
2017-01 업데이트 : 내 라이브러리 Hyperform의 경우 사용하지 않고 activeElement양식 제출로 이어지는 모든 이벤트를 포착하기로 선택했습니다. 이에 대한 코드 는 Github에 있습니다.
Hyperform을 사용하는 경우 제출을 트리거 한 버튼에 액세스하는 방법은 다음과 같습니다.
$(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");
});답변 해주셔서 감사합니다.하지만 이것은별로 우아하지 않습니다 …
답변
테스트 양식을 만들고 Firebug를 사용하여 값을 얻는 방법을 찾았습니다.
$('form').submit(function(event){
alert(event.originalEvent.explicitOriginalTarget.value);
}); 불행히도 Firefox만이이 이벤트를 지원합니다.
답변
여기 내 목적에 더 깔끔해 보이는 접근 방식이 있습니다.
첫째, 모든 양식에 대해 :
$('form').click(function(event) {
$(this).data('clicked',$(event.target))
});양식에 대해이 클릭 이벤트가 발생하면 나중에 액세스 할 원래 대상 (이벤트 개체에서 사용 가능)을 기록합니다. 이것은 양식의 아무 곳이나 클릭 할 때마다 실행되기 때문에 상당히 넓은 스트로크입니다. 최적화 의견은 환영하지만 눈에 띄는 문제가 발생하지 않을 것이라고 생각합니다.
그런 다음 $ ( ‘form’). submit ()에서 다음과 같이 마지막으로 클릭 한 내용을 조회 할 수 있습니다.
if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();답변
이제 submitter제출 이벤트에 표준 속성이 있습니다.
Firefox 75에서 이미 구현되었습니다 !
document.addEventListener('submit',function(e){
console.log(e.submitter)
})지원하지 않는 브라우저의 경우 다음 polyfill을 사용 하세요 .
!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];
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);
}();답변
이 링크 에 따르면 Event 객체에는 다음과 같은 필드 Event.target가 포함됩니다.
이벤트를 시작한 개체를 나타내는 문자열을 반환합니다.
방금 그 값이 무엇인지 테스트하는 페이지를 만들었는데 그 표현은 클릭 한 버튼이 아니라 양식 자체에 대한 것처럼 보입니다. 즉, 자바 스크립트는 클릭 된 버튼을 결정하는 기능을 제공하지 않습니다.
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;
});