用jquery動態改變HTML5 <button>的形態

Question

我有一個表單，它具有不同的多個提交按鈕來執行單獨的動作。

其中一個按鈕是添加數量字段的引導模式的一部分。當我按下此按鈕時，我希望它將數量字段的值添加爲url參數。例如，用戶在數量文本字段中輸入25並點擊提交，他們應該將表單數據發佈到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); 
     }); 
    }); 

最後，你可能想添加一些基本的驗證，以確保在文本框中的值不爲空或字母。