Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 138279

Having trouble with Javascript ordering form not calculating

$
0
0

So I'm getting a null error with my order form when I'm trying to calculate the total using javascript. I believe I have everything done. I get an error on line 13 below that starts with .innerHTML

<script type="text/javascript">
function doTotals() {

var strains = ['guptakush_', 'headbandguptakush_', 'purplejuicyfruitguptakush_', 'hibiscussunrise_', 'criticalkushguptakush_', 'columbiagoldguptakush_', 'grapeapeguptakush_', 'krishnakush_', 'durbinpoisonguptakush_', 'purpleeurkleguptakush_', 'columbiagoldafgani_', 'kandykushguptakush_', 'hibiscussunriseafgani_', 'afgani_', 'grapeapeafgani_', 'krishnaafgani_', 'hashplantafgani_', 'durbinpoisonafgani_'];
var priceStr = 'price';
var quantityStr = 'quantity';
var subtotalStr = 'subtotal';
var total = 0.00;
for (var i = 0; i < strains.length; i++) {
    var price = document.getElementById(strains[i] + priceStr).value;
    var quantity = document.getElementById(strains[i] + quantityStr).value;
    document.getElementById(strains[i] + subtotalStr)
        .innerHTML = parseInt(price) * parseInt(quantity);
    total += price * quantity;
}
document.getElementById("finaltotal").innerHTML = total;
}

function setup() {
var lastCol = document.getElementById("subtotal_header");

var theForm = document.getElementById("orderform");

var amounts = document.getElementsByTagName("select");
for(var i = 0; i < amounts.length; i++){
    amounts[i].onchange = doTotals;
}

}

window.onload = setup;

</script>

Here is the HTML that is associated just one example they are all the same with unique id and names.

<div class="form-group mb-3">
<label class="form-control-label" for="guptakush_quantity">Gupta Kush</label>
<input type="hidden" id="guptakush_price" value="1.00">
<select class="form-control-inline form-control-sm" id="guptakush_quantity" name="guptakush_quantity" size="1">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<input type="hidden" id="guptakush_subtotal">
</div>
<div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">$</div>
    </div>
<input type="text" class="form-control-inline col-sm-1" id="finaltotal" name="finaltotal" placeholder="$0.00" readonly>
</div>

Full Example: https://jsfiddle.net/dg260zxf/

Also if I could just make this work without the subtotal since I don't think it's necessary that would be awesome.


Viewing all articles
Browse latest Browse all 138279

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>