it-swarm.com.de

Wie kann ich den Button, der zum Senden geführt hat, vom Formularsendeereignis erhalten?

Ich versuche, den Wert des Submit-Buttons zu ermitteln, der das Formular zum Senden ausgelöst hat

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

});

Ich könnte möglicherweise ein $ ("input [type = submit]"). Click () -Ereignis für jede Schaltfläche auslösen und eine Variable festlegen, aber das scheint weniger elegant zu sein als andere, wenn Sie die Schaltfläche vom Formular abziehen.

97
hunter

Ich habe das implementiert und ich denke, das wird reichen.

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

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

    // DO WORK

});

dies ist das Submit-Button-Ereignis, mit dem es eingerichtet wird

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

Danke für die Antworten, aber das ist nicht schrecklich unelegant ...

33
hunter

Ich nutzte document.activeElement wie in dieser Antwort skizziert: Wie bekomme ich das fokussierte Element mit 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 */
    }
});

Ich nutze die Tatsache, dass die Schaltfläche nach dem Klicken immer das fokussierte Element ist. Dies funktioniert nicht, wenn Sie direkt nach dem Klick eine blur() ausführen.

@Doin hat einen weiteren Nachteil entdeckt. Wenn ein Benutzer das Formular über enter in einem Textfeld sendet, wird der document.activeElement nicht festgelegt. Sie müssen dies selbst beachten, indem Sie keypress-Ereignisse in input[type="text"] und ähnlichem behandeln.

Update 2017-01: Für meine Bibliothek Hyperform entschied ich mich, activeElement nicht zu verwenden, sondern alle Ereignisse abzufangen, die zur Formularübermittlung führen. Der Code dafür ist auf Github.

Wenn Sie Hyperform verwenden, greifen Sie auf die Schaltfläche zu, die den Absender ausgelöst hat:

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

Ich habe ein Testformular erstellt und mit Firebug diesen Weg gefunden, um den Wert zu ermitteln.

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

Leider unterstützt nur Firefox dieses Ereignis.

9
Dave Anderson

Hier ist ein Ansatz, der für meine Zwecke sauberer erscheint.

Erstens für alle Formen:

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

Wenn dieses Klickereignis für ein Formular ausgelöst wird, zeichnet es lediglich das Ursprungsziel (im Ereignisobjekt verfügbar) auf, auf das später zugegriffen werden kann. Dies ist ein ziemlich breiter Strich, da er bei jedem Klick auf das Formular ausgelöst wird. Optimierungskommentare sind willkommen, aber ich vermute, dass dies niemals zu merklichen Problemen führen wird.

Dann können Sie in $ ('form'). Submit () mit etwas Ähnlichem nach dem zuletzt angeklickten Element fragen

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

Ein sauberer Ansatz besteht darin, das click -Ereignis für jede Formularschaltfläche zu verwenden. __ Folgendes ist ein HTML-Formular mit Schaltflächen zum Speichern, Abbrechen und Löschen:

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

Nachfolgend ist die Jquery. Ich sende die entsprechende "Aktion" an dieselbe Serverfunktion, je nachdem, auf welche Schaltfläche geklickt wurde ("Speichern" oder "Löschen"). Wenn auf "Abbrechen" geklickt wird, lade ich die Seite einfach neu.

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

Gemäß dieser Verknüpfung enthält das Ereignisobjekt ein Feld Event.target, das:

Gibt eine Zeichenfolge zurück, die das Objekt darstellt, das das Ereignis initiiert hat.

Ich habe gerade eine Seite erstellt, um den Wert zu testen, und es scheint, als wäre diese Darstellung für das Formular selbst und nicht für die angeklickte Schaltfläche. Mit anderen Worten, Javascript bietet keine Möglichkeit, die angeklickte Schaltfläche zu bestimmen.

Was Dave Andersons Lösung betrifft, ist es möglicherweise eine gute Idee, dies in mehreren Browsern zu testen, bevor Sie es verwenden. Es ist möglich, dass es gut funktioniert, aber ich kann es auch nicht sagen.

4
cmptrgeekken

Ich suchte und fand mehrere Möglichkeiten, um die Senden-Schaltfläche name + value mit jQuery + AJAX an den Server zu senden. Ich habe sie nicht sehr gemocht ...

Eines der Besten war die hier vorgestellte Jägerlösung!

Aber ich habe selbst noch einen geschrieben.

Ich möchte teilen, weil es gut ist, und wie ich brauchte, funktioniert es auch mit Formularen, die über Ajax geladen werden (nach 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'));
});

Einfach! Wenn Sie auf die Schaltfläche "Senden" klicken, wird dem Formular ein ausgeblendetes Feld hinzugefügt, das dieselbe name und value der Schaltfläche "Senden" verwendet.

EDIT: Die untenstehende Version ist einfacher zu lesen. Außerdem werden zuvor angefügte ausgeblendete Felder entfernt (wenn dasselbe Formular zweimal gesendet wird, was bei Verwendung von AJAX durchaus möglich ist).

Verbesserter 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);
});
3
J. Bruni

( Veranstaltung )

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

Ich habe einige der Beispiele ausprobiert, aber sie funktionierten nicht für unsere Zwecke.

Hier ist eine Geige zu zeigen: http://jsfiddle.net/7a8qhofo/1/

Ich war mit einem ähnlichen Problem konfrontiert, und so haben wir das Problem in unseren Formularen gelöst. 

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

sie können dies mit "event.originalEvent.x" und "event.originalEvent.y" versuchen:

<!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>
1
andres descalzo

jQuery scheint diese Daten nicht zum Submit-Event bereitzustellen. Sieht so aus, als wäre die von Ihnen vorgeschlagene Methode Ihre beste Wette.

0
Matchu

Bei einem spezifischeren Ereignishandler und JQuery wird auf das Ereignisobjekt die Schaltfläche geklickt. Sie können das Delegierungsformular bei Bedarf auch von dieser Veranstaltung erhalten.

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

Dieses Dokument enthält alles, was Sie benötigen, um loszulegen . JQuery Doc .

0
user8205152

Ich schreibe diese Funktion, die mir hilft

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;

};

und dann Verwenden

var data= PupulateFormData($("form"));
0
BabiBN

Nur eine andere Lösung, da keine andere meine Anforderungen erfüllte. Der Vorteil ist, dass Klick und Tastendruck (Enter und Leerzeichen) erkannt werden.

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

Das hat für mich am besten funktioniert.

0
roland