在每個按鍵上都有表格提交

我有一個貨幣計算器，需要按鈕才能將貨幣轉換爲/從貨幣轉換。我想使它能夠在輸入任何內容後立即轉換（運行表單）。目前，處理按鈕點擊的jQuery看起來像這樣（這是兩個點擊處理程序之一）：在每個按鍵上都有表格提交

 $('#convertFromButton').click(function() { 
      $("#currencySelectValue2").val($("#currencySelect").val()); 
      $("#btcValueForm").val($("#btcValue").val()); 
      $.post("php/convertFromForm.php", $("#convertFromForm").serialize(), function(data){ 
       $('#fromCurrencyValue').removeClass('intra-field-label'); 
       $('#fromCurrencyValue').val(data); 
      }); 
     });

第一個文本字段是#fromCurrencyValue，第二個是#btcValue。

我怎樣才能以我描述的方式工作？

來源

2011-06-14 AKor

我會做

$('#formCurrencyValue, #btcValue').keyup(function() {$('#convertFromButton').click(); });

那麼如果你改變了你的任何提交邏輯，它會發布ge爲所有事件

我把它切換到了keyup。這應該註冊每個按鍵。

來源

2011-06-14 22:07:01 Rob

你錯過了a）;在行末。 – 2011-06-14 22:07:45

輝煌，這個作品很棒。唯一的小東西 - 當我退格時，表單不會提交。我可以在這裏包括退格（也允許粘貼數字）嗎？ – AKor 2011-06-14 22:17:04

// if you keyup in fromCurrencyValue or btcValue it will trigger the click on convertFromButton 
$("#fromCurrencyValue, #btcValue").bind("keyup", function() { 
    $('#convertFromButton').click(); 
});

但是請記住，$。員額是默認異步的，所以如果一個請求，後來問的答案之前，其他的，你將有不受歡迎的行爲。

編輯

當張貼值使用此：

var xhr; // make it global 

/* 
    Your code goes here 
*/ 
if (xhr) 
    xhr.abort(); // if there's a xhr request abort it 

xhr = $.post(...) 
/* 
    The rest of your code 
*/

所以你不會得到意外行爲:)

來源

2011-06-14 22:06:08

我將與其他人不同，並說明確地從其他函數/事件中調用事件處理程序是這是一種應該避免的骯髒做法。你可以做得更清楚，做到以下幾點：

var xhr; 
    function refresh() { 
     $("#currencySelectValue2").val($("#currencySelect").val()); 
     $("#btcValueForm").val($("#btcValue").val()); 
     if(xhr) xhr.abort(); 
     xhr = $.post("php/convertFromForm.php", $("#convertFromForm").serialize(), function(data){ 
      $('#fromCurrencyValue').removeClass('intra-field-label').val(data); 
     }); 
    } 

    //Bind as many things as you want to your new function. Also easily unit tested! Yay! 
    $('#convertFromButton').click(refresh); 
    $('#fromCurrencyValue, #btcValue').keyup(refresh)

來源

2011-06-14 22:16:07

我們還應該考慮一下這個事實，即Jquery帖子是Async，而之前調用的帖子有時可能會覆蓋以後調用的帖子。 – 2011-06-15 01:35:16

充分考慮。我已經更新來處理這種情況。 – 2011-06-15 12:32:42

在每個按鍵上都有表格提交

回答

相關問題