Jquery pour changer l'action du formulaire

118

J'ai deux boutons dans un formulaire et deux pages différentes doivent être appelées quand on clique dessus. lorsque button1 est cliqué, la page1 doit être chargée et lorsque button2 est cliqué, la page2 doit être chargée. Je sais comment faire cela en javascript mais je n'ai aucune idée de comment faire cela dans jquery. Quelqu'un peut-il m'aider?

jquery nikhil
la source

Réponses:

181

Essaye ça:

$('#button1').click(function(){
   $('#formId').attr('action', 'page1');
});


$('#button2').click(function(){
   $('#formId').attr('action', 'page2');
});
EmCo
la source
28

jQuery est juste du JavaScript, ne pensez pas très différemment! Comme vous le feriez dans un JS «normal», vous ajoutez un écouteur d'événement aux boutons et changez l'attribut d'action du formulaire. Dans jQuery, cela ressemble à quelque chose comme:

$('#button1').click(function(){
   $('#your_form').attr('action', 'http://uri-for-button1.com');
});

Ce code est le même pour le deuxième bouton, il vous suffit de changer l'id de votre bouton et l'URI où le formulaire doit être soumis.

Edwin V.
la source
20

Utilisez jQuery.attr()dans votre gestionnaire de clics:

$("#myform").attr('action', 'page1.php');
Jesse Bunch
la source
14

Par souci de variété:

var actions = {input1: "action1.php", input2: "action2.php"};
$("#input1, #input2").click(function() {
    $(this).closest("form").attr("action", actions[this.id]);
});
karim79
la source
14

S'il vous plaît, voyez cette réponse: https://stackoverflow.com/a/3863869/2096619

Citant Tamlyn :

jQuery (1.4.2) devient confus si vous avez des éléments de formulaire nommés "action". Vous pouvez contourner cela en utilisant les méthodes d'attributs DOM ou simplement éviter d'avoir des éléments de formulaire nommés "action".

<form action="foo">
  <button name="action" value="bar">Go</button>
</form>

<script type="text/javascript">
  $('form').attr('action', 'baz'); //this fails silently
  $('form').get(0).setAttribute('action', 'baz'); //this works
</script>
Fernando Vieira
la source
8 
$('#button1').click(function(){
$('#myform').prop('action', 'page1.php');
});
João Mello
la source
0

Pour modifier dynamiquement la valeur d'action du formulaire, vous pouvez essayer le code ci-dessous:

le code ci-dessous est si vous ouvrez une boîte de dialogue et à l'intérieur de cette boîte de dialogue, vous avez un formulaire et vous voulez en changer l'action. J'ai utilisé la boîte de dialogue Bootstrap et à l'ouverture de cette boîte de dialogue, j'attribue une valeur d'action au formulaire.

$('#your-dailog-id').on('show.bs.modal', function (event) {
    var link = $(event.relatedTarget);// Link that triggered the modal
    var cURL= link.data('url');// Extract info from data-* attributes
    $("#delUserform").attr("action", cURL);
});

Si vous essayez de modifier l'action du formulaire sur la page normale, utilisez le code ci-dessous

$("#yourElementId").change(function() { 
  var action = <generate_action>;
  $("#formId").attr("action", action);
});
Gampesh
la source