I need to double the price but the function is not working. The total not display. Below is the code.
This is my form:
<label>Price</label>
<input type="text" id="price" name="price" value="<%=rs.getDouble(2)%>" onchange="autoprice()"/>
<label>Total</label>
<input type="text" id="total" name="total" readonly="readonly"/>
my script:
<script>
function autoprice(){
var x = document.getElementById("price").value;
document.getElementById("total").value = (x * 2).toFixed(2);
}
</script>
Here I made a snippet of your code and its working fine.
function autoprice() {
var x = document.getElementById("price").value;
document.getElementById("total").value = (x * 2).toFixed(2);
}
<label>Price</label>
<input type="text" id="price" name="price" value="" onchange="autoprice()" />
<label>Total</label>
<input type="text" id="total" name="total" readonly="readonly" />
Onchange needs the cursor move out of focus. After entering value press Tab or Enter. Use oninput, if you want to change it dynamically when the value is changed like the below code.
<label>Price</label>
<input type="text" id="price" name="price" value="" oninput="autoprice()"/>
<label>Total</label>
<input type="text" id="total" name="total" readonly="readonly"/>
<script>
function autoprice(){
var x = document.getElementById("price").value;
document.getElementById("total").value = (x * 2).toFixed(2);
}
</script>
Related
I'm new in JavaScript and JQuery
I have some input group of Items with 3 parameters which are Price, Discount, and Quantity.
I'd like to sum it up first before submitting it to see how much the total is.
so far here's what I got:
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<button type="button" onClick="Total()"></button>
In my mind I could use a loop such as :
total = 0;
for(i = 0; i < count(price); i++){
total += price[i] * qty[i] * dsc[i] / 100;
}
also, what if I delete a group, will the array index changes?
Use jQuery.map to convert Objects to array of values
function Total() {
let total = 0;
//Convert to array of values
let price = $("input[name='price[]']").map((i, el) => $(el).val());
let qty = $("input[name='qty[]']").map((i, el) => $(el).val());
let dsc = $("input[name='dsc[]']").map((i, el) => $(el).val());
//I prefer each over for
$.each(price, (i, element) => {
total += price[i] * qty[i] * dsc[i] / 100;
//if 'dsc' is discount in % may be the formula is different:
//example : price = 100 quantity = 1;dsc = 20; => grossRowTotal = 100 * 1 = 100; total = 100 - (100*20/100) = 100 - 20 = 80;
//let grossRowTotal = price[i] * qty[i];
//total += grossRowTotal - (grossRowTotal * dsc[i]/ 100);
});
console.log(total);
$("#result").html(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<button type="button" onClick="Total()">Total</button>
<div id="result"></div>
I don't know what exactly result you want.
this code may help you . try it and edit as per your requirement.
function Total()
{
let total=0;
for(i=0;i<$("input[id=price]").length;i++)
{
let p=$("input[id=price]")[i].value;
let q=$("input[id=qty]")[i].value;
let d=$("input[id=dsc]")[i].value;
total+=(p*q)-d;
}
$("#total").val(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="price" placeholder="price">
<input type="number" id="qty" placeholder="quantity">
<input type="number" id="dsc" placeholder="discount">
<br/>
<input type="number" id="price" placeholder="price">
<input type="number" id="qty" placeholder="quantity">
<input type="number" id="dsc" placeholder="discount">
<br/>
<input type="number" id="price" placeholder="price">
<input type="number" id="qty" placeholder="quantity">
<input type="number" id="dsc" placeholder="discount">
<br/>
<button type="button" onClick="Total()">Total</button>
<input type="number" id="total" placeholder="total">
I have a form with a bunch of inputs set with value zero like
<input type="text" name="qty" size="4" autocomplete="off" class="form-control quantity_wanted text" value="0">
The user then types in quantities of products they want. I want to select the last input where they entered a quantity. I was able to do something similar with checkboxes like this.
$('.product-checkbox:checkbox:checked:last')
But how can I put in a condition for an input box to select the last input with value greater than zero? Thanks.
You could use :not() and the Attribute Selector [attribute]
:not([value='0'])
JavaScript example
let qtyGT0 = [...document.querySelectorAll(".qty:not([value='0'])")].reverse()[0];
// Just to test
if (qtyGT0) qtyGT0.classList.add("red");
.red{ background:red; }
<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">
Another JavaScript example
in pure JavaScript ES6 it would look like
let qtyGT0 = [...document.querySelectorAll(".qty")].filter( el => el.value > 0 ).pop();
// Just to test
if (qtyGT0) qtyGT0.classList.add("red");
.red{ background:red; }
<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
jQuery:
var $qtyGT0 = $(".qty").filter((i, el) => el.value > 0 ).last();
// Just to test
$qtyGT0.addClass("red");
.red{ background:red; }
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">
http://api.jquery.com/filter/
https://api.jquery.com/last/
A pure JavaScript answer is that you would just iterate them in reverse and stop at the first one you find.
var inputs = document.querySelectorAll("input");
for(var len = inputs.length-1; len >=0; len--){
if(inputs[len].value > 0){
console.log(inputs[len].name);
inputs[len].style.backgroundColor = "yellow";
break;
}
}
<input type="text" name="qty" size="4" autocomplete="off" class="form-control quantity_wanted text" value="1">
<input type="text" name="qty2" size="4" autocomplete="off" class="form-control quantity_wanted text" value="2">
<input type="text" name="qty3" size="4" autocomplete="off" class="form-control quantity_wanted text" value="3">
<input type="text" name="qty4" size="4" autocomplete="off" class="form-control quantity_wanted text" value="0">
Actually I want to add text fields by clicking on button. It is working but I am unable to remove the text fields by clicking on remove button. Please see the code below:
<script type="text/javascript">
var i = 1;
function more_fields() {
i++;
var objTo = document.getElementById('more_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+i);
var rdiv = 'removeclass'+i;
divtest.innerHTML = '<div><input type="text" name="comp[]" id="component"
value="" placeholder="Product" /> <input type="number"
name="quantity[]" id="quantity" placeholder="Quantity" /> <input
type="number" name="rate[]" id="rate" placeholder="Rate" /> <input
type="number" name="amount[]" id="amount" placeholder="Amount" readonly />
<button class="btn btn-danger" type="button" onclick="remove_more_fields('+
i +');" style="height:2em; width:3%;">X</button></div>';
objTo.appendChild(divtest)
}
function remove_more_fields(rid) {
$('.removeclass'+rid).remove();
}
</script>
<div class="form-group fieldgroup" id="more_fields">
<div>
<input type="text" name="comp[]" id="component" value=""
placeholder="Product" />
<input type="number" name="quantity[]"
id="quantity" placeholder="Quantity"/>
<input type="number" name="rate[]"
id="rate" placeholder="Rate" />
<input type="number" name="amount[]"
id="amount" placeholder="Amount" readonly/>
<button class="add_field_button"
type="button" onclick="more_fields()"> Add</button>
</div>
<br/>
</div>
How can I get that result? And I want to calculate the quantity*rate and display the result automatically in Amount field. If I change either quantity or rate, automatically amount will change and display the result. Please suggest me...Thank you.
Try this to get amount:
<div class="form-group fieldgroup" id="more_fields">
<div>
<input type="text" name="comp[]" id="component" value="" placeholder="Product" />
<input type="number" name="quantity[]" id="quantity" placeholder="Quantity" onchange="getAmount(this)" />
<input type="number" name="rate[]" id="rate" placeholder="Rate" onchange="getAmount(this)" />
<input type="number" name="amount[]" id="amount" placeholder="Amount" readonly/>
<button class="add_field_button" type="button" onclick="more_fields()"> Add</button>
</div>
<br/>
</div>
<script>
var i = 1;
function more_fields() {
i++;
var objTo = document.getElementById('more_fields');
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass" + i);
var rdiv = 'removeclass' + i;
divtest.innerHTML = '<div><input type="text" name="comp[]" id="component" value="" placeholder="Product" /> <input type="number" name="quantity[]" id="quantity" placeholder="Quantity" onchange="getAmount(this)" /> <input type="number" name="rate[]" id="rate" placeholder="Rate" onchange="getAmount(this)" /> <input type="number" name="amount[]" id="amount" placeholder="Amount" readonly /> <button class="btn btn-danger" type="button" onclick="remove_more_fields(' + i + ');" style="height:2em; width:3%;">X</button></div>';
objTo.appendChild(divtest)
}
function remove_more_fields(rid) {
$('.removeclass' + rid).remove();
}
function getAmount(el)
{
console.log(el.parentElement);
var inputs = el.parentElement.getElementsByTagName('input');
inputs[3].value = (parseInt(inputs[1].value) * parseFloat(inputs[2].value));
}
</script>
Here is working JSFiddle
Give the onclick function fro remove button like this - onclick="remove_more_fields(i);" . This would make the function call with value of i being passed to remove_more_fields function.
What I missed telling here is you can include the entire divtest.innerHTML definition in - <div>...</div> (note the quote here) , since my editor was showing error for the string spanning multiple lines. This might have triggered the evaluation of i and it worked perfectly fine for me.
$("button").on("click",function(){
var $this=$(this);
var Per=$(".per").val();
$(".anuzau").each(function(){
var Val=$(this).val();
if($this.hasClass("zau"))
$(this).val((((Val/100)*Per)+parseInt(Val)).toFixed(2));
else if($this.hasClass("anu"))
$(this).val((parseInt(Val)-((Val/100)*Per)).toFixed(2));
});
});
.anuzau{width:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="anu">-</button> <input class="per" type="text" size="6" value="0">%
<button class="zau">+</button>
<br><br>
<input type="text" size="6" class="anuzau" name="name" value="38.5"><br>
<input type="text" size="6" class="anuzau" name="name" value="75"><br>
<input type="text" size="6" class="anuzau" name="name" value="100">
I wish to increments/decrements all values by classname (anu zau), can anyone share me the jquery method? I have tried many tutorials.
I am new here, if anything wrong, please correct me.
<button class="anu">-</button> <input type="text" size="6" value="">%
<button class="zau">+</button>
<br><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="50"></td><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="200"></td><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="530"></td>
$("button").on("click",function(){
var $this=$(this);
var Per=$(".per").val();
$(".anuzau").each(function(){
var Val=$(this).val();
if($this.hasClass("zau"))
$(this).val((((Val/100)*Per)+parseInt(Val)));
else if($this.hasClass("anu"))
$(this).val((parseInt(Val)-((Val/100)*Per)));
});
});
.anuzau{width:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="anu">-</button> <input class="per" type="text" size="6" value="0">%
<button class="zau">+</button>
<br><br>
<input type="text" size="6" class="anuzau" name="name" value="50"><br>
<input type="text" size="6" class="anuzau" name="name" value="200"><br>
<input type="text" size="6" class="anuzau" name="name" value="530">
This should get you started. Not clear what precision you are looking for (adjust decimal_points accordingly)
var decimal_points = 2
$('button').click(function(){
var pVal = $('#percent').val(),
percent = pVal && !isNaN(pVal) ? +pVal/100 : 0;
//make it negative if anu button clicked
if($(this).hasClass('anu')){
percent = 0-percent;
}
$('input.anu').val(function(_, val){
// make sure input has numeric value
if(!val || isNaN(val) ){
return val;
}else{
return (+val + (val * percent)).toFixed(decimal_points);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="anu">-</button> <input id="percent" type="number" size="6" value="">%
<button class="zau">+</button>
<br><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="50"></td><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="200"></td><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="530"></td>
i have textbox1 and textbox2.
and textbox3 were user input the value of 101.
& i want to print out in textbox2 the excess value of textbox1.
<input type="text" name="textbox1" readonly="readonly" value="">
<input type="text" name="textbox2" readonly="readonly" value="">
<input type="text" name="textbox3" value="">
if the user type 101 in textbox3
the textbox1 only print 100
the textbox2 will print only the excess value 1
How can I achieve this ?
Thanks
Here is a sample snipppet to help you:
function checkAndPerformCalculation() {
var enteredVal = document.getElementById('textbox3').value;
document.getElementById('textbox1').value = 100;
document.getElementById('textbox2').value = enteredVal - 100;
}
<input type="text" name="textbox1" id="textbox1" readonly="readonly" value="">
<input type="text" name="textbox2" id="textbox2" readonly="readonly" value="">
<input type="text" name="textbox3" id="textbox3" value="" onKeyup="checkAndPerformCalculation()">