양식 제출 이벤트에서 제출을 유발 한 버튼을 어떻게 얻을 수 있습니까?

제출할 양식을 트리거 한 제출 버튼의 값을 찾으려고합니다.

$("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;
   });

jQuery + AJAX를 사용하여 제출 버튼을 name+ value서버로 보내는 여러 가지 방법을 검색하고 찾았 습니다. 별로 좋아하지 않았어요 ...

최고 중 하나는 여기에 제시된 사냥꾼의 솔루션이었습니다!

그러나 나는 다른 것을 직접 썼다.

나는 그것이 좋기 때문에 공유하고 싶습니다. 필요에 따라 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);
});

제공된 예제 중 일부를 시도했지만 우리 목적에 맞지 않았습니다.

여기에 보여줄 바이올린이 있습니다 : 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
    });
});

(이벤트)

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

"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 문서 .

도움이되는이 함수를 작성합니다.

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