Skip text input value when calculating the VAT

Skip text input value when calculating the VAT - javascript

I have simple script which calculates the VAT:
<script>
function count(){
price = document.getElementById("price").value;
vat = document.getElementById("vat").value;
total = price*(1+vat/100);
document.getElementById('total').innerHTML=total;
}
</script>
<input size="20" MAXLENGTH="20" id="price" name="price" type="text" value="" onkeyup="count();">
<select id="vat" onchange="count();">
<option VALUE="22">22 %</option>
<option VALUE="7">7 %</option>
<option VALUE="33">33 %</option>
<option VALUE="ZW">ZW</option>
</select>
<span id="total"></span>
Here is how this script
I want to do to the script, when I will choose from the selection list the value of a text (eg. "ZW"), then the script to ignore this value and the result showed only entered value in the field.

function count(){
price = document.getElementById("price").value;
vat = document.getElementById("vat").value;
if (isNaN(vat))
total=price;
else
total = price*(1+vat/100);
document.getElementById('total').innerHTML=total;
}
<input size="20" MAXLENGTH="20" id="price" name="price" type="text" value="" onkeyup="count();">
<select id="vat" onchange="count();">
<option VALUE="22">22 %</option>
<option VALUE="7">7 %</option>
<option VALUE="33">33 %</option>
<option VALUE="ZW">ZW</option>
</select>
<span id="total"></span>

An easy fix would be to replace:
<option VALUE="ZW">ZW</option>
with:
<option VALUE="0">ZW</option>
This way, all options are consistent with each other. And that would save yourself a specific test where you don't really need one.
function count(){
price = parseFloat(document.getElementById("price").value);
vat = parseFloat(document.getElementById("vat").value);
total = price*(1+vat/100);
document.getElementById('total').innerHTML=total.toFixed(2);
}
<input size="20" MAXLENGTH="20" id="price" name="price" type="text" value="" onkeyup="count();">
<select id="vat" onchange="count();">
<option VALUE="22">22 %</option>
<option VALUE="7">7 %</option>
<option VALUE="33">33 %</option>
<option VALUE="0">ZW</option>
</select>
<span id="total"></span>

Related

Automatically insert the input form by selectpicker

I want to make auto input by selectpicker then calculate that form, but my code below is not auto input except I click first the input form, the calculate javascript is working but I want to make the Input Price automatically has value when i select the package & trip without click the input form first.
sorry for my bad english grammar and i just started learning programming. thank you, this my code below :
HTML
<label>Package</label>
<select onblur="findTotal()" class="selectpicker" id="package">
<option value="" disabled selected>Select package...</option>
<option value="Engagement">Engagement</option>
<option value="Wedding">Wedding</option>
<option value="Other">Other</option>
</select>
<br/>
<label>Trip</label>
<select onblur="findTotal()" class="selectpicker" id="trip">
<option value="" disabled selected>Select trip...</option>
<option value="shorttrip">Short Trip</option>
<option value="longttrip">Long Trip</option>
</select>
<br/><br/>
<label>Package Price</label>
<input onblur="findTotal()" type="text" name="qty" id="packageprice" placeholder="autoinput by selectpicker" />
<br/>
<label>Trip Price</label>
<input onblur="findTotal()" type="text" name="qty" id="tripprice" placeholder="autoinput by selectpicker" />
<br/>
<label>Tip</label>
<input onblur="findTotal()" type="text" name="qty" placeholder="manual input" />
<br/><br/>
<label>Total Price</label>
<input type="text" name="result" id="total" />
JAVASCRIPT
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
var paket = document.getElementById('package').value;
var trp = document.getElementById('trip').value;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
if (paket == "Engagement") {
document.getElementById('packageprice').value = "1000";
} else if (paket == "Wedding") {
document.getElementById('packageprice').value = "2000";
} else {
document.getElementById('packageprice').value = "0";
}
if (trp == "shorttrip") {
document.getElementById('tripprice').value = "3000";
} else if (trp == "longttrip") {
document.getElementById('tripprice').value = "4000";
} else {
document.getElementById('tripprice').value = "0";
}
document.getElementById('total').value = tot;
}
or you can view the code on JS Fiddle here : http://jsfiddle.net/ryh7vpwa/5/

You should use oninput instead of onblur on the elements implementing findTotal function
<select oninput="findTotal()" class="selectpicker" id="package">
<option value="" disabled selected>Select package...</option>
<option value="Engagement">Engagement</option>
<option value="Wedding">Wedding</option>
<option value="Other">Other</option>
</select>
<br/>
<label>Trip</label>
<select oninput="findTotal()" class="selectpicker" id="trip">
<option value="" disabled selected>Select trip...</option>
<option value="shorttrip">Short Trip</option>
<option value="longttrip">Long Trip</option>
</select>

How to select and get two input value?

