獲取表單字段隱藏和填充

我有3個字段：總額定期量紀錄獲取表單字段隱藏和填充

的用戶將始終輸入事件，但無論是進入總金額或重複量的選擇。

這個公式非常簡單：紀錄*經常性金額=總金額

我需要幫助，使得其在用戶開始在總量字段中鍵入一個Javascript功能，重複量被禁用。如果他們首先進入經常性金額，情況也是如此。一旦用戶輸入發生次數和其中一個金額，應計算剩餘金額並替換禁用的字段。

我需要該函數能夠讓用戶更改任何數字，並重新計算。另外，如果用戶完全從金額中刪除一個值，另一個金額字段應該再次變爲活動狀態。

我從來沒有寫過Javascript代碼，只編輯過。任何幫助指出我在正確的方向是值得讚賞的。謝謝

來源

2010-08-02 clang1234

這會不會是完美的，但它應該是一個不錯的開始：

您可以在http://jsfiddle.net/qzxf7/

查看該代碼的互動演示，您沒有給我們你的HTML，所以我要去你使用像這樣的假設：

<form action="" method="POST"> 
    <input type="text" name="occurences" id="occurences" value="" /> 
    <input type="text" name="recurringAmt" id="recurringAmt" value="" /> 
    <input type="text" name="totalAmt" id="totalAmt" value="" /> 
</form>

如果您還沒有處理的Javascript之前，我會建議你使用jQuery是進口的問題jQuery腳本在您的HTML <head>。

使用jQuery，你可以像這樣的代碼開始，這是過於複雜，但會引發你如何處理殘疾的東西以及價值更新。

/* On page contents loaded */ 
function updateForm() { 
    var occ = $('#occurences'); 
    var occV = parseFloat(occ.val()); 
    occV = occV >= 0 ? occV : 0; 
    var rec = $('#recurringAmt'); 
    var recV = parseFloat(rec.val()); 
    recV = recV >= 0 ? recV : 0; 
    var tot = $('#totalAmt'); 
    var totV = parseFloat(tot.val()); 
    totV = totV >= 0 ? totV : 0; 

    /* If total is disabled */ 
    if (tot.attr("disabled")) { 
     if (rec.val() == '') { /* if no text in rec */ 
     tot.removeAttr("disabled"); /* Reenable total */ 
     tot.val(''); 
     return; 
     } 
     /* Otherwise update total */ 
     tot.val(recV * occV); 
     return; 
    } 

    /* If rec is disabled */ 
    if (rec.attr("disabled")) { 
     if (tot.val() == '') { /* if no text in total */ 
     rec.removeAttr("disabled"); /* Reenable rec */ 
     rec.val(''); 
     return; 
     } 
     /* Otherwise update rec watching for divide by zero error */ 
     rec.val(occV > 0 ? totV/occV : 0); 
     return; 
    } 

    /* Otherwise neither disabled */ 

    if (recV > 0) { /* if rec has a number value */ 
     tot.attr("disabled", true); /* disable total */ 
     tot.val(recV * occV); /* update total */ 
     return; 
    } 


    if (totV > 0) { /* if total has a number value */ 
     rec.attr("disabled", true); /* disable rec */ 
     /* Update rec watching for divide by zero error */ 
     rec.val(occV > 0 ? totV/occV : 0); 
     return; 
    } 
} 

$(document).ready(function() { 
    $('#occurences').keyup(function(){ 
    updateForm(); 
    }); 
    $('#totalAmt').keyup(function(){ 
    updateForm(); 
    }); 
    $('#recurringAmt').keyup(function(){ 
    updateForm(); 
    }); 
});

來源

2010-08-02 04:37:06

這工作完美。並感謝現場演示。我已經爲jsfiddle添加了書籤。似乎很方便 – clang1234 2010-08-02 15:39:46

不知道爲什麼你認爲禁用字段是一個好主意。我認爲用戶體驗明智的做法是允許他們隨時編輯任何字段，根據需要調整其他字段。

<input id="recurring" onchange="onRecurEdit()"> * 
<input id="occurences" onchange="onOccurEdit()"> = 
<input id="total" onchange="onTotalEdit()"> 
<script>  
    var recur = document.getElementById('recurring'); 
    var total = document.getElementById('total'); 
    var occur = document.getElementById('occurences'); 

    function onTotalEdit() { 
    recurring.value = total.value/occur.value; 
    } 

    function onRecurEdit() { 
    total.value = occur.value * recur. value; 
    } 

    function onOccurEdit() { 
    total.value = occur.value * recur. value; 
    } 
</script>

來源

2010-08-02 04:22:50 levik

那也沒關係。重要的部分是計算。 – clang1234 2010-08-02 04:24:22

添加了一些示例代碼。 – levik 2010-08-02 04:28:19

這裏的部分是什麼，你可能會尋找：代碼使用JQuery的

JS代碼：

 $(document).ready(function() { 

      function roundNumber(num, dec) { 
       var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec); 
       return result; 
      } 

      function calculateTot(evt) { 
       var o = Number($("#occur").val()); 
       var a = Number($("#recAmt").val()); 

       if(!isNaN(0) && !isNaN(a)) { 
       var tot = roundNumber(o * a, 2); 
       $("#totalAmt").val(tot); 
       }else { 
       $("#totalAmt").val("0"); 
       } 
      } 

      $("#occur").bind("change", calculateTot); 
      $("#recAmt").bind("change", calculateTot); 

    });

HTML的一樣：

 <input type="text" id="occur" /> * 
    <input type="text" id="recAmt" /> = 
    <input type="text" id="totalAmt" readonly="readonly" />

來源

2010-08-02 04:47:48 naikus

獲取表單字段隱藏和填充

回答

相關問題