如何使用javascript在輸入框中顯示總數

Question

我想弄清楚如何將總數加載到輸入框而不是跨度。類似的問題顯示了這個

document.getElementById("number").value = xmlhttp.responseText;

爲anwser，但我沒有做正確的事情。可以使用一些幫助來確定應該去哪裏。

下面的腳本很好，我只需要一個輸入框中的總數。

<script type="text/javascript"><!-- 

var isOldSafari=(navigator.userAgent.search(/Safari\/(85|1\d\d)\D/i)!=-1); 

function dss_addEvent(el,etype,fn) { 
    var tN = el.tagName?el.tagName.toLowerCase():''; 
    if(el.addEventListener && (!window.opera || opera.version) && 
    (etype!='load') &&(!isOldSafari || ((tN!='input') && (tN!='textarea')))) { 
    el.addEventListener(etype,fn,false); 
    } else if(el.attachEvent) { 
    el.attachEvent('on'+etype,fn); 
    } else { 
    var tempFunc; 
    if(typeof el['on'+etype] == "function") tempFunc=el['on'+etype]; 
    el['on'+etype] = function() { 
     if(typeof tempFunc == "function") tempFunc(); 
     if(typeof fn == "function") fn(); 
    } 
    } 
} 

if(typeof(Number)!='undefined'&&typeof(Number.prototype)!='undefined'){ 
    if(typeof(Number.prototype.toFixed)=='undefined'){ 
    // for IE versions older than 5.5 and Netscape 4.x 
    // for this script it's only used in IE5.x, though because of the DOM1 
    // support requirement 
    Number.prototype.toFixed=function(d){ 
     var n=this; 
     d=(d||((d==0)&&(typeof(d)=='number')))?d:2; 
     var f=Math.pow(10,d); 
     n=((Math.round(n*f)/f)+Math.pow(10,-(d+1)))+''; 
     return n.substring(0,(d==0)?n.indexOf('.'):n.indexOf('.')+d+1); 
    } 
    } 
} 

var checkboxItemValue = { 
    'cb1':'50.00', 
    'cb2':'45.00', 
    'cb3':'25.00' 
}; 

function updateTotal() { 
    if(!document.getElementsByTagName) return; 
    var cbs = document.getElementById('cbGroup1').getElementsByTagName('input'); 
    var total = 400,num; 
    for(var i=0;i<cbs.length;i++) { 
    if(cbs[i].checked) { 
     num=parseFloat(checkboxItemValue[cbs[i].id]); 
     if(!isNaN(num)) total += num; 
    } 
    } 
    var b = document.getElementById('cbGroup1Total'); 
    b.value = 'Total: $ '+total.toFixed(2); 
} 


function addEventsToCBGroup1() { 
    if(!document.getElementsByTagName || !document.createTextNode) return; 
    var cbs = document.getElementById('cbGroup1').getElementsByTagName('input'); 
    for(var i=0;i<cbs.length;i++) { 
    dss_addEvent(cbs[i],'click',updateTotal); 
    } 
} 



dss_addEvent(window,'load',addEventsToCBGroup1); 
dss_addEvent(window,'load',updateTotal); 
// --> 
</script> 

然後我的HTML

<form name="form1" action="#" 
onsubmit="return false;"><fieldset><legend>Options:</legend> 
<ul class="checkboxes" id="cbGroup1"> 
    <li><input type="checkbox" name="cb1" id="cb1"> 
    <label for="cb1">Fishing Package $50.00</label></li> 
    <li><input type="checkbox" name="cb2" id="cb2"> 
    <label for="cb2">Snorkel Package $45.00</label></li> 
    <li><input type="checkbox" name="cb3" id="cb3"> 
    <label for="cb3">Ski Package $25.00</label></li> 

</ul> 
<input id="cbGroup1Total" /> 

</fieldset></form> 

Answer 1

保持Total: $文本在span和把實際金額在input type=text：

HTML：

<span>Total: $</span><input type="text" id="cbGroup1Total" value=''/> 

的Javascript：

function updateTotal() { 
    ... 
    ... 
    var txtTotal = document.getElementById('cbGroup1Total'); 
    txtTotal.value = total.toFixed(2); 
} 

Answer 2

更改跨度輸入

<input id="cbGroup1Total" /> 

和JavaScript來匹配

function updateTotal() { 
    if(!document.getElementsByTagName) return; 
    var cbs = document.getElementById('cbGroup1').getElementsByTagName('input'); 
    var total = 400,num; 
    for(var i=0;i<cbs.length;i++) { 
    if(cbs[i].checked) { 
     num=parseFloat(checkboxItemValue[cbs[i].id]); 
     if(!isNaN(num)) total += num; 
    } 
    } 
    var b = document.getElementById('cbGroup1Total'); 
    b.value = 'Total: $ '+total.toFixed(2); 
}