blocks|key|1358733|text|jQuery似乎不会在提交事件中提供该数据。看起来你提出的方法是你最好的选择。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1358734|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>jQuery doesn't seem to provide that data on the submit event. Looks like the method you proposed is your best bet.</p>


blocks|key|1358844|text|我创建了一个测试表单，并使用Firebug找到了这种方法来获取值；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1358845|$('form').submit(function(event){
++alert(event.originalEvent.explicitOriginalTarget.value);
});+|code-block|syntax|javascript|1358846|不幸的是，只有Firefox支持这个事件。|1358847|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I created a test form and using Firebug found this way to get the value;</p>

<pre><code>$('form').submit(function(event){
  alert(event.originalEvent.explicitOriginalTarget.value);
}); 
</code></pre>

<p>Unfortunately, only Firefox supports this event.</p>


blocks|key|1143792|text|我实现了这一点，我想它会行的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1143793|$(document).ready(function()+{
++++$("form").submit(function()+{+

++++var+val+=+$("input[type=submit][clicked=true]").val()

++++//+DO+WORK

});|code-block|syntax|javascript|1143794|这是设置它的提交按钮事件|1143795|$("form+input[type=submit]").click(function()+{
++++$("input[type=submit]",+$(this).parents("form")).removeAttr("clicked");
++++$(this).attr("clicked",+"true");
});|1143796|谢谢你的回复，但这并不是很不雅观...|1143797|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I implemented this and I suppose it will do.</p>

<pre><code>$(document).ready(function() {
    $("form").submit(function() { 

    var val = $("input[type=submit][clicked=true]").val()

    // DO WORK

});
</code></pre>

<p>and this is the submit button event that sets it up</p>

<pre><code>$("form input[type=submit]").click(function() {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});
</code></pre>

<p>Thanks for the responses, but this isn't terribly inelegant...</p>


blocks|key|1358969|text|你可以通过“event.increatalEvent.x”和“event.OriginalEvent.y”尝试这种方式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1358970|<!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%2B$(this).width()))+&&
+++++++++++++++++++++(y+>=+offset.top)+&&
+++++++++++++++++++++(y+<=+(offset.top%2B$(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>|code-block|syntax|javascript|1358971|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>you can try this way with "event.originalEvent.x" and "event.originalEvent.y":</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt; 
    &lt;title&gt;test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;form id="is_a_form"&gt;
        &lt;input id="is_a_input_1" type="submit"&gt;&lt;br /&gt;
        &lt;input id="is_a_input_2" type="submit"&gt;&lt;br /&gt;
        &lt;input id="is_a_input_3" type="submit"&gt;&lt;br /&gt;
        &lt;input id="is_a_input_4" type="submit"&gt;&lt;br /&gt;
        &lt;input id="is_a_input_5" type="submit"&gt;&lt;br /&gt;
    &lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
&lt;script&gt;
$(function(){

    $.fn.extend({
      inPosition: function(x, y) {

        return this.each(function() {

            try{
                var offset = $(this).offset();

                if ( (x &gt;= offset.left) &amp;&amp;
                     (x &lt;= (offset.left+$(this).width())) &amp;&amp;
                     (y &gt;= offset.top) &amp;&amp;
                     (y &lt;= (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;

    });

});
&lt;/script&gt;
</code></pre>


blocks|key|1359042|text|对于我的目的来说，这里有一种看起来更干净的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1359043|首先，对于任何和所有形式：|1359044|$('form').click(function(event)+{
++$(this).data('clicked',$(event.target))
});|code-block|syntax|javascript|1359045|当为表单触发此单击事件时，它只是记录原始目标(在事件对象中可用)，以便稍后访问。这是一个非常宽泛的笔划，因为它将触发表单上任何位置的任何单击。欢迎优化评论，但我怀疑它永远不会引起明显的问题。|1359046|然后，在$('form').submit()中，您可以查询最后单击的内容，如下所示|1359047|if+($(this).data('clicked').is('[name=no_ajax]'))+xhr.abort();|1359048|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Here's an approach that seems cleaner for my purposes.</p>

<p>First, for any and all forms:</p>

<pre><code>$('form').click(function(event) {
  $(this).data('clicked',$(event.target))
});
</code></pre>

<p>When this click event is fired for a form, it simply records the originating target (available in the event object) to be accessed later. This is a pretty broad stroke, as it will fire for any click anywhere on the form. Optimization comments are welcome, but I suspect it will never cause noticeable issues.</p>

<p>Then, in $('form').submit(), you can inquire what was last clicked, with something like</p>

<pre><code>if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();
</code></pre>


blocks|key|1144028|text|一种简单的方法是在每个表单按钮上使用click事件。下面是一个带有保存、取消和删除按钮的html表单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1144029|<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>+|code-block|syntax|javascript|1144030|下面是jquery。根据所单击的按钮('save‘或'delete')，我将适当的'action’发送到相同的服务器函数。如果单击了“取消”，我就会重新加载页面。|1144031|$('.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;
+++});|1144032|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>One clean approach is to use the click event on each form button.
Following is a html form with save,cancel and delete buttons:</p>

<pre><code>&lt;form  name="formname" action="/location/form_action" method="POST"&gt;
&lt;input name="note_id" value="some value"/&gt;
&lt;input class="savenote" type="submit" value="Save"/&gt;
&lt;input class="cancelnote" type="submit" value="Cancel"/&gt;
&lt;input class="deletenote" type="submit" value="Delete" /&gt;
&lt;/form&gt; 
</code></pre>

<p>Following is the jquery. I send the appropriate 'action' to the same server function depending on which button was clicked ('save' or 'delete'). If 'cancel', is clicked, I just reload the page.</p>

<pre><code>$('.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;
   });
</code></pre>


blocks|key|1144097|text|我确实尝试了一些提供的示例，但它们对我们的目的不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1144098|这里有一把小提琴可以展示：http://jsfiddle.net/7a8qhofo/1/|offset|length|1144099|我也遇到过类似的问题，这就是我们在表单中解决问题的方式。|1144100|$(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
++++});
});|code-block|syntax|javascript|1144101|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/7a8qhofo/1/^0|0|D|V|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>I did try some of the examples provided, but they didn't work for our purposes.</p>

<p>Here's a fiddle to show: <a href="http://jsfiddle.net/7a8qhofo/1/" rel="nofollow">http://jsfiddle.net/7a8qhofo/1/</a></p>

<p>I was faced with a similar issue, and this is how we solved the issue in our forms. </p>

<pre><code>$(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
    });
});
</code></pre>


blocks|key|1144129|text|(事件)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1144130|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%2B'+=+'%2BsubmitButton.value)
}


<form+action=""+method="post"+onSubmit="submForm(this,+event);+return+false;">|code-block|syntax|javascript|1144131|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>( event )</p>

<pre><code>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)
}


