Hi I'm new for programming and I'm facing one problem.
I have 3 input for values and 1 input for total. What I need is when I change the value in any input total should change automatically.
<input type="text" name="Amt" id="amount" class="form-control" />
<input type="text" name="Amt" id="amount" class="form-control" />
<input type="text" name="Amt" id="amount" class="form-control" />
And for total I have:
<input type="text" class="form-control" name="total" id="total" value="" />
And below is the script:
<script type="text/javascript">
$('#amount').change(function() {
$('#total').attr('value', function() {
var result = 0;
$('#amount').each(function() {
result += $(this).attr('value');
});
return result;
});
});
</script>
You have multiple ids for amount. These should be changed to classes. In addition, the value for each amount will be picked out by jQuery as a string, so that needs to be changed to an integer:
$('.amount').change(function () {
var result = 0;
$('.amount').each(function () {
result += +$(this).val();
});
$('#total').val(result);
});
Fiddle.
Related
i have some fields in my form, which are like below:
$(document).on("change", ".qty2", function() {
var sum1 = 0;
$(".qty2").each(function() {
sum1 += +$(this).val();
});
$("#subtotal").val(sum1);
});
$(document).on("change", "#subtotal", function() {
var subt = $("#subtotal").val();
var tot_price = (subt * 9 / 100);
var divobj = document.getElementById('cgst');
var divobj1 = document.getElementById('sgst');
divobj.value = tot_price;
divobj1.value = tot_price;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control qty1" id="subtotal" required name="subtotal" readonly>
<input type="text" class="form-control qty1" id="cgst" required name="cgst" readonly>
<input type="text" class="form-control qty1" id="sgst" required name="sgst" readonly>
here apart from the first input field 'price', all other 3 are readonly, when user enters something in price field, that value is taken to subtotal, and from there i need to calculate sgst and cgst and display it in their respective fields, however in my code only till subtotal display is working, can anyone please tell me how to fix this, thanks in advance
Here is a rewrite of YOUR script using YOUR html
If you have SETS of fields, wrap each set in a div and use .closest("div").find(".otherfield") to make this work in for example a shopping list
const $qty = $(".qty2").on("input", () => { // cache the fields
let total = $qty
.map((i, fld) => +fld.value)
.get()
.reduce((a, b) => a + b);
let tot_price = (total * 9 / 100).toFixed(2);
$("#subtotal").val(total);
$('#cgst').val(tot_price);
$('#sgst').val(tot_price);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control price qty2" required name="price[]">
<input type="text" class="form-control price qty2" required name="price[]">
<input type="text" class="form-control price qty2" required name="price[]">
<input type="text" class="form-control qty1" id="subtotal" name="subtotal" readonly>
<input type="text" class="form-control qty1" id="cgst" name="cgst" readonly>
<input type="text" class="form-control qty1" id="sgst" name="sgst" readonly>
just comment on change event on #Subtotal lines in your code and you are good to go.
$(document).on("change", ".qty2", function() {
var sum1 = 0;
$(".qty2").each(function() {
sum1 += +$(this).val();
});
$("#subtotal").val(sum1);
// });
// $(document).on("change", "#subtotal", function() {
var subt = $("#subtotal").val();
var tot_price = (subt * 9 / 100);
var divobj = document.getElementById('cgst');
var divobj1 = document.getElementById('sgst');
divobj.value = tot_price;
divobj1.value = tot_price;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control qty1" id="subtotal" required name="subtotal" readonly>
<input type="text" class="form-control qty1" id="cgst" required name="cgst" readonly>
<input type="text" class="form-control qty1" id="sgst" required name="sgst" readonly>
I have a form which have two field "optin" and "Qty".The quantity field of the form accept the number.The minimum number which can be entered in this field(QTY) depends upon the the value of the Option field i.e. If the option fiels value is red then the minimum value propert of the Qty field should be 5 and if it is 'Red' then the minimum property of the Qty field should be 10. I am doing it by the given code but its not working.
<td><input type="text" name="option" onkeydown="random()" class="form-control" >
<script>
function random()
{
var a=document.getElementById('option').value;
if(a==="red")
{
var minimum = '5';
}
else if(a==="green")
{
var minimum= '10';
}
}
</script>
<input type="NUMBER" name="qty" class="form-control" min=<?php var minimum ?> ></td>
<!-- This is the code you provided -->
<td><input type="text" name="option" onkeydown="random()" class="form-control" >
<script>
function random()
{
var a=document.getElementById('option').value;
if(a==="red")
{
var minimum = '5';
}
else if(a==="green")
{
var minimum= '10';
}
}
</script>
<input type="NUMBER" name="qty" class="form-control" min=<?php var minimum ?> ></td>
Let's see...
First of all lets change your if else case with a switch:
switch(a){
case "red":
var minimum = 5;
break;
case "green":
var minimum = 10;
break;
}
Now I will remove the php tag and add a line to change the min value of the input.
<td><input type="text" id="option" onkeydown="random()" class="form-control" />
<script>
function random()
{
var a=document.getElementById('option').value;
switch(a){
case "red":
var minimum = 5;
break;
case "green":
var minimum = 10;
break;
}
document.getElementById("input").setAttribute("min", minimum)//this line adds an attribute or sets it to a given value
}
</script>
<input type="NUMBER" id="input" class="form-control" /></td>
Now let's see this code in action!
Run the following snippet.
<td><input type="text" id="option" onchange="random()" class="form-control" />
<script>
function random()
{
var a=document.getElementById('option').value;
switch(a){
case "red":
var minimum = 5;
break;
case "green":
var minimum = 10;
break;
}
document.getElementById("input").setAttribute("min", minimum)//this line adds an attribute or sets it to a given value
}
</script>
<input type="NUMBER" id="input" class="form-control" /></td>
And done! Also, I changed the onkeydown to onchange.
Added more rows in case there are many rows with the same fields.
Secondly, I have added an event listener instead of direct function
call but you can do either.
Extracting into calculatingMinimunQuantity for easier readibility
and calling setAttribute (min) there.
var options = document.querySelectorAll(".option");
options.forEach(function(option) {
option.addEventListener("change", function() {
calculatingMinimunQuantity(option);
});
});
function calculatingMinimunQuantity(option) {
var minimum = 0;
var value = option.value;
if (value === "red") {
minimum = "5";
} else if (value === "green") {
minimum = "10";
}
// getting the quantity input field
option.nextElementSibling.setAttribute("min", minimum);
}
<td>
<div>
<input type="text" class="option form-control" placeholder="option" name="option" />
<input type="NUMBER" class="form-control" name="qty" placeholder="quantity" />
</div>
</td>
<td>
<div>
<input type="text" class="option form-control" placeholder="option" name="option" />
<input type="NUMBER" class="form-control" name="qty" placeholder="quantity" />
</div>
</td>
i want to show the money that customer must pay and my inputs are like this :
<input type="text" class="form-control" placeholder="cost " id="txt" name="credit">
<input type="text" class="form-control" placeholder="quantity" id="txt" name="limit">
when the input text is changing i want to show the total cost (quantity*cost) in a <p> tag Dynamicly how can it be with javascript?
You can try this:
<input type="text" class="form-control" placeholder="cost " id="credit" name="credit" onchange="calculate()">
<input type="text" class="form-control" placeholder="quantity" id="limit" name="limit" onchange="calculate()">
<p id="result"></p>
And javascript part:
function calculate() {
var cost = Number(document.getElementById("credit"));
var limit = Number(document.getElementById("limit"));
document.getElementById("result").innerHTML= cost*limit;
}
You must ensure you entered numbers in inputs.
All of the above will generate errors if both the boxes are blank . Try this code , its tested and running .
<script>
function calc()
{
var credit = document.getElementById("credit").value;
var limit = document.getElementById("limit").value;
if(credit == '' && limit != '')
{
document.getElementById("cost").innerHTML = parseInt(limit);
}
else if(limit == '' && credit != '')
{
document.getElementById("cost").innerHTML = parseInt(credit);
}
else if(limit!= '' && credit!= '')
{
document.getElementById("cost").innerHTML = parseInt(limit) * parseInt(credit);
}
else
{
document.getElementById("cost").innerHTML = '';
}
}
</script>
</head>
<input type="number" value="0" min="0" class="form-control" placeholder="cost" id="credit" name="credit" onkeyup="calc();">
<input type="number" value="0" min="0" class="form-control" placeholder="quantity" id="limit" name="limit" onkeyup="calc();">
<p id="cost"></p>
Hope this will be useful
// get cost field
var _cost = document.getElementById("cost");
_cost.addEventListener('keyup',function(event){
updateCost()
})
// get quantity field
var _quantity = document.getElementById("quantity");
_quantity.addEventListener('keyup',function(event){
updateCost()
})
function updateCost(){
var _getCost = document.getElementById("cost").value;
var _getQuantity = document.getElementById("quantity").value;
var _total = _getCost*_getQuantity;
console.log(_total);
document.getElementById("updateValue").textContent = ""; // Erase previous value
document.getElementById("updateValue").textContent = _total // update with new value
}
jsfiddle
In case you consider using JQuery I've made this fiddle.
See if it works for you.
https://fiddle.jshell.net/9cpbdegt/
$(document).ready(function() {
$('#credit').keyup(function() {
recalc();
});
$('#limit').keyup(function() {
recalc();
});
function recalc() {
var credit = $("#credit").val();
var limit = $("#limit").val();
var result = credit * limit;
$("#result").text(result);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" placeholder="cost " id="credit" name="credit" value="0">x
<input type="text" class="form-control" placeholder="quantity" id="limit" name="limit" value="0">
<p id="result">0</p>
Try this:
<script >
function myFunction() {
document.getElementById('totalcost').innerHTML = document.getElementById('txt').value * document.getElementById('txt2').value;}
</script>
Also, change your HTML to this:
<input type="text" onkeypress="myFunction()" onkeyup="myFunction()" onclick="myFunction()" onmousemove="myFunction()" class="form-control" placeholder="cost " id="txt" name="credit">
<input type="text" onkeypress="myFunction()" onkeyup="myFunction()" onclick="myFunction()" onmousemove="myFunction()" class="form-control" placeholder="quantity" id="txt2" name="limit">
Enter cost and quantity.
Note the change with the second input: id='txt' was changed to id='txt2'. This is because no 2 elements can have the same id.
Note: Untested.
Hello I need to sum the values of same class input in one input with class name total.
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="total" value="" />
Possible?
A working fiddle here
$(document).on("change", "qty1", function() {
var sum = 0;
$("input[class *= 'qty1']").each(function(){
sum += +$(this).val();
});
$(".total").val(sum);
});
You pretty much had it, just needed to adjust your JQuery a little bit for the appropriate selectors
updated fiddle : http://jsfiddle.net/5gsBV/7/
$(document).on("change", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum += +$(this).val();
});
$(".total").val(sum);
});
I suggest this solution:
html
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="total" value="" />
<div id="result"></div>
js
$(".qty1").on("blur", function(){
var sum=0;
$(".qty1").each(function(){
if($(this).val() !== "")
sum += parseInt($(this).val(), 10);
});
$("#result").html(sum);
});
fiddle
I think your issue is here:
$("#destination").val(sum);
change it to:
$(".total").val(sum);
And instead of change event i suggest you to use keyup instead.
$(document).on("keyup"
$(document).on("keyup", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum += +$(this).val();
});
$(".total").val(sum);
});
We can use following own function
(function( $ ){
$.fn.sum=function () {
var sum=0;
$(this).each(function(index, element){
sum += parseFloat($(element).val());
});
return sum;
};
})( jQuery );
//Call $('.abcd').sum();
http://www.gleegrid.com/code-snippet/javascript/jquery-sum-input-values-by-class/?filter=bygroup&group=JQuery
$('.qty1').each(function(){
sum += parseFloat(this.value);
});
console.log(sum);
This will work with pure js
<input type="text" value=" " class="percent-input"> <br>
<input type="text" value=" " class="percent-input"> <br>
<input type="text" value=" " class="percent-input"> <br>
<p>Total Value :<span id="total">100%</span></p>
<p>Left Value :<span id="left">0.00%</span></p>
var percenInput = document.querySelectorAll('.percent-input');
for (let i = 0; i < percenInput.length; i++) {
percenInput[i].addEventListener('keyup', getPercentVal)
}
function getPercentVal() {
var total = 0;
var allPercentVal = document.querySelectorAll('.percent-input');
for (var i = 0; i < allPercentVal.length; i++) {
if (allPercentVal[i].value > 0) {
var ele = allPercentVal[i];
total += parseFloat(ele.value);
}
}
document.getElementById("total").innerHTML = total.toFixed(2) + '%';
document.getElementById("left").innerHTML = (100 - total).toFixed(2) + '%';
}
You almost had it:
$(document).on("change", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum += +$(this).val();
});
$(".total").val(sum);
});
http://jsfiddle.net/DUKL6/1
The problem with all of the above answers is that they fail if you enter something other than a number. If you want something that is more friendly to users, you should do some validation, perhaps even give some feedback when a value other than a number is entered.
$('body').on('change', '.qty1', function() {
var total=0;
$(".qty1").each(function(){
quantity = parseInt($(this).val());
if (!isNaN(quantity)) {
total += quantity;
}
});
$('.total').val('Total: '+total);
});
<input type="text" class="price" placeholder="enter number one" />
<input type="text" class="price" placeholder="enter number two" />
<input type="text" class="price" placeholder="enter number three" />
<input type="text" class="price" placeholder="enter number four" />
<input type="text" id="total">
<script>
$(document).ready( function() {
$(document).on("keyup", ".price", function() {
var sum = 0;
$(".price").each(function(){
sum += +$(this).val();
});
$('#total').val(sum);
});
});
</script>
I searched a lot for this, but I can only find +1 -1 solutions.
But I want to set the number of inputs with a other input like this:
//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">
When the user now writes 5 in the first field, the form should look like this:
//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">
<input type="text" size="30" maxlength="30" id="input_2" name="input_2">
<input type="text" size="30" maxlength="30" id="input_3" name="input_3">
<input type="text" size="30" maxlength="30" id="input_4" name="input_4">
<input type="text" size="30" maxlength="30" id="input_5" name="input_5">
How can I make this? MUST I use js?
Here's a simple javascript snippet that doesn't make use of any frameworks:
function addInputs() {
var count = parseInt(document.getElementById("count").value);
for (var i = 2; i <= count; i++) {
document.getElementById('moreinputs').innerHTML += '<input type="text" name="input_' + i + '" id="input_' + i + '" />';
}
}
In this example you have to add a container (div) with id 'moreinputs'. However, when calling this function more than once, it will not work properly (e.g. it can only increase the number of input but not decrease)
Yes, either you use javascript, or you send the form to the server, where a new html page with all the inputs is generated (e.g. with PHP).
Yes you must use js to do it dynamically on the spot You have a jQuery tag so I will show an example in jQuery
This is not the best example but it works and it's a starting point
JS:
$(function(){
$('#master').on('change', function() {
var count = $(this).val();
$('#otherInputs').html('')
for( var i = 0; i < count; i++) {
$('#otherInputs').append(
$('<input>', {type: 'text'})
);
}
});
});
HTML:
<input type="number" id="master" value="1">
<div id="otherInputs"></div>
Demo
In English this is saying...
When you change #master I will empty #master (html('')) loop through and append a new input depending on #master's value
Here's the FIDDLE. Hope it helps. :)
html
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
<div id="container"></div>
script
$('#count').on('keyup', function () {
var $this = $(this);
var count = $this.val();
$('#container').empty();
for (var x = 1; x <= count; x++) {
var newInput = '<input type="text" size="30" maxlength="30" id="input_' + x + '" name="input_' + x + '">';
$('#container').append(newInput);
}
});
This worked for me
function AddField() {
var count = $("#countetfield").val();
var i = 1;
var id = $("#container .testClass:last").attr('name');
var test = id.split("_");
id_name = test[1];
while (i <= count) {
id_name++;
var a = '<input type="text" class="testClass" size="30" maxlength="30" id="input_' + id_name + '" name="input_' + id_name + '"/>';
$("#container").append(a);
i++;
}
}
<input type="text" id="countetfield" value="1" />
<input type="button" value="Go" onclick="AddField();" />
<div id="container">
<input type="text" class="testClass" size="30" maxlength="30" id="input_1" name="input_1" />
</div>