使用jQuery动态更改表单操作方式

Question

我可以帮助您进行翻译。以下是涉及IT技术的内容：

我在网页上有一个表单，长成这样：

<form action="/home/email" enctype="multipart/form-data" id="email-form" method="post">
// form elements
</form>

根据页面不同，我希望能够使用jQuery动态更改表单的属性，特别是action属性。

$('#send-email').click(function () {
   $('#email-form').attr('action', '@Url.Action("emailaccounting", "home")')
 )};

以上的jQuery成功渲染为：

<form action="/home/emailaccounting" enctype="multipart/form-data" id="email-form" method="post">
// form elements
</form>

我可以在单击打开弹出窗口发送电子邮件的链接时更改表单属性。然而，当我提交表单时，被触发的操作是原始的“email”，而不是“emailaccounting”。

我进行了一些尝试并在电子邮件表单的提交单击处理程序中添加了以下内容：

  $('.send-email').click(function (e) {
    // The original form action post will be hit without this...
    e.preventDefault();
    $('#email-form').submit();
  };

使用上面的代码段，正确的操作“emailaccounting”被调用。 为什么？我不知道......希望有人能解释一下。但我还没有摆脱困境 - 我有一个输入元素来上传文件。现在当我尝试在先前有效的同一表单上上传文件时，我点击提交按钮就会进入“邮件”操作。如果我不尝试上传文件，则会进入“emailaccounting”操作。

1. 为什么e.preventDefault()后跟表单提交会触发正确的操作？
2. 为什么上传文件会将其定向到原始的表单操作而不是jQuery修改后的操作？

谢谢！

- Mike

---

你能提供一个 http://jsfiddle.net 来说明你的问题吗？根据你的描述，一切都应该正常工作，这意味着你在这里展示的代码中漏掉了某些东西。 - Darin Dimitrov

你能发布“发送电子邮件”按钮的HTML代码吗？我猜测这可能是由.NET生成的某些内容引起的。 - James Montagne

@Beavis，是的，它会更新表单上的操作，只需使用FireBug观察DOM即可。当您提交后，请观察FireBug中的Net选项卡，您会发现它POST（如预期）到/home/emailaccounting而不是原始的/home/email。 - Darin Dimitrov

@Darin - 我删减了很多内容，但这是它的链接：http://jsfiddle.net/V2PxL/3/。虽然还有很多细节，但希望这能给你一个想法。我在这里使用了jQuery ajax表单插件进行ajax操作。 - Mike

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/4082/discussion-between-beavis-and-darin-dimitrov - Mike

Answer 1

我尝试了以下方法，对我有效：

$('#send-email').click(function () {
   $('#email-form').attr('action', '/home/emailaccounting')
 )};

- Murthy M

Answer 2

试试这样做：

$('#email-form').attr('action', '<%= Url.Action("emailaccounting", "home") %>');

- James Johnson

---

詹姆斯 - 操作已被正確修改（我已驗證源HTML）。問題在於我的控制器中的正確操作未被觸發。 - Mike

Answer 3

你只是想让动作是当前页面吗？如果是这样，你可以使用action=""。

你没有提到你正在测试哪个浏览器和版本，或者你是否尝试过其他浏览器。它可能实际上是浏览器的一个错误/安全功能/怪癖。如果是这种情况，你可以通过简单地通过AJAX发送表单来解决问题。在功能上，它没有任何区别，你甚至可以在成功响应后重定向页面以使其行为相同。使用AJAX，你可以明确控制发布URL，而不必改变操作。

- Chris Pratt

---

Chris - 操作已经修改好了。我可以看到源代码的变化。问题在于当我提交表单时出现了奇怪的行为。它正在访问原始操作而不是被 jQuery 修改的操作。 - Mike

我明白，但我只是想确认一下您是否试图更改操作以使其成为当前页面的URL，因为这将是一种可靠的方法，从而完全消除了问题。 - Chris Pratt

Chris - 是这样。尽管操作似乎很好，但我会继续尝试你的建议... - Mike

是的，jQuery正在按照它应该的方式进行更改，但永远不要忽视浏览器可能会做一些完全愚蠢的事情；）。将操作设置为空可以消除通过JavaScript进行更改的需要，并且在不必费力找出浏览器为什么很蠢的情况下解决问题。 - Chris Pratt