&lt;form action="" method="post" onSubmit="submForm(this, event); return false;"&gt;
</code></pre>


blocks|key|1144176|text|使用更具体的事件处理程序和JQuery，您的事件对象就是所单击的按钮。如果需要，您还可以从此事件中获取委托表单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1144177|$('form').on('click',+'button',+function+(e)+{
++e.preventDefault();
++var
++++$button+=+$(e.target),
++++$form+=+$(e.delegateTarget);
++var+buttonValue+=+$button.val();
});|code-block|syntax|javascript|1144178|此文档包含入门所需的所有内容。JQuery+Doc。|offset|length|1144179|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/event.delegateTarget/^0|0|0|F|A|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>With a more specific event handler and JQuery, your event object is the button clicked. You can also get the delegating form from this event if needed.</p>

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

<p>This Doc has everything you need to get started.
<a href="https://api.jquery.com/event.delegateTarget/" rel="nofollow noreferrer">JQuery Doc</a>.</p>


blocks|key|1359287|text|我写了这个函数来帮助我|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1359288|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;

};|code-block|syntax|javascript|1359289|然后使用|1359290|var+data=+PupulateFormData($("form"));|1359291|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I write this function that helps me </p>

<pre><code>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;

};
</code></pre>

<p>and then Use</p>

<pre><code>var data= PupulateFormData($("form"));
</code></pre>


blocks|key|1359306|text|表单的SubmitEvent有一个submitter属性。然而，到目前为止，这在Safari上不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1359307|<form+id="form">
++++<button+value="add"+type="submit">Add</button>
++++<button+value="remove"+type="submit">Remove</button>
</form>|code-block|syntax|javascript|1359308|let+form+=+document.getElementById('form');

form.onsubmit+=+(event)+=>+{
++++e.preventDefault();
++++console.log(e.submitter.type);
}|1359309|一种跨浏览器工作的不同方法。但是，您必须依赖form元素而不是event对象。这基本上是在表单元素对象上添加了一个“submitter”属性，稍后可以在表单提交时引用该属性。|style|CODE|1359310|<form+id="form">
++++<button+onclick="this.form.submitter+=+'add'"+type="submit">Add</button>
++++<button+onclick="this.form.submitter+=+'remove'"+type="submit">Remove</button>
</form>|1359311|let+form+=+document.getElementById('form');

form.onsubmit+=+(event)+=>+{
++++e.preventDefault();
++++console.log(form.submitter);
}|1359312|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent|1|https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter^0|3|B|0|H|9|1|0|0|0|M|4|V|5|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]|$A|16|B|17|1|18]]|C|$]]|$1|D|3|E|5|F|7|19|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|F|7|1A|8|@]|9|@]|C|$G|H]]|$1|K|3|L|5|6|7|1B|8|@$A|1C|B|1D|M|N]|$A|1E|B|1F|M|N]]|9|@]|C|$]]|$1|O|3|P|5|F|7|1G|8|@]|9|@]|C|$G|H]]|$1|Q|3|R|5|F|7|1H|8|@]|9|@]|C|$G|H]]|$1|S|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]]]

<p>There's a <a href="https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter" rel="nofollow noreferrer">submitter</a> property for form's <a href="https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent" rel="nofollow noreferrer">SubmitEvent</a>. However, as of present time, this doesn't work on Safari.</p>
<pre class="lang-html prettyprint-override"><code>&lt;form id=&quot;form&quot;&gt;
    &lt;button value=&quot;add&quot; type=&quot;submit&quot;&gt;Add&lt;/button&gt;
    &lt;button value=&quot;remove&quot; type=&quot;submit&quot;&gt;Remove&lt;/button&gt;
&lt;/form&gt;
</code></pre>
<pre class="lang-js prettyprint-override"><code>let form = document.getElementById('form');

form.onsubmit = (event) =&gt; {
    e.preventDefault();
    console.log(e.submitter.type);
}
</code></pre>
<p>A different approach that works across browsers. However, you have to rely on <code>form</code> element instead of the <code>event</code> object. This basically adds a 'submitter' property onto the form element object that can be referenced later on form submit.</p>
<pre class="lang-html prettyprint-override"><code>&lt;form id=&quot;form&quot;&gt;
    &lt;button onclick=&quot;this.form.submitter = 'add'&quot; type=&quot;submit&quot;&gt;Add&lt;/button&gt;
    &lt;button onclick=&quot;this.form.submitter = 'remove'&quot; type=&quot;submit&quot;&gt;Remove&lt;/button&gt;
&lt;/form&gt;
</code></pre>
<pre class="lang-js prettyprint-override"><code>let form = document.getElementById('form');

form.onsubmit = (event) =&gt; {
    e.preventDefault();
    console.log(form.submitter);
}
</code></pre>


