JQuery для изменения действия формы

120

У меня есть две кнопки в форме, и при нажатии на них должны вызываться две разные страницы. при нажатии кнопки button1 должна быть загружена страница 1, а при нажатии кнопки button2 должна быть загружена страница 2. Я знаю, как это сделать в javascript, но понятия не имею, как это сделать в jquery. Может ли кто-нибудь мне помочь?

jquery Нихилу
источник

Ответы:

183

Попробуй это:

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


$('#button2').click(function(){
   $('#formId').attr('action', 'page2');
});
EmCo
источник
28

jQuery - это просто JavaScript, не думайте о нем иначе! Как и в «обычном» JS, вы добавляете прослушиватель событий к кнопкам и меняете атрибут действия формы. В jQuery это выглядит примерно так:

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

Этот код одинаков для второй кнопки, вам нужно только изменить идентификатор вашей кнопки и URI, на который должна быть отправлена ​​форма.

Эдвин В.
источник
20

Используйте jQuery.attr()в обработчике кликов:

$("#myform").attr('action', 'page1.php');
Джесси Банч
источник
14

Для разнообразия:

var actions = {input1: "action1.php", input2: "action2.php"};
$("#input1, #input2").click(function() {
    $(this).closest("form").attr("action", actions[this.id]);
});
karim79
источник
14

Пожалуйста, посмотрите этот ответ: https://stackoverflow.com/a/3863869/2096619

Цитата Тамлина :

jQuery (1.4.2) запутается, если у вас есть элементы формы с именем «действие». Вы можете обойти это, используя методы атрибута DOM или просто избегая именования элементов формы «действие».

<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

Чтобы динамически изменять значение действия формы, вы можете попробовать следующий код:

Ниже приведен код, если вы открываете какое-то окно dailog и внутри этого окна dailog у вас есть форма, и вы хотите изменить ее действие. Я использовал диалоговое окно Bootstrap и при открытии этого диалогового окна я присваиваю форме значение действия.

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

Если вы пытаетесь изменить действие формы на обычной странице, используйте приведенный ниже код

$("#yourElementId").change(function() { 
  var action = <generate_action>;
  $("#formId").attr("action", action);
});
Гампеш
источник