How to display total in input box using javascript

Question

I'm trying to figure out how to load the total into an input box rather than a span. A similar question shows this

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

as the anwser, but I'm not doing something right. Could use a little help figuring where this should go.

The Script below works great, I just need the total in a input box.

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

Then My 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

Change the span to an input

<input id="cbGroup1Total" />

and the javascript to match

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);
}

Answer 2

Keep the Total: $ text in your span and put the actual dollar amount in 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);
}