0

I'm trying to make calculations on multiple fields having different data but when i add them calculations are only done on the first set of fields but the other fields i add, the javascript does not seem to work. Plus i want to save those data in an array.

Here's my HTML code to display the select box and the input fields

<div id="addon_details">
    <div class="form-group col-md-6">
        <label for="name">Select Addon Package</label>
        <select id="addon" name="type[]" class="form-control">
            <option value="Radio">Radio</option>
            <option value="Lamp">Lamp</option>
            <option value="Phone">Phone</option>
            <option value="Battery">Battery</option>
            <option value="Antenna">Antenna</option>
        </select>
    </div>
    <div class="form-group col-md-2">
        <label for="name">Quantity</label>
        <input type="number" class="form-control" name="quantity[]" placeholder="Qty" id="qty[]" onchange="calculate();">
    </div>
    <div class="form-group col-md-4">
        <label for="name">Total Price</label>
        <input type="number" class="form-control" name="total[]" placeholder=""  readonly="" id="price">
    </div>
</div>

Then when I click on add package button it adds another set of fields 

<div class="form-group col-md-12 col-md-offset-2">
    <button type="button"  class="btn btn-info btn-addon m-b-sm"><i class="fa fa-plus" aria-hidden="true" id="add_success"></i>Add Package</button>
    <button type="submit"  class="btn btn-info btn-addon m-b-sm"><i class="fa fa-refresh" aria-hidden="true"></i>Upgrade</button>
    <button type="button"  class="btn btn-default btn-addon m-b-sm"><i class="fa fa-close" aria-hidden="true"></i>Cancel</button>
</div>

Also here's the javascript to compute:

function calculate(){
    var qty = document.getElementById('qty[]').value;
    var radio = 1000 ;
    var price = "";

    if(document.getElementById('addon').value == "Radio") {
        price = parseInt(qty) * radio;
        document.getElementById('price').value = price;
    }
}

But unfortunately for me, I can only do calculation on the first set of fields but the other fields the calculation are not possible.

Below you can see what I'm trying to do graphically enter image description here

Any help is appreciated. Thank you!

Barmar
  • 741,623
  • 53
  • 500
  • 612
Dacy
  • 21
  • 5
  • 1
    IDs are supposed to be unique. `document.getElementById` will only return the first element with the ID. Use classes, and use DOM traversal functions to find the field with the desired class that's associated with the one you're processing. This would be easier if you used jQuery than plain Javascript. – Barmar Jul 14 '17 at 16:04
  • You want the onchange event. Everytime that's fired you recalculate values. Then when submit is called you pass the data to your server or what have you. – Aquila Sagitta Jul 14 '17 at 16:28

1 Answers1

0

As @Barmar suggests, you need to make your ID's unique. In your example your initial addon id could be addon1 like this:

   <select id="addon1" name="type[]" class="form-control">...</select>

As you use your add package button, you would have to generate the next number for the select, like:

  <select id="addon2" name="type[]" class="form-control">...</select>
  <select id="addon3" name="type[]" class="form-control">...</select>

etc...

You could then have your function traverse all the fields with partial matches on addon id. This SO link would help you understand how you might do that.

jco
  • 667
  • 10
  • 23