복붙노트

[JQUERY] 나는이 이벤트를 제출 양식에서 제출 발생하는 버튼을 어떻게받을 수 있나요?

JQUERY

나는이 이벤트를 제출 양식에서 제출 발생하는 버튼을 어떻게받을 수 있나요?

해결법

  1. 1.나는이 대답에 스케치로 document.activeElement을 활용 어떻게 jQuery를 함께 포커스 요소를 얻는 방법?

    나는이 대답에 스케치로 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 */
    }
});

    나는 단추가 포커스 된 요소를 클릭 한 후 항상 있다는 사실을 이용합니다. 이하지 않습니다 작업, 당신은 마우스 오른쪽 클릭 후) 흐림을 (할 경우.

    @Doin 다른 단점을 발견했다. 사용자가 텍스트 필드에 입력을 통해 양식을 제출하면, document.activeElement이 설정되어 있지 않습니다. 당신은 입력 [유형 = "텍스트"]과 유사한에서 키 누르기 이벤트를 처리하여,이 스스로 조심해야 할 것입니다.

    2017-01 업데이트 : 내 라이브러리의 Hyperform 내가 activeElement을 사용하지만, 모든 이벤트, 양식 제출에 그 리드를 잡을 싶지 않아하십니다. 이 코드는 Github에서에 있습니다.

    당신이 Hyperform를 사용하는 일이 있다면, 이것은 당신이 제출 한 트리거 버튼에 액세스 할 방법입니다

    $(form).on('submit', function(event) {
  var button = event.submittedVia;
});

  2. 2.나는 이것을 구현하고 나는 그것을 할 것 같아요.

    나는 이것을 구현하고 나는 그것을 할 것 같아요.

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

    응답을 주셔서 감사합니다,하지만이 정말 우아하지 않습니다 ...

  3. 3.나는 시험 양식을 작성 방화범이 값을 얻기 위해이 방법을 발견하여,

    나는 시험 양식을 작성 방화범이 값을 얻기 위해이 방법을 발견하여,

    $('form').submit(function(event){
  alert(event.originalEvent.explicitOriginalTarget.value);
});

    불행하게도, 단지 파이어 폭스는이 이벤트를 지원합니다.

  4. 4.제출 이벤트의 표준 제출자 속성은 이제 있습니다. 이미 파이어 폭스 75에서 구현!

    제출 이벤트의 표준 제출자 속성은 이제 있습니다. 이미 파이어 폭스 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);
}();

  5. 5.여기 내 목적을 위해 청소기를 보인다 접근 방식이다.

    여기 내 목적을 위해 청소기를 보인다 접근 방식이다.

    첫째, 일체의 양식 :

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

    이 클릭 이벤트가 양식을 해고 할 때, 그것은 단순히 (이벤트 객체에서 사용 가능) 원래 목표 나중에 액세스 할을 기록합니다. 이 양식의 모든 클릭 아무 곳이나 화재 것이다 이것은 꽤 넓은 스트로크입니다. 최적화 의견은 환영하지만, 나는 그것이 눈에 띄는 문제가 발생할하지 않습니다 생각한다.

    그런 다음, $ ( '양식'). 제출 ()는, 당신은 같은과, 마지막으로 클릭 무엇인지 문의 할 수 있습니다에

    if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();

  6. 6.이 링크에 따르면, 이벤트 오브젝트 필드 Event.target을 포함합니다 :

    이 링크에 따르면, 이벤트 오브젝트 필드 Event.target을 포함합니다 :

    이벤트를 시작한 개체를 나타내는 문자열을 반환합니다.

    난 그냥 그 값이 무엇인지 테스트 페이지를 생성하고, 그 표현 양식 자체 인 것처럼 표시가 아닌 버튼을 클릭했습니다. 즉, 자바 스크립트가 클릭 된 버튼을 결정하는 기능을 제공하지 않습니다.

    지금까지 데이브 앤더슨의 솔루션으로, 그것은 여러 브라우저에서 사용하기 전에하는지 테스트하려면 좋은 아이디어가 될 수 있습니다. 그것은 잘 작동 할 수 가능성이 있습니다,하지만 어느 쪽이든 말할 수 없습니다.

  7. 7.한 깨끗한 방법은 각 양식 버튼을 클릭 이벤트를 사용하는 것입니다. 취소 및 삭제 버튼 저장과 HTML 양식은 다음과 같은 :

    한 깨끗한 방법은 각 양식 버튼을 클릭 이벤트를 사용하는 것입니다. 취소 및 삭제 버튼 저장과 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;
   });

  8. 8.나는 검색 및 jQuery를 + AJAX를 사용하여 서버로 전송 제출 버튼 이름 + 가치를 얻을 수있는 몇 가지 방법을 발견했다. 난 아주 많이 그들처럼하지 않았다 ...

    나는 검색 및 jQuery를 + AJAX를 사용하여 서버로 전송 제출 버튼 이름 + 가치를 얻을 수있는 몇 가지 방법을 발견했다. 난 아주 많이 그들처럼하지 않았다 ...

    bests 중 하나는 사냥꾼의 솔루션은 여기에 제시했다!

    그러나 나는 다른 나 자신을 썼다.

    나는 필요에 따라, 그것은 (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'));
});

    단순한! 제출 버튼을 클릭하면, 숨겨진 필드는 동일한 이름과 제출 버튼의 값을 사용하여 양식에 추가됩니다.

    편집 : 아래의 버전은 쉽게 읽을 수 있습니다. 또한, (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);
});

  9. 9.나는 제공된 예 중 일부를 시도했지만 그들은 우리의 목적을 위해 작동하지 않았다.

    나는 제공된 예 중 일부를 시도했지만 그들은 우리의 목적을 위해 작동하지 않았다.

    여기 쇼에 바이올린는 다음과 같습니다 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
    });
});

  10. 10.(이벤트)

    (이벤트)

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

  11. 11.당신은 "event.originalEvent.x"와 "event.originalEvent.y"이 방법을 시도 할 수 있습니다 :

    당신은 "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>

  12. 12.jQuery를가 제출 이벤트에 대한 데이터를 제공하지 않는 것 같습니다. 외모는 제안 된 방법은 당신의 최선의 방법이다 좋아한다.

    jQuery를가 제출 이벤트에 대한 데이터를 제공하지 않는 것 같습니다. 외모는 제안 된 방법은 당신의 최선의 방법이다 좋아한다.

  13. 13.그냥 다른 이후 또 다른 해결책은 내 요구 사항을 충족. 장점은 클릭과 키 누름이 (입력과 공간) 검출되어있다.

    그냥 다른 이후 또 다른 해결책은 내 요구 사항을 충족. 장점은 클릭과 키 누름이 (입력과 공간) 검출되어있다.

    // 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({
            // ...
        })
    }
}

    이것은 나를 위해 최선을 다했다.

  14. 14.보다 구체적인 이벤트 핸들러와 jQuery로, 이벤트 객체는 클릭 버튼입니다. 필요한 경우이 이벤트에서 위임 양식을 얻을 수 있습니다.

    보다 구체적인 이벤트 핸들러와 jQuery로, 이벤트 객체는 클릭 버튼입니다. 필요한 경우이 이벤트에서 위임 양식을 얻을 수 있습니다.

    $('form').on('click', 'button', function (e) {
  e.preventDefault();
  var
    $button = $(e.target),
    $form = $(e.delegateTarget);
  var buttonValue = $button.val();
});

    이 문서는 당신이 시작하는 데 필요한 모든 것을 갖추고 있습니다. JQuery와 문서.

  15. 15.나는 나에게 도움이 기능을 쓰기

    나는 나에게 도움이 기능을 쓰기

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

  16. 16.폼의 SubmitEvent에 대한 제출자 속성이있다. 그러나, 현재의,이 사파리에서 작동하지 않습니다.

    폼의 SubmitEvent에 대한 제출자 속성이있다. 그러나, 현재의,이 사파리에서 작동하지 않습니다.

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

    17. from https://stackoverflow.com/questions/2066162/how-can-i-get-the-button-that-caused-the-submit-from-the-form-submit-event by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 파일 입력에서 파일의 전체 경로를 얻으려면 [중복]  (0) 2020.10.12
[JQUERY] 큰 따옴표 대 jQuery.parseJSON 따옴표  (0) 2020.10.12
[JQUERY] jQuery를 .val () .attr VS ( '값')  (0) 2020.10.12
[JQUERY] 있는 jqGrid 크롬 / 크롬 프레임에서 제대로 렌더링하지 않습니다  (0) 2020.10.12
[JQUERY] 동적으로 생성 된 항목에 대해 작동하지를 클릭 JQuery와 [중복]  (0) 2020.10.12
,

티스토리툴바