Jquery para alterar a ação do formulário

118

Tenho dois botões em um formulário e duas páginas diferentes devem ser chamadas quando são clicadas. quando o botão1 é clicado, a página1 deve ser carregada e quando o botão2 é clicado, a página2 deve ser carregada. Eu sei como fazer isso em javascript, mas não tenho idéia de como fazer isso em jquery. Alguém pode me ajudar?

nikhil
fonte

Respostas:

181

Experimente isto:

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


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

jQuery é apenas JavaScript, não pense muito diferente sobre isso! Como faria no JS 'normal', você adiciona um ouvinte de evento aos botões e altera o atributo de ação do formulário. Em jQuery, isso se parece com:

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

Este código é o mesmo para o segundo botão, você só precisa alterar o id do seu botão e o URI para onde o formulário deve ser enviado.

Edwin V.
fonte
20

Use jQuery.attr()em seu gerenciador de cliques:

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

Para variar:

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

Por favor, veja esta resposta: https://stackoverflow.com/a/3863869/2096619

Citando Tamlyn :

jQuery (1.4.2) fica confuso se você tiver qualquer elemento de formulário denominado "ação". Você pode contornar isso usando os métodos de atributo DOM ou simplesmente evitar ter elementos de formulário chamados "ação".

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

Para alterar o valor da ação do formulário dinamicamente, você pode tentar o código abaixo:

o código abaixo mostra se você está abrindo uma caixa dailog e dentro dessa caixa você tem o formulário e deseja alterar a ação dele. Usei a caixa dailog do Bootstrap e, ao abrir essa caixa dailog, estou atribuindo um valor de ação ao formulário.

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

Se você está tentando alterar a ação do formulário na página normal, use o código abaixo

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