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

服务器

jQuery

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

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

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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