Increment input field value with jQuery - javascript

What is the shortest way in jQuery (or pure JavaScript) to increment the value of an input field?
For instance
<input id="counter" type="hidden" name="counter" value="1">
so it changes to
<input id="counter" type="hidden" name="counter" value="2">

$('#counter').val( function(i, oldval) {
return parseInt( oldval, 10) + 1;
});
Demo
OR
$('#counter').val( function(i, oldval) {
return ++oldval;
});
Demo
You can wrap any one of the above code within a function and call that for further increment. For example:
function increment() {
$('#counter').val( function(i, oldval) {
return ++oldval;
});
}
Now call increment() when and where you need.

I think that the shortest way is:
$('#counter').get(0).value++
or
$('#counter').get(0).value--

Try this:
var $input = $('#counter');
$input.val( +$input.val() + 1 );​
DEMO

No need for jQuery here, instead use pure JavaScript:
document.getElementById('counter').value++;
Demo: http://jsfiddle.net/RDMPq/
You can move the increment to a function that accepts dynamic IDs for increased portability:
function incrementInput(id){
document.getElementById(id).value++;
}
Demo: http://jsfiddle.net/uyuGY/

You could try this:
jQuery:
Setup a function to do this:
function incrementVal(selector) {
var $item = selector;
var $curVal = $item.attr("value");
$item.attr("value", parseInt($curVal) + 1 );
}
Use it with the click of a button:
$("#increment").on("click",function() {
incrementVal($('#counter'));
});
Your HTML:
<input id="counter" type="hidden" name="counter" value="1">
<button id="increment">Increment field</button>
Hope that helps.

Related

validation in if textbox having same values in jquery

I am trying to perform this action like if user choose same value for two different box i have to show some errors.my textbox code as follows.
<input class="order form-control vnumber" type="text" maxlength="1" name="Orderbox[]" required="true">
<input class="order form-control vnumber" type="text" maxlength="1" name="Orderbox[]" required="true">
<input class="order form-control vnumber" type="text" maxlength="1" name="Orderbox[]" required="true">
<input class="order form-control vnumber" type="text" maxlength="1" name="Orderbox[]" required="true">
so the textbox values should be different like 1,2,3,4 it should not be 1,1,1,1 so i have tried real time update using jquery.
$('.order').keyup(function () {
// initialize the sum (total price) to zero
var val = 0;
var next_val=0;
// we use jQuery each() to loop through all the textbox with 'price' class
// and compute the sum for each loop
$('.order').each(function() {
val+=$(this).val();
});
alert(val);
if (next_val==val) {
alert("same value");
}
next_val=val;
});
But its not working as i expected can anybody tell is there any solutions for this.Any help would be appreciated.Thank you.
JFIDDLE:
jfiddle
Try this Demo Fiddle.
var valarr = [];
$('.order').keyup(function () {
var curr = $(this).val();
if (jQuery.inArray(curr, valarr) > -1) {
alert('exists');
} else {
valarr.push(curr);
}
});
You can use arrays to maintain values. To check the existence of value use inArray()
You need to put more of the code inside the .each() loop. Also, change val+= to just val=
$('.order').each(function() {
val=$(this).val();
alert(val);
if (next_val==val) {
alert("same value");
}
next_val=val;
});
And keep in mind next_val is actually the previous value...
fiddle http://jsfiddle.net/phZaL/8/
This will only work if all values entered till now have the same value
jQuery Code
var arr = [];
$('.order').change(function () {
arr.push($(this).val());
if (arr.length > 1) {
if (arr.AllValuesSame()) alert("Values are same");
}
var val = 0;
$.each(arr, function () {
val = parseInt(val) + parseInt(this);
});
$('.val').text(val);
});
Array.prototype.AllValuesSame = function () {
if (this.length > 0) {
for (var i = 1; i < this.length; i++) {
if (this[i] !== this[0]) return false;
}
}
return true;
}
Demo Fiddle
Made with great help from this answer by #Robert

maxlength not working if value is set from js code

I am having the following HTML block in my page.
<input type="text" id="fillingInput"/>
<input type="text" id="filledInput" maxlength="5"/>
<input type="button" onclick="$('#filledInput').val($('#fillingInput').val());"/>
when the button is clicked, the value of fillingInput is set as value for filledInput.
But the maxlength is not considered while setting value like this.
Any solution?
Try slice:
<input type="button"
onclick="$('#filledInput').val($('#fillingInput').val().slice(0,5));"/>
Try this
$(document).ready(function () {
$('#add').click(function () {
var str = $('#fillingInput').val();
if (str.length > 5) {
str = str.substring(0, 5);
$('#filledInput').val(str);
}
});
});
one way to get this is ... removing all charaters after 5th character. using substring()
<input type="button" id="add" />
JS
$('#add').click(function(){
var str=$('#fillingInput').val();
if(str.length > 5) {
str = str.substring(0,5);
}
$('#filledInput').val(str);
});
fiddle ..
it is recommended not to use inline javascript.
if you are using jQuery you can add a "valHook" which hooks into each call of .val()
$.valHooks.input = {
set: function(element, value) {
if ("maxLength" in element && value.length > element.maxLength)
value = value.substr(0, element.maxLength);
element.value = value;
return true;
}
};

How to get value of different checkboxes and calculate value of those checked checkboxes and show in the input field?