I have an issue when I select an option it will get the input value perfectly but I want to add one more input value which is email so for example,
when I select (Elvis) option & get two value phone and email in different input field.
<select class="name" name="name[]">
<option value="" selected="selected">Please select...</option>
<option value="Elvis" data-phonenumber="11111" data-email="abc#gmail.com">Elvis</option>
<option value="Frank" data-phonenumber="22222" data-email="123#gmail.com">Frank</option>
<option value="Jim" data-phonenumber="33333" data-email="123#gmail.com">Jim</option>
</select>
<input type="text" class="phonenumber" name="phonenumber[]" value="" >
<input type="text" class="email" name="email[]" value="" >
<br />
<select class="name" name="name[]">
<option value="" selected="selected">Please select...</option>
<option value="Elvis" data-phonenumber="11111" data-email="abc#gmail.com">Elvis</option>
<option value="Frank" data-phonenumber="22222" data-email="123#gmail.com">Frank</option>
<option value="Jim" data-phonenumber="33333" data-email="123#gmail.com">Jim</option>
</select>
<input type="text" class="phonenumber" name="phonenumber[]" value="" >
<input type="text" class="email" name="email[]" value="" >
<br />
here is script
<script>
$(document).ready(function() {
$('.name').live('change', function() {
$(this).next($('.phonenumber')).val($(this).find('option:selected').attr('data-phonenumber'));
})
});
</script>

