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

Question

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

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

这导致

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

但是，在我的 webapp 中，我使用的是路径参数。要访问图书馆中的一本书，#459，您将访问

/books/459

并检查一个，发布到

/books/459/checkout

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

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

它需要我

/books/%7Bbook_id%7D

而不是

/books/459

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

Answer 1

你可能需要类似的东西：

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

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

Answer 2

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

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

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

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

Answer 3

• 感谢 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>