I need the total of all the values from my input. The result must be displayed in the input field total that is readonly.
The user can enter 1 or more values. The problem is that my var value is not correct. I'd also like to know how I can return the value immediately by onchange?
$(document).ready(function() {
$("div#example input").change(function() {
var value = '';
$("div#example input[name!=total]").each(function() {
value += $(this).val();
});
console.log("value after each: " + value);
});
})
HTML:
<div id="example">
<input type="text" size="5" id="value1" name="value1" />
<input type="text" size="5" id="value2" name="value2" />
<input type="text" size="5" id="value3" name="value3" />
<input type="text" size="5" id="value4" name="value4" />
<input type="text" size="5" id="value5" name="value5" />
<input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />
Try something like this:
$(document).ready(function() {
$("div#example id^='value'").change(function() {
var value = 0;
$("div#example input[name!=total]").each(function() {
var i = parseInt($(this).val());
if (!isNaN(i))
{
value += i;
}
});
$('#total').val(value);
});
})
use += parseInt($(this).val());
var sum = 0;
$('input[id^=value]').each (function(){ sum+=$(this).val(); });
$('#total').val( sum );
:]
I think this might be closer:
<script type="text/javascript">
$(document).ready(function() {
$("#example value").change(function() {
var total = 0;
$("#example value").each(function() {
total += parseInt($(this).val());
});
window.console && console.log("value after each: " + total);
});
})
</script>
<div id="example">
<input type="text" size="5" class="value" name="value1" />
<input type="text" size="5" class="value" name="value2" />
<input type="text" size="5" class="value" name="value3" />
<input type="text" size="5" class="value" name="value4" />
<input type="text" size="5" class="value" name="value5" />
<input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />
</div>
Your original selector for $.change() was including the total box, which I suspect you don't want.
Am I correct in guessing you want to add numbers? Your original 'value' variable was a string.
And BTW, it's safer to use the 'window.console && console.log' idiom, since there won't be a console variable for many users. (Though I bet that line was only there for debugging.)
EDIT
Added parseInt() based on other suggestions.
Use the jQuery form serialization:
alert($("form_id").serialize());
There is also a comparison for different serialization types: http://jquery.malsup.com/form/comp/
Related
Hello I can't set min and maximum value from database.
Actually I want to make dynamic it through PHP. In the back-end there should be two fields first minimum and second one with maximum. In maximum field, I can set maximum and in minimum field I can set, and call it through PHP in my coding.
Is that something can we do? here's coding.
<html>
<body>
<head>
</head>
<?php
echo '
<script>
$(document).on("change", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum += +$(this).val();
});
$(".total").val(sum);
});
</script>';
$maxnum = 7;
if(num > $maxnum){
echo "<script>alert('Yes it is big');</script>";
}
?>
<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="" />
</body></html>
how can I use php with jquery or should I change my coding. I don't know how I can change my coding is there any idea please?
you could put all values into an array and then get the min/max
$(document).on("change", ".qty1", function() {
var arr = [];
var sum = 0;
$(".qty1").each(function(){
arr.push($(this).val());
sum += +$(this).val();
});
$(".total").val(sum);
$("#min").val(Math.min.apply(Math, arr));
$("#max").val(Math.max.apply(Math, arr));
});
Working fiddle https://jsfiddle.net/w47fLjcu/
I'm using spring mvc for my form which has the tag
<form:input type="number" class="value1" id="value1" path="commandName.object.field1" />
<form:input type="number" class="value1" id="value1" path="commandName.object.field2" />
<input type="text" disabled="disabled" id="result" />
I read some questions in regards to calculations and even found a js fiddle:
http://jsfiddle.net/g7zz6/1125/
how do i calculate 2 input fields and put results in 3rd input field
but it doesn't work when the input tag is form:input. Is it possible to do auto calculation of the 2 form:input fields upon keyin and update the 3rd input?
Here you go
HTML
<input type="text" class="input value1">
<input type="text" class="input value2 ">
<input type="text" disabled="disabled" id="result">
JS
$(document).ready(function(){
$('input[type="text"]').keyup(function () {
var val1 = parseInt($('.value1').val());
var val2 = parseInt($('.value2').val());
var sum = val1+val2;
$("input#result").val(sum);
});
});
Fiddle https://jsfiddle.net/1sbvfzcc/
$(document).ready(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
$('.input').blur(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input value1" value="20">
<input type="text" class="input value2" value="30">
<input type="text" disabled="disabled" id="result">
Please check the code this might help you understand why your code is not working.
You are using document ready function which is not able to get the value as no default value for input box.
I have added a new blur function which will calculate the value on change of input box
Try this your form tag syntax was wrong
$('form').on('keyup' ,'.value1', function(){
var k=0;
$('.value1').each(function(){
k +=parseFloat($(this).val()|0);
})
$('input:text').val(k)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="number" class="value1" id="value1" path="commandName.object.field1" />
</form>
<form>
<input type="number" class="value1" id="value1" path="commandName.object.field2" />
</form>
<input type="text" disabled="disabled" id="result" />
I have this HTML that occurs multiple times on a page:
<div class="canteen-item">
<div class="col-l">
<h4>Chicken Sandwich</h4>
<p>$<span class="canteen-price">3.50</span></p>
</div>
<div class="col-r">
<div class="qty-days">
<input name="Mon" class="qty-input" value="0" maxlength="2" />
<input name="Tue" class="qty-input" value="0" maxlength="2" />
<input name="Wed" class="qty-input" value="0" maxlength="2" />
<input name="Thu" class="qty-input" value="0" maxlength="2" />
<input name="Fri" class="qty-input" value="0" maxlength="2" />
</div>
</div>
</div>
I have this JQuery to detect when the input field is changed and if the value is greater than 0, change the color to red.
$(".qty-input").change(function(){
var qty = parseInt($(this).val());
if(qty > 0){
$(this).css('color','red');
}
else{
$(this).css('color','black');
}
});
It is behaving very unpredictably. When I change the value of the first input field (Monday), it makes all 5 inputs red. Then sometimes it is changing the colors back to black in completely different rows sets of days. Seems like a simple problem to fix, but having trouble figuring it out.
The problem is that this code:
var qty = $(this).val();
Returns a string. And this code compares that string to a Number
if(qty > 0){
Try changing the first line of code to:
if ($(this).val()) {
var qty = parseInt($(this).val(), 10);
}
And it should start to work more consistently but you will also want to validate that the input is all numbers.
Thanks for all the responses. It prompted me to dig deeper at which point I discovered another piece of code in a different JS file that was trying (incorrectly!) to do the same thing. The code I have above is in fact sound and works perfectly. I apologize for wasting anyone's time here. I didn't realize that my client had a developer who had already attempted to do this (and who also put the code in the wrong file).
Use change event target to get to the element
$(document).ready(function() {
$(".qty-input").change(function(e) {
var target = e.target;
var qty = $(target).val();
if (qty > 0) {
$(target).css('color', 'red');
} else {
$(target).css('color', 'black');
}
alert("value is " + qty)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canteen-item">
<div class="col-l">
<h4>Chicken Sandwich</h4>
<p>$<span class="canteen-price">3.50</span>
</p>
</div>
<div class="col-r">
<div class="qty-days">
<input type="text" name="Mon" class="qty-input" value="0" maxlength="2" />
<input type="text" name="Tue" class="qty-input" value="0" maxlength="2" />
<input type="text" name="Wed" class="qty-input" value="0" maxlength="2" />
<input type="text" name="Thu" class="qty-input" value="0" maxlength="2" />
<input type="text" name="Fri" class="qty-input" value="0" maxlength="2" />
</div>
</div>
</div>
Hi I'm having trouble sending html form array to JS. I have dynamic html form and some fields:
<div id="fields">
<input type="text" name="ppav[]" id="p" />
<input type="text" name="quantity[]" id="q" size="3" />
<input type="text" name="price[]" id="pr" size="10" />
<input type="text" name="sum" id="su" size="10" disabled="disabled"/>
<br />
</div>
in JS i tried using this function but getting undefined alert instead of result:
var welements = document.getElementsByName('ppav[]');
for (var i = 0, j = welements.length; i < j; i++) {
var an_element = welements[i];
alert(an_element.selectedIndex);
}
What did you expect? the selectedIndex property returns the index of the selected option in a select element. If you want the value of your input fields, try alert(an_element.value);
I have a table laid out like so:
<table border="0">
<tr>
<td>10: <input type="text" size="1" autocomplete="off" name="10"/> </td>
<td>12: <input type="text" size="1" autocomplete="off" name="12"/> </td>
<td>14: <input type="text" size="1" autocomplete="off" name="14"/> </td>
<td>16: <input type="text" size="1" autocomplete="off" name="16"/> </td>
<td>18: <input type="text" size="1" autocomplete="off" name="18"/> </td>
<td>20: <input type="text" size="1" autocomplete="off" name="20"/> </td>
<td>22: <input type="text" size="1" autocomplete="off" name="22"/> </td>
</tr>
</table>
I need to multiply the value that is inputted in the input box by 65 and generate a subtotal in dollars in real time. I've looked around and I'm not too proficient in javascript or jquery so I was wondering if such a solution already existed, or if someone could point me in the right direction in creating one.
using .on and .val() you can get all the values of input . Then you can do what ever operations you want
http://api.jquery.com/on/
http://api.jquery.com/val/
You need to handle the change() event on each input:
$('input').change(function () {
var that = $(this);
that.siblings('div').text(parseInt(that.val(), 10) * 65);
});
http://jsfiddle.net/XZNfS/
Add this to the bottom of your HTML: Subtotal: <span id="subtotal"></span>
Make sure jQuery is loaded, and then toss this JavaScript below the HTML:
<script type="text/javascript">
function compute_subtotal() {
var total = 0;
$("input[type=text]").each( function(i,e) {
var value = $(e).val();
if( parseInt(value) > 0 ) total += (65 * parseInt(value));
});
$("#subtotal").html( total );
}
jQuery(document).ready( function() {
$("input[type=text]").change( function() { compute_subtotal(); } );
$("input[type=text]").keyup( function() { compute_subtotal(); } );
});
</script>