CODEWITHSUNDEEP
javascriptjquery
gomoguy
gomoguy

Reputation: 31

implement cost for select items then total

I am still trying to dissect this code that I got from here, works great but I need to implement a cost amount into it as well.

I have the script setup to do price * qty, but I am trying to figure out how to do price - cost * qty.

I am new to scripting and am trying to figure this out

this is how the html looks

<select name="item" id="item" size="1">
              <option value="">Device</option>
              <option value="200.00">iPhone 4</option>
              <option value="300.00">iPhone 4S</option>
              <option value="450.00">iPhone 5</option>
              <option value="300.00">Galaxy S3</option>
              <option value="450.00">Galaxy S4</option>
              <option value="450.00">Galaxy Note ll</option>
              <option value="600.00">Galaxy Note lll</option>
              <option value="700.00">Galaxy S5</option>
              <option value="500.00">HTC One</option>
              <option value="650.00">HTC One M8</option>
            </select>
          </div></td>
          <td><div align="center">
            <div align="center"><span id="price"></span></div>
          </div></td>
            <td height="43">
                <div align="center"><span id="cost"></span></div>
            </td>
            <td>
                <div align="center">

                  <input name="qty" type="Text" id="qty" size="2" maxlength="3"/>
                </div>
            </td>


            <td>
                <div align="center">
                    <span id="result"></span>

and this is what the script looks like.

var phones = document.getElementById('phones');
var phones1 = document.getElementById('phones1');
var phones2 = document.getElementById('phones2');
var phones3 = document.getElementById('phones3');

item.onchange = function() {
        price.innerHTML = "$" + this.value;
        qty.value = 1; //Order 1 by default.
        add();
    };

function add() {
  var inputs = document.getElementsByTagName('input');
  var selects = document.getElementsByTagName('select');

  var total = 0;
  var taxes = 0;
  for (var i = 0; i < selects.length; i++) {
    var sum = 0;
    var price = (parseFloat(selects[i].value) )?parseFloat(selects[i].value):0;
    var qty = (parseFloat(inputs[i].value) )?parseFloat(inputs[i].value):0;
    sum += price * qty;
    total += sum * 1.06
    taxes += sum * 0.06
    if(i == 0){
      document.getElementById('result').innerHTML = "$" + sum;
    }else{

      document.getElementById('result'+i).innerHTML = "$" + sum;
    }             
  };

  document.getElementById('total').innerHTML = "$" + total.toFixed(2);
  document.getElementById('taxes').innerHTML = "$" + taxes.toFixed(2);

}

is there a way, I can incorporate a second value in the option and use a reference to it in the script? I just can figure it out.

I did try adding a 

<option value="200.00" value2="100">iPhone 4</option>

and then put it in the script like this

item.onchange = function() {
    price.innerHTML = "$" + this.value;
    cost.innerHTML = "$" - this.value;
    qty.value = 1; //Order 1 by default.
    add();
};

but it did not work

Upvotes: 0

Views: 97

Answers (1)

mucio
mucio

Reputation: 7119

Try this way:

item.onchange = function() {
        price.innerHTML = "$" + this.value;
        cost.innerHTML = "$" + (-this[this.selectedIndex].getAttribute('value2'));
        qty.value = 1; //Order 1 by default.
        add();
    };

And then modif add() in this way:

var cost = (parseFloat(selects[i][selects[i].selectedIndex].getAttribute('value2')) )?parseFloat(selects[i][selects[i].selectedIndex].getAttribute('value2')):0;
var qty = (parseFloat(inputs[i].value) )?parseFloat(inputs[i].value):0;

sum += (price - cost) * qty;

What you need to do is to use getAttribute() to get value2 and use .selectedIndex property to identify the selected option in the dropdown control.

Or at least this is my explanation.

It's working here

Upvotes: 1

Related Questions