jQuery submit, comment puis-je savoir quel bouton d'envoi a été enfoncé?

Question

J'utilise le plugin ajaxSubmit pour envoyer des formulaires Ajax, mais pour une raison quelconque, ce plugin n'envoie pas de noms/valeurs de input[type=image]. Alors maintenant j'attrape l'événement submit avant que ajaxSubmit gère le formulaire et j'ai besoin de savoir s'il est possible de savoir quel bouton a été pressé?

Answer 1

$("input .button-example").click(function(){ 
//do something with $(this) var 
}); 

PS: Avez-vous jQuery var Maîtriser les $? Sinon, vous devez faire ceci:

jQuery.noConflict(); 
jQuery(document).ready(function(){ 
    jQuery("input .button-example").click(function(){ 
    //do something with jQuery(this) var 
     alert(jQuery(this)); 
    }); 
}); 

si vous wan't le contrôle sur l'événement (envoi du formulaire)

$(document).ready(function(){ 
    $("#formid").submit(function() { 
      alert('Handler for .submit() called.'); 
      return false; 
    }); 
}); 

me dire quelque chose si cela a fonctionné;)

Answer 2

Cette attrapera selon entrée élément a lancé le soumettre:

$(document).ready(function() { 
    var target = null; 
    $('#form :input').focus(function() { 
     target = this; 
     alert(target); 
    }); 
    $('#form').submit(function() { 
     alert(target); 
    }); 
}); 

Answer 3

$(document).ready(function() { 
    var clickedVar = null; 
    $('#form :submit').focus(function() { 
     clickedVar = $(this).attr("name"); 
     alert(clickedVar); 
    }); 
}); 

Answer 4

Voici ce que je pense serait un exemple plus complet de la façon d'accomplir ce que vous avez demandé. Vous devez remplacer le "# votre-forme" avec votre formulaire d'identification et remplacer "Button One" & "Button Two" avec les valeurs sur vos boutons de formulaire.

$(document).ready(function() { 
    var target = null; 
    $('#your-form-id :input').focus(function() { 
    target = $(this).val(); 
    }); 
    $('#your-form-id').submit(function() { 

    if (target == 'Button One') { 
     alert (target); 
    } 
    else if (target == 'Button Two') { 
     alert (target); 
    } 
    }); 
}); 

Answer 5

Voici comment je l'ai résolu. J'ai été inspiré par certaines des réponses postées ci-dessus mais j'avais besoin d'une approche qui fonctionnerait pour tous mes formulaires puisque je les ai chargés dynamiquement.

J'ai remarqué que le ajaxSubmit avait une option data qui décrit par le plug-in fait ce qui suit:

Un objet contenant des données supplémentaires qui doivent être soumis en même temps que la forme.

C'est exactement ce dont nous avons besoin.

Je joint le gestionnaire de clic sur mes boutons submit et enregistré l'élément en utilisant jQuery (je préfère cette méthode que l'ajout d'un attribut faux):

$('[type="submit"]').live('click', function(e){ 
     jQuery.data($(this).parents('form')[0], 'submitTrigger', $(this).attr('name')); 
}); 

Et puis dans mon appel ajaxSubmit J'ai construit l'objet de données et envoyé comme ceci:

function dialogFormSubmit(form) { 
    var data = {} 
    data[jQuery.data(form, 'submitTrigger')] = true; 
    $(form).ajaxSubmit({ 
     data: data 
    }); 
    return false; 
} 

J'ai construit l'objet de données de cette façon parce que je voulais à se comporter de la même façon que si je l'aurais présenté avec HTML/PHP vanille (nom de l'entrée est la clé le tableau $ _POST). Je suppose que si je voulais rester fidèle à son comportement réel, j'aurais ajouté la valeur ou innerHTML du bouton de soumission, mais je vérifie habituellement si elle est définie de telle sorte que ce n'était pas nécessaire :).

Answer 6

C'est ce que j'utilise (légère variation sur les autres, en utilisant mouseup et événements KeyUp au lieu de mise au point):

var submitButton = undefined; 
$('#your-form-id').find(':submit').live('mouseup keyup',function(){ 
    submitButton = $(this); 
}); 
$('#your-form-id').submit(function() { 
    console.log(submitButton.attr('name')); 
}); 

Answer 7

J'ai trouvé cela très utile. Il couvre le cas de cliquer, et aussi soumettre avec l'index de tabulation et l'espace de frappe ou entrer.Il capture la dernière entrée avant qu'une soumission ne soit faite, et c'est le bouton qui a été soumis, de sorte que vous pouvez avoir plusieurs boutons et vérifier chacun comme une cible pour effectuer quelque chose d'unique.

$('#form input').live('focusin focusout mouseup', function() { 
    // Add a data attribute to the form and save input as last selected 
    $('#form').data('lastSelected', $(this)); 
}); 
$('#form').submit(function() { 
    var last = $(this).data('lastSelected').get(0); 
    var target = $('#button').get(0); 
    console.log(last); 
    console.log(target); 
    // Verify if last selected was our target button 
    if (last == target) { 
     console.log('bingo'); 
     return false; 
    } 
}); 

Answer 8

Salut la réponse ne m'a pas tellement convaincu ici d'apporter une alternative. Ce que je vais faire est de vérifier par JS quel bouton a été pressé.

<head> 
<script> 
$('body').click(function(event) { 
    var log = $('#log'); 
    if($(event.target).is('#btn1')) { 
     log.html(event.target.id + ' was clicked.'); 
     return false; 
    }else{ 
     if($(event.target).is('#btn2')) { 
      log.html(event.target.id + ' was clicked.'); 
      return false; 
       } 
     } 
}); 
</script> 
</head> 
<body> 
    <form id="formulario" method="post"> 
     <div id="log"></div> 
     <input type="submit" id="btn1" value="Btn 01"> 
     <input type="submit" id="btn2" value="Btn 02"> 
    </form> 
</body> 

Utilisez cette page pour faire le test Test

Saludos