[jquery] jQuery : 양식 제출시 클릭 한 버튼을 얻는 방법은 무엇입니까?

Program / 글쓴이

.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>

jsfiddle의 라이브 예

각 버튼에 .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') 해당 버튼의 값을 제공합니다.

답변

내 목적을 위해 더 깨끗한 것처럼 보이는 접근법이 있습니다.

첫째, 모든 형태의 경우 :

$('form').click(function(event) {
  $(this).data('clicked',$(event.target))
});

이 click 이벤트가 폼에 대해 발생하면 나중에 액세스 할 원래 대상 (이벤트 객체에서 사용 가능)을 기록합니다. 양식의 아무 곳이나 클릭하면 발사되므로 매우 광범위한 스트로크입니다. 최적화 의견은 환영하지만 눈에 띄는 문제를 일으키지 않을 것으로 생각됩니다.

그런 다음에서 다음 $('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를 얻습니다.