获取表单字段隐藏和填充

我有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

获取表单字段隐藏和填充

回答

相关问题