如何使用表单输入中的值填充表单的操作参数？

Posted 2023-02-22

【中文标题】如何使用表单输入中的值填充表单的操作参数？

【英文标题】：How can I fill the action parameter of a form with values from the form's input?

【发布时间】：2013-05-26 16:19:54

【问题描述】：

我知道我可以从表单中传递查询参数并期望它们在查询字符串中：

<form method="GET">
  <input type="text" name="param" value="value" />
  <input type="submit" value="submit" />
</form>

这会导致

http://blah-blah-blah/blah?param=value

但是，在我的 web 应用程序中，我使用的是路径参数。要访问图书馆中的一本书 #459，您需要访问

/books/459

要签出一份，请发帖到

/books/459/checkout

其中 459 是路径参数。当我尝试时

<form action="/books/book_id">...</form>

需要我去

/books/%7Bbook_id%7D

而不是

/books/459

我需要 javascript 或其他东西来构建 URI 吗？

【参考方案1】：

你可能需要这样的东西：

<form onsubmit="this.action = this.action + this.book_id.value;" ...>

但是，使动作依赖于脚本是糟糕的设计。您的服务器处理 URI ...?book_id=value 更加健壮，根本不需要任何客户端脚本。

【讨论】：

我同意使用脚本来控制操作是一个坏主意，但我不同意将所有内容都移动到查询参数，特别是如果方法是 POST。

我真的没有选择更改我正在编写的 API -- 规范和所有内容。

+1 但我实际上不明白为什么改变动作是糟糕的设计。除非有一些具体的反对意见/缺点，否则设计没有任何问题。请考虑说明为什么您认为这是糟糕的设计，或者从答案中删除断言:)

@RudiKershaw — 原因就在答案中：“您的服务器处理 URI 更加健壮”。将逻辑放在服务器上意味着对它正确运行的信心更大，因为它消除了对客户端脚本的依赖。无论如何都会发送来自输入的值。

【参考方案2】：

感谢 RobG

我在从移动应用程序调用 WhatsApp 时使用了同样的方法

效果很好

<form action="https://wa.me/" 
onsubmit="this.action = this.action + this.mobile.value; this.submit();">
  <input type="tel" name="mobile" size="10" value="91xxxxxxxxxx"/>
  <input type="text" name="text" value="Thanks Vijayan!" />
  <input type="submit" value="WhatsApp" />
</form>

【参考方案3】：

如果您使用 php 生成 html，下面的代码应该可以工作（未经测试）。

$book_id = 459;
<form action="/books/$book_id">...</form>

或者，您可以使用 JavaScript 动态修改 html。最好不要这样做，因为有些用户可能会禁用 JavaScript。 （未经测试）

$('form').attr('action','/books/' + book_id);