Question

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

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

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

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

非常感谢任何帮助。此外，我不关心不支持旧浏览器。如果只是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);
        });
    });

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

使用jquery </button>动态更改HTML5 <button>的格式

1 个答案: