jQuery Calculate input Fields

jQuery Calculate input Fields

by Good Muyis

HTML

<script src="https://www.jqueryscript.net/demo/Do-Calculations-Form-Fields-AutoCalc/dist/jautocalc.js"></script>
<div id="row1" class="row">
	<select id="edit-field-rental-items-und-0-field-rental-item-und--4" name="field_rental_items[und][0][field_rental_item][und]" class="form-select item">
		<option value="_none">- None -</option>
		<option value="3" selected="selected">  Canopy - Maxi [18x13m]  -  8,000  -   </option>
		<option value="2">  Canopy - Midi [12x12m]  -  5,000  -   </option>
		<option value="1">  Canopy - Mini [10x10m]  -  3,000  -   </option>
	</select>


	<input type="text" name="qty" class="qty" value="1" placeholder="Unit">
	<input type="text" name="price" class="price" value="20" placeholder="Price">
	<input type="text" name="item_total" class="total" value="" placeholder="Total">
</div>
<div id="row2" class="row">
	<select id="edit-field-rental-items-und-0-field-rental-item-und--3" name="field_rental_items[und][0][field_rental_item][und]" class="form-select item">
		<option value="_none">- None -</option>
		<option value="3" selected="selected">  Canopy - Maxi [18x13m]  -  8,000  -   </option>
		<option value="2">  Canopy - Midi [12x12m]  -  5,000  -   </option>
		<option value="1">  Canopy - Mini [10x10m]  -  3,000  -   </option>
	</select>
	<input type="text" name="qty" class="qty" value="1" placeholder="Unit">
	<input type="text" name="price" class="price" value="20" placeholder="Price">
	<input type="text" name="item_total" class="total" value="" placeholder="Total">
</div>
<hr>
<input type="text" name="total" value="">

CSS

.row{
	border: 1px solid #222;
	margin-bottom: 10px;
	padding: 3px;
}
input{max-width:100px}

JavaScript

$(document).ready(function() {



	$('.qty').keyup(function(){
		//$(this).parent().$('.total').val('12');
		var itemSelected = $(this).siblings('.form-select').children("option:selected").text();
		var itemPrice = parseInt( itemSelected .split(']').pop().replace(/[_\W]+/g, "") );
		console.log(itemPrice);
		//alert("You have selected: " + itemSelected );
		$(this).siblings('.total').val( itemPrice);

	})


	$(".form-select"). change(function(){
		var selectedCountry = $(this). children("option:selected").text();
		var selectedCountry = selectedCountry .split(']').pop().replace(/[_\W]+/g, "");
		//alert("You have selected: " + selectedCountry );
	});

//end of ready
})