Jquery zum Ändern der Formularaktion

117

Ich habe zwei Schaltflächen in einem Formular und zwei verschiedene Seiten müssen aufgerufen werden, wenn sie angeklickt werden. Wenn auf Schaltfläche1 geklickt wird, muss Seite1 geladen werden, und wenn auf Schaltfläche2 geklickt wird, muss Seite2 geladen werden. Ich weiß, wie man das in Javascript macht, aber ich habe keine Ahnung, wie man das in JQuery macht. Kann mir jemand helfen?

Nikil
quelle

Antworten:

181

Versuche dies:

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


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

jQuery ist nur JavaScript, denken Sie nicht ganz anders darüber nach! Wie in "normalem" JS fügen Sie den Schaltflächen einen Ereignis-Listener hinzu und ändern das Aktionsattribut des Formulars. In jQuery sieht das ungefähr so ​​aus:

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

Dieser Code ist für die zweite Schaltfläche identisch. Sie müssen lediglich die ID Ihrer Schaltfläche und den URI ändern, an den das Formular gesendet werden soll.

Edwin V.
quelle
19

Verwenden Sie jQuery.attr()in Ihrem Klick-Handler:

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

Um der Vielfalt willen:

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

Bitte beachten Sie diese Antwort: https://stackoverflow.com/a/3863869/2096619

Zitiert Tamlyn :

jQuery (1.4.2) wird verwirrt, wenn Sie Formularelemente mit dem Namen "action" haben. Sie können dies umgehen, indem Sie die DOM-Attributmethoden verwenden oder einfach vermeiden, Formularelemente mit dem Namen "action" zu verwenden.

<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
quelle
8
$('#button1').click(function(){
$('#myform').prop('action', 'page1.php');
});
João Mello
quelle
0

Um den Aktionswert des Formulars dynamisch zu ändern, können Sie den folgenden Code ausprobieren:

Der folgende Code ist, wenn Sie eine Dailog-Box öffnen und in dieser Dailog-Box ein Formular haben und die Aktion ändern möchten. Ich habe die Bootstrap-Dailog-Box verwendet und beim Öffnen dieser Dailog-Box weise ich dem Formular einen Aktionswert zu.

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

Wenn Sie versuchen, die Formularaktion auf der regulären Seite zu ändern, verwenden Sie den folgenden Code

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