Helo, I have some problems on my calculate script, why I can not calculate example: 23+20*2=86 when I calculate he gather + and not * why ? hre is the script
<script type='text/javascript'>
$(window).load(function(){
$('div#cont-sum-fields').on('change', 'input', function() {
var total = 0;
$('#cont-sum-fields').find('input[id^="cont-sum"]').each(function() {
if ($(this).val() !== "") total += parseFloat($(this).val())
});
$('#cont-sum-fields').find('#total-cont-sum').val(total);
});
});//]]>
</script>
<body>
<div id='cont-sum-fields'>
<input type="number" id="cont-sum-1" />
<input type="number" id="cont-sum-2" />
<input type="number" id="cont-sum-3" />
<input id="total-cont-sum" type="number" disabled />
</div>
</body>
where I wrong?
Is this what you want?
$(window).load(function(){
$('div#cont-sum-fields').on('change', 'input', function() {
var total = (parseInt($( "#cont-sum-1" ).val()) + parseInt($( "#cont-sum-2" ).val())) * parseInt($( "#cont-sum-3" ).val()) ;
$('#cont-sum-fields').find('#total-cont-sum').val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='cont-sum-fields'>
(<input type="number" id="cont-sum-1" /> +
<input type="number" id="cont-sum-2" />) x
<input type="number" id="cont-sum-3" />
<input id="total-cont-sum" type="number" disabled />
</div>
Related
I have a div that has multiple input fields. My HTML looks like this:
<div id="mainDiv">
<input type="text" id="price" /> <br/>
<input type="text" id="tax" />
<input type="text" id="others" />
</div>
<img src="img/img.gif" onclick="getAllValues();" />
After I click the image, it must get all the values inside the mainDiv. How can I do this?
$("#getallvalues").click(function() {
var values = $("#mainDiv input").map(function() {
return $(this).val()
}).get().join(",");
console.log(values)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv">
<input type="text" id="price" /> <br/>
<input type="text" id="tax" />
<input type="text" id="others" />
</div>
<img src="img/img.gif" id="getallvalues" />
Loop through each input then get the value and use .map()
var price = 0;
var tax = 0;
var others = 0;
$("#getallvalues").click(function() {
$("#mainDiv input").each(function() {
if ($(this).attr("id") == "price") {
price = $(this).val()
}
if ($(this).attr("id") == "tax") {
tax = $(this).val()
}
if ($(this).attr("id") == "others") {
others = $(this).val()
}
})
console.log("price " + price)
console.log("tax " + tax)
console.log("others " + others)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv">
<input type="text" id="price" /> <br/>
<input type="text" id="tax" />
<input type="text" id="others" />
</div>
<img src="img/img.gif" id="getallvalues" />
You can use .map() to iterate over element and return the value in call back along with .get() to get them in array:
function getAllValues(){
$('#mainDiv input').map({
return this.value;
}).get(); // Output: ["priceval","taxval","otherval"]
}
You can use above array to create the data in whichever format(csv,json,etc) you want for further processing.
Loop through all the inputs in mainDiv
$('#mainDiv input').each(function(){
// Do what ever
})
Another way of doing this is like follows:
$('#mainDiv').find('input').each(function (index, element) {
var yourValue = element.value; // or $(element).val();
// And rest of your code
});
$('#mainDiv input').each(function(){
console.log(this.val());
})
First of all, sorry for my bad english language.
So, I want to sums my 2 coloumn, but i have add.row condition.
Here my code :
<script>
$(function(){
$('.qty, .unit').on('blur', function(e){
var qty = parseFloat( $('.qty').val() ),
unit = parseFloat( $('.unit').val() );
if( isNaN(qty) || isNaN(unit) ) {
$('.result').text('');
return false;
}
var total = qty * unit;
$('.result').text( total );
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><input type="text" class="form-control qty" name="p_qty[]" /></td>
<td><input type="text" class="form-control unit" name="p_harga[]" /></td>
<td><strong><span class="result" name="p_jumlah[]"></span></strong></td>
here my screenshoot
Screenshoot
when im run, this code success but only in row 1 and not work in row 2++
how can i fix it?
Thank you so much.
Try this
<script src="../js/plugins/jquery.js"></script>
<script>
$(function () {
$('.form-control').blur(function () {
var qty = $('.qty').val();
var total = 0;
$('.unit').each(function () {
total += parseInt(this.value);
});
// Update the total
$('.result').text(qty * total);
});
});
</script>
<input type="text" class="form-control qty" name="p_qty[]" />
<input type="text" class="form-control unit" name="p_harga[]" />
<!-- Two or more fields -->
<input type="text" class="form-control unit" name="p_harga[]" />
<input type="text" class="form-control unit" name="p_harga[]" />
<strong><span class="result" name="p_jumlah[]"></span></strong>
I have a JQuery function, on which i am trying to simply apply the multiplication of 2 inputs onto a 3rd input.
But, for some reason, it isn't working.
What i basically want to do, is for the result to automatically appear on the 3rd input, after i have values on the first 2
I tried searching for an answer, but maibe due to inexperience, i am unable to use the correct keywords. Sorry for that
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
$(".txtMult input").keyup(multInputs);
function multInputs() {
var mult = 0;
// for each row:
$("txtMult").each(function () {
// get the values from this row:
var $val1 = $('.val1', this).val();
var $val2 = $('.val2', this).val();
var $total = ($val1 * 1) * ($val2 * 1)
$('.multTotal',this).text($total);
mult += $total;
});
});
</script>
</head>
<body>
<div class="txtMult">
<div class="row">
<label for="name">Comprimento em centimetros:</label><br />
<input id="cmp" class="val1" name="cmp" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Largura em centimetros:</label><br />
<input id="lrg" class="val2" name="lrg" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Área em M<small>2</small></label><br />
<div class='section'>
<input id="lrg" class="multTotal" name="lrg" type="text" value="" size="30" /><br />
</div>
</div>
</div>
</body>
</html>
2 things:
First you are not binding each to proper selector and you are missing . for class selector
Second instead of assigning .val to input type="text" you are
trying to assign .text which will not work.
DEMO
Below are the changes you need to do:
$(".txtMult input").keyup(multInputs);
function multInputs() {
var mult = 0;
// for each row:
$(".txtMult").each(function () {
var $val1 = $('.val1', this).val();
var $val2 = $('.val2', this).val();
var $total = ($val1 * 1) * ($val2 * 1)
$('.multTotal',this).val($total); //should be .val()
mult += $total;
});
}
You forgot to add . as prefix for the class here
$(".txtMult").each(function () {
---^---
Edit:
Need to change from .text() to .val() as for inputs we set value using val only.
$('.multTotal', this).val($total);
FIDDLE DEMO
here is a working JsFiddle
HTML
<div class="txtMult">
<div class="row">
<label for="name">Comprimento em centimetros:</label><br />
<input id="cmp" class="val1" name="cmp" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Largura em centimetros:</label><br />
<input id="lrg" class="val2" name="lrg" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Área em M<small>2</small></label><br />
<div class='section'>
<input id="lrg" class="multTotal" name="lrg" type="text" value="" size="30" /><br />
</div>
</div>
</div>
Javascript
function multInputs() {
$(".txtMult").each(function () {
var $current = $(this);
// get the values from this row:
var val1 = $('.val1', $current).val();
var val2 = $('.val2', $current).val();
if (val1 != '' && val2 != '') {
var total = parseInt(val1) * parseInt(val2);
$('.multTotal', $current).val(total);
}
});
};
$(".txtMult input").keyup(multInputs);
You have a couple of errors in that code.
Here is a corrected version that works (I've added a few things, like parseInt and checking that the result isn't NaN):
<html>
<head>
<meta name="character-encoding" charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
function multInputs() {
var mult = 0;
// for each row:
$(".txtMult").each(function () {
// get the values from this row:
var $val1 = $('.val1', this).val();
var $val2 = $('.val2', this).val();
var $total = parseInt($val1) * parseInt($val2);
if (!isNaN($total)) {
$('.multTotal', this).val($total);
}
mult += $total;
});
}
$(".txtMult input").keyup(multInputs);
});
</script>
</head>
<body>
<div class="txtMult">
<div class="row">
<label for="name">Comprimento em centimetros:</label><br />
<input id="cmp" class="val1" name="cmp" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Largura em centimetros:</label><br />
<input id="lrg" class="val2" name="lrg" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Área em M<small>2</small></label><br />
<div class='section'>
<input id="lrg" class="multTotal" name="lrg" type="text" value="" size="30" /><br />
</div>
</div>
</div>
</body>
</html>
There are multiple ways of elements selection. With Id #, class ., or position eq(n)
Demo on plunker
function multInputs() {
var val1 = $('#cmp').val();
var val2 = $('#lrg').val();
$('#result').val(val1*val2);
//Or
//var inputs = $(".txtMult input");
//var val1 = inputs.eq(0).val();
//var val2 = inputs.eq(1).val();
//inputs.eq(2).val(val1*val2);
}
I have a question I'm trying to figure out...
I have a lot of inputs in a form, but I only need to iterate through the ones in the div with player class.
<div class="player">
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
</div>
What I need is to iterate through them all once an input field has been modified and calculate how many of the input fields have 0 in them and if its 1 or more than 4 disable submit button.
I've been trying like this but it doesn't seem to work
$(document).ready(function()
{
$(function()
{
var $sum = parseInt($("#sum").text(), 10);
var $num = 0;
if(($sum == 0))
{
$("button[name=submit2]").attr("disabled", "disabled");
}
$(".player input[type=text]").bind("DOMSubtreeModified", function()
{
$.each($("input[type=text]"),function(){
if (!isNaN(+this.value))
{
++$num;
}
});
if (($num > 4) || ($num == 1))
$("button[name=submit2]").attr("disabled", "disabled");
else
$("button[name=submit2]").removeAttr("disabled");
});
})
});
I've also tried
$(document).ready(function(){
$(".unit").each(function() {
$(this).keyup(function(){
CheckNull();
});
});
function CheckNull() {
var $num = 0;
$(".unit").each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
++$num;
}
});
if (($num > 4) || ($num == 1))
$("button[name=submit2]").attr("disabled", "disabled");
else
$("button[name=submit2]").removeAttr("disabled");
}
});
Try changing
if(!isNaN(this.value) && this.value.length!=0) {
++$num;
}
with
if($(this).val() != "" && $(this).val() !=0) {
++$num;
}
to be more jQuery style
I guess this is what you want :
// control function
function checkInputs() {
var num = 0;
// foreach inputs
$(".player input").each(function(i,item) {
var value = $(this).val();
if (value.trim() === "0") {
num++;
}
});
if (num === 1 || num > 4) {
$("#myForm input[type='submit']").attr("disabled", "true");
} else {
$("#myForm input[type='submit']").removeAttr("disabled");
}
}
// if you want a first check after loading the page :
checkInputs();
$(".player input").change(
// This function will be called each time an input change in the player div
checkInputs
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="myForm">
<div class="player">
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
<input type="text" value="0" class="unit" />
</div>
<input type="submit"/>
</form>
I am not sure why are you checking the length? this.value.length!=0
I tweaked your code, here is the fiddle link : http://jsfiddle.net/bLa6evpg/
Hope this help!
I couldn't follow your function, but I believe your problem is that you are running it on page load, and not on the onchange of your input boxes. I achieved the desired functionality by doing that in this codepen
html:
<div class="player">
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number"/>
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
</div>
<button name="submit2">Click</button>
JS:
function validateChanges() {
var playerDiv = document.getElementsByClassName("player")[0];
var inputs = playerDiv.getElementsByTagName("input");
var total = 0;
for(var i = 0; i < inputs.length; i++) {
total += parseInt(inputs[i].value);
}
if(total == 1 || total > 4) { // IF total is 1 or more then 4
document.getElementsByTagName("button")[0].disabled = true;
} else {
document.getElementsByTagName("button")[0].disabled = false;
}
}
looks like i was almost right just messed up a bit Silent_coder fixed this +i added some tricks i saw here
$(document).ready(function(){
CheckNull();
$(".player input").each(function() {
$(this).keyup(function(){
CheckNull();
});
});
function CheckNull() {
var $num = 0;
$(".player input").each(function() {
if(this.value != 0 ) {
$num++;
}
});
if (($num > 4) || ($num <= 1))
$("button[name=submit2]").attr("disabled", "disabled");
else
$("button[name=submit2]").removeAttr("disabled");
}
});
Works like i charm for me ^^
Here is a JsFiddle example
$(function () {
$('.unit').on('change', function () {
var units = 0;
$('.unit').each(function (index, value) {
var unit = parseInt($(value).val(),10);
units += unit;
if(units >= 4 || units === 1) {
$('form > button').prop('disabled', true);
} else {
$('form > button').prop('disabled', false);
}
});
});
});
I'm trying to multiply the entered text input value with the sum of check box values clicked. So far when you click the check boxes the sumof their avues is displayed instantly on the span emlement with id="Totalcost"....i need some help figuring out how i could multiply the sum of check box selected with the value entered in the text input field.
If it can be easily done using JQuery i will really appreciate
Thanks in advance.
Here is my code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
var total = 0;
inputBox.onkeyup = function(){
document.getElementById('Totalcost').innerHTML = inputBox.value;
}
function test(item){
var inputBox = document.getElementById('chatinput');
if(item.checked){
total+= parseInt(item.value);
}else{
total-= parseInt(item.value);
}
//alert(total);
document.getElementById('Totalcost').innerHTML = total ;
}
</script>
</head>
<body>
<input type="text" id="chatinput" onchange="myFunction()"><br>
<p id="printchatbox"></p>
<div id="container">
<p id="printc"></p>
<input type="checkbox" name="channcost" value="10" onClick="test(this);" />10<br />
<input type="checkbox" name="chanlcost" value="20" onClick="test(this);" />20 <br />
<input type="checkbox" name="chancost" value="40" onClick="test(this);" />40 <br />
<input type="checkbox" name="chanlcost" value="60" onClick="test(this);" />60 <br />
</div>
Total Amount : <span id="Totalcost"> </span><BR><BR><BR>
</body>
</html>
You have many incongruences in your code.....
Replace it with this:
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
var total = 0;
function test(){
var checkboxes = document.getElementById('container').getElementsByTagName("input");
var box_value = parseInt(document.getElementById('chatinput').value);
var new_total = 0;
for(var i=0; i<checkboxes.length; i++){
var item = checkboxes[i];
if(item.checked){
new_total += parseInt(item.value);
}
}
if(box_value>0){ total = (new_total>0?new_total:1) * box_value; }
else{ total = new_total; }
document.getElementById('Totalcost').innerHTML = total ;
}
</script>
</head>
<body>
<input type="text" id="chatinput" onchange="test()"><br>
<p id="printchatbox"></p>
<div id="container">
<p id="printc"></p>
<input type="checkbox" name="channcost" value="10" onClick="test();" />10<br />
<input type="checkbox" name="chanlcost" value="20" onClick="test();" />20 <br />
<input type="checkbox" name="chanlcost" value="40" onClick="test();" />40 <br />
<input type="checkbox" name="chanlcost" value="60" onClick="test();" />60 <br />
</div>
Total Amount : <span id="Totalcost"> </span><BR><BR><BR>
</body>
</html>
I changed your script to make these changes
var total = 0;
function test(item){
var inputBox = document.getElementById('chatinput');
if(item.checked){
total+= parseInt(item.value);
}else{
total-= parseInt(item.value);
}
inputValue = $("#chatinput").val();
textValue = (isNaN(inputValue)) ? 1 : parseInt(inputValue);
if(textValue == "NaN"){
textValue = 1;
}
totalAfterMul = total*textValue;
console.log(totalAfterMul);
document.getElementById('Totalcost').innerHTML = totalAfterMul ;
}
It will do what is desired.
It takes the input value and then multiply it with the sum of the check boxes. If the input value is not a number then it will consider it as 1
inputValue = $("#chatinput").val();
textValue = (isNaN(inputValue)) ? 1 : parseInt(inputValue);
if(textValue == "NaN"){
textValue = 1;
}
totalAfterMul = total*textValue;