javascript - 使用 jquery 动态更改 HTML5 <button> 的 formaction

Question

我有一个表单，其中包含执行单独操作的不同多个提交按钮。

其中一个按钮是添加数量字段的 Bootstrap 模式的一部分。当我按下此按钮时，我希望它将数量字段的值添加为 url 参数。例如，用户在数量文本字段中输入 25 并单击“提交”，他们应该将表单数据 POST 到页面 www.example.com/folder/?quantity=25。

不幸的是，我对 javascript 和 jquery 完全是新手，所以我尝试修改别人关于如何更改表单操作以在我的按钮上工作的问题的答案。

现在我的模式和提交按钮正在工作，但按钮的 formaction 没有改变。我还尝试使用下面的脚本更改表单的操作并从按钮中删除该操作，但没有成功。

任何帮助将不胜感激。此外，我不关心不支持旧版浏览器。如果只有 Firefox 和 Chrome 支持，对我来说就足够了。

<div class="modal fade bs-order-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<input type='text' name='quantity' id="quatity">
<li><button name='btn-add' id='btn-add' type="submit" form="id-details" formaction="/inventory/order/" class="btn btn-info">Add to Order List</button></li>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/docs.min.js"></script>

<script>
  $(function() {
   $('#btn-add').submit(function(){
     var quantity = $('#quantity').val();
     $(this).attr('formaction', "/inventory/order/?quantity=" + quatity);
   });
  });
</script>

Answer 1

问题是按钮没有提交事件 - 表单有。你想要做的是修改按钮的点击事件。另外为了安全起见，我更喜欢在附加事件时使用 $(document).ready() :

$(document).ready(
    function () {
        $('#btn-add').on('click', function () {
            var quantity = $('#quatity').val(); // Your ID on the "quantity" input is missing an "n"
            $(this).attr('formaction', "/inventory/order/?quantity=?quantity=" + quantity);
        });
    });

最后，您可能需要添加一些基本验证，以确保文本框中的值不为空或字母数字。