jQuery更改表单操作


117

我有一个表单中的两个按钮,单击它们时必须调用两个不同的页面。单击button1时,必须装入page1;单击button2时,必须装入page2。我知道如何在javascript中执行此操作,但是我不知道如何在jquery中执行此操作。有人可以帮助我吗?

Answers:


181

试试这个:

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


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

28

jQuery只是JavaScript,不要对此有很大的不同!就像在“普通” JS中所做的一样,您将一个事件侦听器添加到按钮上并更改表单的action属性。在jQuery中,它类似于:

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

此代码与第二个按钮的代码相同,您只需要更改按钮的ID和应将表单提交到的URI。


19

使用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]);
});

14

请查看此答案:https : //stackoverflow.com/a/3863869/2096619

引用Tamlyn

如果您有任何名为“ action”的表单元素,则jQuery(1.4.2)会感到困惑。您可以通过使用DOM属性方法解决此问题,或者简单地避免使用名为“ 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>


0

要动态更改表单的动作值,可以尝试以下代码:

下面的代码是,如果您要打开一个对话框框,并且在该对话框框内有表单,并且您想更改其动作。我使用了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);
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.