How can I get the button that caused the submit fr

问题:

I\'m trying to find the value of the submit button that triggered the form to submit

$(\"form\").submit(function() {

});

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.

回答1:

I leveraged document.activeElement as sketched in this answer: How to get the focused element with 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 */
    }
});

I take advantage of the fact, that the button is always the focused element after clicking it. This will not work, if you do a blur() right after the click.

@Doin has spotted another drawback. If a user submits the form via enter in a text field, the document.activeElement is not set. You\'d need to watch out for this yourself, by handling keypress events in input[type=\"text\"] and similar.

Update 2017-01: For my library Hyperform I chose not to use activeElement but to catch all events, that lead to form submission. The code for this is on Github.

If you happen to use Hyperform, this is how you would access the button that triggered the submit:

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

回答2:

I implemented this and I suppose it will do.

$(document).ready(function() {
    $(\"form\").submit(function() { 

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

    // DO WORK

});

and this is the submit button event that sets it up

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

Thanks for the responses, but this isn\'t terribly inelegant...

回答3:

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

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

Unfortunately, only Firefox supports this event.

回答4:

Here\'s an approach that seems cleaner for my purposes.

First, for any and all forms:

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

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.

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

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

回答5:

According to this link, the Event object contains a field Event.target, which:

Returns a string representing the object that initiated the event.

I just created a page testing out what that value is, and it appears as though that representation is for the form itself, not for the button clicked. In other words, Javascript doesn\'t provide the facility to determine the clicked button.

As far as Dave Anderson\'s solution, it might be a good idea to test that in multiple browsers before using it. It\'s possible that it could work fine, but I can\'t say either way.

回答6:

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

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

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.

$(\'.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;
   });

回答7:

I searched and found several ways to get the submit button name + value sent to the server using jQuery + AJAX. I didn\'t like them very much...

One of the bests was hunter\'s solution presented here!

But I wrote another one myself.

I want to share, because it is good, and, as I needed, it works also with forms loaded via ajax (after 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\'));
});

Simple! When the submit button is clicked, a hidden field is added to the form, using same name and value of the submit button.

EDIT: The version below is easier to read. Also, it takes care of removing previously appended hidden fields (in the case of submitting the same form twice, which is perfectly possible when using AJAX).

Improved code:

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

回答8:

I did try some of the examples provided, but they didn\'t work for our purposes.

Here\'s a fiddle to show: http://jsfiddle.net/7a8qhofo/1/

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

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

回答9:

( event )

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

回答10:

you can try this way with \"event.originalEvent.x\" and \"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>

回答11:

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

回答12:

Just another solution since no other met my requirements. The advantage is, that click and keypress (enter and space) are detected.

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

This worked best for me.

回答13:

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.

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

This Doc has everything you need to get started. JQuery Doc.