I have a little problem with getiing the value of diffrent checkboxes when it is checked. Here is my code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>
$(document).ready(function(){
$('input[type="checkbox"]').bind('click',function()
{
var waterdm = $('#waterdm').val();
$("#price").val(waterdm);
});
});
</script>
<p><input type="checkbox" id="waterdm" name="waterdm" value="10" />Water Damage</p>
<p><input type="checkbox" id="screendm" name="screendm" value="20" />Screen Damage</p>
<p><input type="checkbox" id="Chargerdm" name="Chargerdm" value="30" />Charger Damage</p>
<p><input type="checkbox" id="hdphdm" name="hdphdm" value="10" />Headphone Damage</p>
<p>
Calculated Price: <input type="text" name="price" id="price" />
</p>
What I want is whenever user check in checkboxes I need to get those value and show the sum of each checkbox value which is checked in to another input box. It Means I need to sum those value of each checkbox
is checked.And when user unchecked any of the checkboxes then that value should subtracted from the that total. I don't have enough experience in jquery. Please help me.
You would need to iterate over the cheboxes. And change event makes more sense when you are talking in terms of checkboxes..
Use on to attach events instead of bind
$(document).ready(function () {
// cache the inputs and bind the events
var $inputs = $('input[type="checkbox"]')
$inputs.on('change', function () {
var sum = 0;
$inputs.each(function() {
// iterate and add it to sum only if checked
if(this.checked)
sum += parseInt(this.value);
});
$("#price").val(sum);
});
});
Check Fiddle
$(document).ready(function () {
var waterdm = 0;
$('input[type="checkbox"]').bind('click', function (e) {
if (this.checked) {
waterdm += eval(this.value);
} else {
waterdm -= eval(this.value);
}
$("#price").val(waterdm);
});
});
Demo here
Try this
$(document).ready(function(){
var waterdm=0;
$('input[type="checkbox"]').on('click',function()
{
waterdm = waterdm+parseInt($(this).val());
$("#price").val(waterdm);
});
});
Demo
You can use following code
$(document).ready(function(){
$('input[type="checkbox"]').click(function()
{
var val = 0;
$('input[type="checkbox"]:checked').each(function(){
val+=parseInt($(this).val());
});
$("#price").val(val);
});
});
Demo
If you want to sum all checked checkboxes try something like this:
$('input[type="checkbox"]').bind('click',function()
{
var sum = 0;
$('input[type="checkbox"]:checked').each(function(){
var val = parseInt($(this).val());
sum += val;
});
$("#price").val(sum);
});

jQuery - How to use each() in click event jquery?

Please see my html code:
<form action="#" class="check_opt" id="ckPrice">
<p><input class="niceCheck" type="checkbox" name="" value="0-49">3 millions - 10 millions (21)</p>
<p><input class="niceCheck" type="checkbox" name="" value="50-99"> >10 millions - 15 millions (7)</p>
<p><input class="niceCheck" type="checkbox" name="" value="100">15 millions and above (15)</p>
</form>
And jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$('#ckPrice :checkbox').click(function() {
var price = 'abc';
$(".niceCheck").each(function() {
if ($(".niceCheck").is(":checked")) {
price += $(".niceCheck").value();
}
});
alert(price);
});
});
</script>
The alert function in bottom jQuery code only returns 'abc'. How should I do this?
Change:
if ($(".niceCheck").is(":checked")) {
price += $(".niceCheck").value();
}
to:
if ($(this).is(":checked")) {
price += $(this).val();
}
Your .each() call is looping through the elements you want and you need to refer to them via $(this). Also jQuery uses .val() not .value(). Of course, since you have unusual values your end result will be a string with something like "abc50-99100"
jsFiddle example
Your each function should use this
$(".niceCheck").each(function() {
if ($(this).is(":checked")) {
price += this.value;
}
});
You are checking against the first one
$(".niceCheck").each(function() {
var check = $(this);
if (check.is(":checked")) {
price += check.val();
}
});
alert(price);

identifier for value of radio button

I have
<form name="send">
<input type="radio" name="schoose" value="24">
<input type="radio" name="schoose" value="25">
<input type="radio" name="schoose" value="26">
I am trying to find the value of the selected radio button I thought it was
document.send.schoose.value
apparently I was wrong, can someone clue me in
Another option...
$('input[name=schoose]:checked').val()
Try this
document.getElementsByName('schoose')[1].value;
try the $("input[name='schoose']:checked").val();
In plain JavaScript you can get the values of the second radio button with:
document.getElementsByName('schoose')[1].value;
In jQuery:
$('input[name="schoose"]:eq(1)').val();
jsFiddle example
document.getElementsByName('schoose')[1]
you can do this by
with javascript
document.getElementsByName('schoose')[1].value;
and with jquery like below
$("[name=schoose]").each(function (i) {
$(this).click(function () {
var selection = $(this).val();
if (selection == 'default') {
// Do something
}
else {
// Do something else
}
});
});
or
$("input:radio[name=schoose]").click(function() {
var value = $(this).val();
//or
var val = $('input:radio[name=schoose]:checked').val();
});
With just javascript:
var radio=document.getElementsByName('schoose');
var radioValue="";
var length=radio.length;
for(var i=0;i<length;i++)
{
if(radio[i].checked==true) radioValue=radio[i].value;
}
alert(radioValue);

Categories