Search code examples
javascriptcheckboxtextbox

Select only Checkbox input in getElementsByTagName, exclude the Textbox input


I have one problem. The systems works fine when I select the checkboxes, the Total value changes, but as soon as I modify the text input, it changes to 0. I need to exclude this textbox input from changing the value.

here is the html:

       <input type="checkbox" id="15000"/>$15000<br/>
       <input type="checkbox" id="9400"/>$9400<br/>
       <label>Quantity</label><input class="text" type="text" maxlength="3" size="2" value="1" name="qty"></input>

       <div id="total">$5000</div>

Here is the javascript:

  var input = document.getElementsByTagName("input");
  var total = document.getElementById("total");

  var prev;

  for(i=0;i<input.length;i++){
  input[i].onchange = function(){
    if(this.checked){
    $("#total").fadeOut(300);
    $("#total").fadeIn(300);
    prev=parseFloat(total.innerHTML.replace(/[^0-9\,]+/g,"")) + parseFloat(this.id);
         total.innerHTML = "$ " + prev.formatMoney(0, ',', '.');
    }else{
     $("#total").fadeOut(300);
     $("#total").fadeIn(300);
     prev=parseFloat(total.innerHTML.replace(/[^0-9\,]+/g,"")) - parseFloat(this.id);
         total.innerHTML = "$ " + prev.formatMoney(0, ',', '.');
    }
  }
}

Here is the fiddle: http://jsfiddle.net/M7My9/1/


Solution

  • Add if(this.type=='text') in the first line of onchange handler to detect the type of the input