i am trying to increase value of input field use jquery onClick
<input type="hidden" name="endFrom" value="17">
$('.ajaxRequest').click(function (e) {
e.preventDefault();
var endFrom = parseInt($('Form input[name="endFrom"]').val(), 10) + 8;
});
the above value did not increment the endFrom . it simply returned the number 17
i also tried the below but that just returned 178
var endFrom = $('Form input[name="endFrom"]').val()+ 8 ;
You can use callback function with val(func) , in your case it will not update it just get the value of that input tag
$('.ajaxRequest').click(function(e) {
e.preventDefault();
$('Form input[name="endFrom"]').val(function(i, v) {
return parseInt(v, 10) + 1;
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="hidden" name="endFrom" value="17">
<input type="hidden" name="startFrom" value="17">
<button class="ajaxRequest">Button</button>
</form>In your actual code you are just concatenating two strings if you do :
var endFrom = $('Form input[name="endFrom"]').val()+ 8 ;
You should parse it as a number then increment it:
var endFrom = parseInt($('Form input[name="endFrom"]').val(), 10)+ 8 ;
And it will return 25 instead of 178.
$('.ajaxRequest').click(function(e) {
e.preventDefault();
var endFrom = parseInt($('input[name="endFrom"]').val(), 10) + 8;
alert(endFrom);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Increment" class="ajaxRequest" />
<input type="hidden" name="endFrom" value="17">And to change the value of the input with every increment you just need to change this:
var endFrom = parseInt($('input[name="endFrom"]').val(), 10) + 8;
With the following:
$('input[name="endFrom"]').val(parseInt($('input[name="endFrom"]').val(), 10) + 8);
You need to assign the value back to the input field
$('.ajaxRequest').click(function(e) {
e.preventDefault();
var endFrom = parseInt($('Form input[name="startFrom"]').val(), 10) + 8;
//assign the value back to the input
$('Form input[name="endFrom"]').val(endFrom)
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="hidden" name="startFrom" value="7" />
<input type="hidden" name="endFrom" value="17" />
<button class="ajaxRequest">S</button>
</form>
in your provided HTML the name attribute is endForm but in your selector is startForm $('Form input[name="startFrom"]') - also, type form with a lower case.
you just save the calculated value in a var, but you dont apply that var's value in the input afterwards:
$('.ajaxRequest').click(function (event) {
event.preventDefault();
var endFrom = parseInt($('form input[name="startFrom"]').val(), 10) + 8;
$('form input[name="endFrom"]').val(endFrom);
});
Step 1 - Read the startFrom value.
$('Form input[name="startFrom"]').val()
Step 2 - Convert it to INT.
parseInt($('Form input[name="startFrom"]').val())
Step 3 - Add 8 to the number.
parseInt($('Form input[name="startFrom"]').val()) + 8
Step 4 - Set endForm value to the result of step 3.
$('Form input[name="endFrom"]').val(parseInt($('Form input[name="startFrom"]').val()) + 8)
