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?

Respostas:


181

Experimente isto:

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


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

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.


20

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

$("#myform").attr('action', 'page1.php');

14

Para variar:

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

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>

8
$('#button1').click(function(){
$('#myform').prop('action', 'page1.php');
});

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);
});
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.