blocks|key|1359314|text|从事件对象中获取submitter对象|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1359315|您可以在提交表单时简单地获取事件对象。然后，获取submitter对象。如下所示：|1359316|$(".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"));
}|code-block|syntax|javascript|1359317|我已经在这里详细解释了：(https://stackoverflow.com/a/66334184/11320178)|offset|length|1359318|如果你有任何疑问，请告诉我。|1359319|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/66334184/11320178^0|0|0|0|D|19|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<h1>Get the submitter object from the event object</h1>
<p>You can simply get the event object when you submit the form. From that, get the submitter object. As below:</p>
<pre><code>$(&quot;.review-form&quot;).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(&quot;name&quot;));
}
</code></pre>
<p>I have explained in detailed wat here: (<a href="https://stackoverflow.com/a/66334184/11320178">https://stackoverflow.com/a/66334184/11320178</a>)
<br/>
Let me know if you have any doubts.</p>


blocks|key|1359362|text|在处理表单元素位于shadowRoot中的web组件时，我采用了Tobias+Buschor优秀的polyfill，如下所示，通过一个导入的模块以如下方式工作。注意:这只提供了对长青客户端的兼容性--edge，safari，chrome，firefox。此外，正如Mikko+Rantalainen所指出的那样，这不遵循(我/我们可以在某个时候更新以遵循)+https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-form-submit|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1359363|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+%7C%7C+!form.contains(node)){
++++++++++++++++++++node+=+form.querySelector(submitterSelector);
++++++++++++++++}
++++++++++++++++//+always+return+a+node,+default+as+though+form.submit+called
++++++++++++++++return+node+%7C%7C+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);
}|code-block|syntax|javascript|1359364|entityMap|0|LINK|mutability|MUTABLE|url|https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-form-submit^0|4Z|2J|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>In working with web components where form elements are in the shadowRoot I adapted Tobias Buschor's excellent polyfill as follows to work in the following way via an imported module. Note this only provides compatibility in evergreen clients--edge, safari, chrome, firefox. Also, as noted by Mikko Rantalainen, this doesn't follow (and I/we can update at some point to follow) <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-form-submit" rel="nofollow noreferrer">https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-form-submit</a></p>
<pre><code>if( !('SubmitEvent' in self &amp;&amp; '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);
}
</code></pre>


blocks|key|1144285|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1144286|$(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
++++});
}|code-block|syntax|javascript|1144287|1144288|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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
    });
}</code></pre>
</div>
</div>
</p>


blocks|key|1144333|text|您可以获取以下HTML代码的按钮id：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1144334|<form+id="theForm"+action=""+method="POST">
++<button+name="sbtn"+id="sbtn"+value="Hey+button"+type="submit">Submit</button>
</form>|code-block|syntax|javascript|1144335|使用以下JavaScript+(利用.val()属性)：|1144336|$('#theForm').on('click',+'button',+function+(e)+{
++e.preventDefault();
++var
++++$button+=+$(e.target),
++++$form+=+$(e.delegateTarget);
++var+buttonValue+=+$button.val();
});|1144337|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can obtain the button id of the following HTML code:</p>
<pre class="lang-html prettyprint-override"><code>&lt;form id=&quot;theForm&quot; action=&quot;&quot; method=&quot;POST&quot;&gt;
  &lt;button name=&quot;sbtn&quot; id=&quot;sbtn&quot; value=&quot;Hey button&quot; type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</code></pre>
<p>using the following JavaScript (leveraging on the .val() attribute):</p>
<pre class="lang-js prettyprint-override"><code>$('#theForm').on('click', 'button', function (e) {
  e.preventDefault();
  var
    $button = $(e.target),
    $form = $(e.delegateTarget);
  var buttonValue = $button.val();
});
</code></pre>


<p>I'm trying to find the value of the submit button that triggered the form to submit</p>

<pre><code>$("form").submit(function() {

});
</code></pre>

<p>I could possibly fire a $("input[type=submit]").click() event for each button and set some variable, but that seems less elegant than some how pulling the button off of the the form on submit.</p>


How can I get the button that caused the submit from the form submit event?

我正在尝试查找触发表单提交的submit按钮的值$("form").submit(function() {});我可能会为每个按钮触发一个$("inputtype=submit").click()事件并设置一些变量，但这似乎不如在提交时将按钮从表单中拉出的方式优雅。

问如何从表单提交事件中获取导致提交的按钮？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从表单提交事件中获取导致提交的按钮？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从表单提交事件中获取导致提交的按钮？
EN