CODEWITHSUNDEEP
javascriptjqueryhtml
Vitalii
Vitalii

Reputation: 13

How to sum up the data between <input> and <select> in JS?

I've just found found this very useful code, but not exactly for my purpose.

I need to display automatically the sum between entered data in input and selected option.

For example, the user entered number 20 in the input and selected option "Wood", which is means to multiply *20 and result would be 400.

How is this possible?

Thank you!

function calculate(){
		var width = $('#width').val();
		var height = $('#height').val();
		var S =  width * height;
		var total = width * height * 2500;
		var newTotal = Math.round(total);	
		$('#fc_priceValue').html(newTotal);
}
<div class="calculator">
    <div class="goup_param">
        <label>Width: <input type="text" class="form_price" name="width" id="width" value="" placeholder="0" oninput="calculate()" /></label>
        <br />
        <br />
        <label>Height: <input type="text" class="form_price" name="height" id="height" value="" placeholder="0" oninput="calculate()" /></label>
        <br />
        <br />
        <label>Material</label>
        <br />
        <select >
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
        </select>
    </div>
    </div>
    <div class="total">
        <span id="fc_priceValue"></span> &#8381;
        <span id="fc_square" class="field">/ <span id="fc_squareValue">100</span> <span id="fc_squareMeas">м</span><sup>2</sup></span>
    </div>

https://jsfiddle.net/azavff56/1/

Upvotes: 1

Views: 65

Answers (1)

mugimugi
mugimugi

Reputation: 446

You can have a list like this one:

<select id="materials" onchange="calculate()">
    <option value="10">Wood</option>
    <option value="100">Steel</option>
</select>

Then, in calculate function we get the value of selected material:

var materialCost = $('#materials option:selected').val();

Finally, multiple materialCost with total value.

Upvotes: 1

Related Questions