jquery动态改变form属性提交表单

如果你想通过jQuery来动态地改变表单(form)的属性和值，这里提供一些可以参考的方法和示例。

改变表单属性

可以使用attr()函数来改变表单属性。

$("form").attr("action", "new_action_url");

这个方法将表单的action属性更改为new_action_url，这对于在提交表单时可以将表单内容发送到不同的服务器地址十分有用。

改变表单值

可以使用val()函数来改变表单值。

$("input[name='username']").val("New Value");

这个方法将表单元素name属性为username的输入框的值更改为New Value。

改变提交方式

你也可以修改表单的提交方式，例如从POST改变为GET。

$("form").attr("method", "GET");

示例

下面是两个例子展示了如何使用jQuery来动态更改表单的属性和值。

示例1：更改表单提交url

<form id="myForm" action="old_action_url" method="POST">
  <input type="text" name="username">
  <input type="submit" value="submit">
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $("#myForm").submit(function(event) {
    event.preventDefault(); // 禁止提交表单

    var new_url = "new_action_url";
    $(this).attr("action", new_url); // 更改表单提交url
    $(this).unbind('submit').submit(); // 执行表单提交
  });
</script>

在这个例子中，当表单提交时，会更改表单的action属性并且提交表单到新的url。需要注意的是调用unbind()方法用于移除提交事件的绑定，避免事件的无限循环。

示例2：更改表单值

<form id="myForm" action="submit.php" method="POST">
  <input type="text" name="username" value="Old Value">
  <input type="submit" value="submit">
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $("input[name='username']").focus(function() {
    $(this).val(""); // 清空输入框值
  });

  $("input[name='username']").blur(function() {
    var old_value = "Old Value";
    if ($(this).val() == "") {
      $(this).val(old_value); // 恢复输入框值
    }
  });
</script>

在这个例子中，当输入框获取焦点(focus)时，清除输入框的值，并且当输入框失去焦点(blur)时，恢复输入框的原始值。