Hope it helps. I've used jquery
-edit----
code indent and added comments
//body render wait
$(document).ready(function (){
//loop selects with "name" class a attach change callback on each
$('.name').each(function(idx, elem){
$(elem).change(function(){
//get selected option element
var option = $(this).find(':selected');
//get phone number data
var p = $(option).data('phonenumber');
//get email data
var e = $(option).data('email');
//find next phonenumber input and set value
$(elem).parent().find('.phonenumber').val(p);
//find next email input and set value
$(elem).parent().find('.email').val(e);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tamplate">
<select class="name">
<option value="">Please select...</option>
<option value="Elvis" data-phonenumber="11111" data-email="abc#gmail.com">Elvis</option>
<option value="Frank" data-phonenumber="22222" data-email="123#gmail.com">Frank</option>
<option value="Jim" data-phonenumber="33333" data-email="123#gmail.com">Jim</option>
</select>
<input type="text" class="phonenumber" name="phonenumber" value="" >
<input type="text" class="email" name="email" value="" >
</div>
<div class="tamplate">
<select class="name">
<option value="">Please select...</option>
<option value="Elvis" data-phonenumber="11111" data-email="abc#gmail.com">Elvis</option>
<option value="Frank" data-phonenumber="22222" data-email="123#gmail.com">Frank</option>
<option value="Jim" data-phonenumber="33333" data-email="123#gmail.com">Jim</option>
</select>
<input type="text" class="phonenumber" name="phonenumber" value="" >
<input type="text" class="email" name="email" value="" >
</div>

Clear value from input field when select value from dropdown list

I have this drop down list:
<select name="group_psoft" id="group_psoft">
<option value="0" selected="selected" title="0">---select---</option>
<option value="100" title="100">100</option>
<option value="200" title="200">200</option>
<option value="300" title="300">300</option>
</select>
and one input field:
<input id="name" value="">
How do I clear out the value of the "name" input when I change value in the dropdown list?
Kind regards

Simply use change() function in jquery which triggers when you change the select like this
Read Here about .change()
$('#group_psoft').change(function() {$('#name').val('')});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="group_psoft" id="group_psoft">
<option value="0" selected="selected"title="0">---select---</option>
<option value="100" title="100">100</option>
<option value="200" title="200">200</option>
<option value="300" title="300">300</option>
</select>
<input id="name" value="Initial Value">

You just need to use the change event of the list and then update the input on each occurrence of change.
$('#group_psoft').change(function() {
// Set the input's value to the current value of the list
$('#name').val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="group_psoft" id="group_psoft">
<option value="0" selected="selected"title="0">---select---</option>
<option value="100" title="100">100</option>
<option value="200" title="200">200</option>
<option value="300" title="300">300</option>
</select>
<input id="name" value="Initial Value">

This will clear the input field when the dropdown selection changes:
$("#group_psoft").on("change", function(){
$("#name").val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="group_psoft" id="group_psoft">
<option value="0" selected="selected"title="0">---select---</option>
<option value="100" title="100">100</option>
<option value="200" title="200">200</option>
<option value="300" title="300">300</option>
</select>
<input id="name" value="">

How display listbox option based on a variable value using jquery?

I have a select box with options now I want to show only those options which value id is greater than the user input value.
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something</option>
<option value="14" hidden>Something</option>
<option value="20" hidden>Something</option>
</select>
this is my select box. User will input a value based on that i want only the options which value is greater then the user input to show. Please help me on this.

You need to use .filter() to filtering options tag. In callback of function check that value of every option is greater than user input value.
var userInput = 13;
$(".form-control > option").filter(function(){
return this.value > userInput;
}).show();
var userInput = 13;
$(".form-control > option").filter(function(){
return this.value > userInput;
}).show();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something 13</option>
<option value="14" hidden>Something 14</option>
<option value="20" hidden>Something 20</option>
</select>

You cn try this:
$(document).ready(function(){
$("#txtUserInput").keyup(function(){
getUserInput(this);
});
});
function getUserInput(_this){
var userInput=parseInt($.trim($(_this).val()));
if(userInput!=null && userInput != isNaN){
$("#dtime option").each(function(){
var option=parseInt($.trim($(this).val()));
if(option!=0 && option<userInput){
$(this).css("display","none");
}
else{
$(this).css("display","block");
}
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtUserInput" />
<br/><br/>
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something 13</option>
<option value="14" hidden>Something 14</option>
<option value="20" hidden>Something 20</option>
</select>
<br/>

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<select class="form-control" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" >Something</option>
<option value="14" >Something</option>
<option value="20" >Something</option>
</select>
<input id="inputData" value="0">
</html>
here is jquery code
$("#inputData").on('blur', function(){
var inputd = parseInt($(this).val());
$("#dtime option").each(function(){
if(parseInt($(this).val()) <= inputd ){
$(this).hide();
}
});
});

How can I do calculations using Jquery and output them in html?

I want to calculate percentage using javascript.
If the selected value in place1 & place2 is not equal then the calculation should be displayed in both flvalue & flvalues.
Ex: If value is 1000 and selected percent is 10 and selected place1 & place2 value is equal then flvalue should be 1100.
If value is 1000 and selected percent is 10 and selected place1 & place2 value is notequal then flvalue should be 1100 and flvalues should be 1100.
<script>
$('#percent,#input,#place,#places').on('change input', function() {
var val = Number($('#input').val()) || 0,
per = Number($('#percent').val()) || 0;
if($('#place').val()!=$('#places')){
$('#total').val(val + val * per / 100)
$('#totals').val(val + val * per / 100)
})
</script>
Value
<input type="text" name="gvalue" id="input" class="input" required/>Percentage
<select name="percent" id="percent" class="input">
<option value="Country" selected>Select Percentage</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
Place_1
<select name="place_1" id="place_1" class="input">
<option value="Place" selected>Place</option>
<option value="Place 1">Place 1</option>
<option value="Place 2">Place 2</option>
<option value="Place 3">Place 3</option>
</select>
Place_2
<select name="place_2" id="place_2" class="input">
<option value="Place" selected>Place</option>
<option value="Place 1">Place 1</option>
<option value="Place 2">Place 2</option>
<option value="Place 3">Place 3</option>
</select>
Final Value
<input type="text" name="flvalue" class="input" id="total" required/>
<input type="text" name="flvalues" class="input" id="totals" required/>

Give it a try to this,
$('#percent,#input,#place_2,#place_1').on('change input', function() {
var val = Number($('#input').val()) || 0,
per = Number($('#percent').val()) || 0;
var tot_am = val + val * per / 100;
if ($('#place_1').val() != $('#place_2').val()) {
$('#total').val(tot_am);
$('#totals').val(tot_am);
} else if ($('#place_1').val() == $('#place_2').val()) {
$('#total').val()
$('#totals').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Value
<input type="text" name="gvalue" id="input" class="input" required/>Percentage
<select name="percent" id="percent" class="input">
<option value="Country" selected>Select Percentage</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
Place_1
<select name="place_1" id="place_1" class="input">
<option value="Place" selected>Place</option>
<option value="Place 1">Place 1</option>
<option value="Place 2">Place 2</option>
<option value="Place 3">Place 3</option>
</select>
Place_2
<select name="place_2" id="place_2" class="input">
<option value="Place" selected>Place</option>
<option value="Place 1">Place 1</option>
<option value="Place 2">Place 2</option>
<option value="Place 3">Place 3</option>
</select>
Final Value
<input type="text" name="flvalue" class="input" id="total" required/>
<input type="text" name="flvalues" class="input" id="totals" required/>
Hope this will solve your problem.

You've just to add condition on places selected value :
if($('#place').val()=="10"){
$('#totals').val(val + val * per / 100);
}else{
$('#totals').val('');
}
And to add attach the change event also to the #place select :
$('#percent,#input,#place').on('change input', function() {
Hope this helps.
$('#percent,#input,#place').on('change input', function() {
var val = Number($('#input').val()) || 0,
per = Number($('#percent').val()) || 0;
$('#total').val(val + val * per / 100);
if($('#place').val()=="10"){
$('#totals').val(val + val * per / 100);
}else{
$('#totals').val('');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Value
<input type="text" name="gvalue" id="input" class="input" required/>
<br>Percentage
<select name="percent" id="percent" class="input">
<option value="Country" selected>Select Percentage</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<br>
Place
<select name="place" id="place" class="input">
<option value="Country" selected>Place</option>
<option value="5">Place 1</option>
<option value="10">Place 2</option>
<option value="15">Place 3</option>
</select>
<br><br>
Final Value
<input type="text" name="flvalue" class="input" id="total" required/>
<input type="text" name="flvalues" class="input" id="totals" required/>

We Keep Coding

JavaScript is the programming language of the Web.

Skip text input value when calculating the VAT - javascript

Related

Automatically insert the input form by selectpicker

How to select and get two input value?

Clear value from input field when select value from dropdown list

How display listbox option based on a variable value using jquery?

How can I do calculations using Jquery and output them in html?

Categories

Resources