CODEWITHSUNDEEP
jqueryinput
Hunter
Hunter

Reputation: 1601

input val need to change on click

input val need to change on click

This is my code

<div class="inputQty">
     <span>
        <small class="up">^</small>
         <small class="down">V</small>
     </span>
     <input type="text" maxlength="6" name="oa_quantity" class="input-quantity"  value="1"/>
 </div>

if we click on ".up" input val change to 1++, if we click on ".down" input val change to 1- -

Please help me

ja fiddle here http://jsfiddle.net/X57Mz/

Upvotes: 0

Views: 2334

Answers (8)

Chuck Norris
Chuck Norris

Reputation: 15190

It can be done like this. Check working sample of jsfiddle http://jsfiddle.net/X57Mz/4/

$(document).ready(function() {

    $(".up").click(function() {
       $(".input-quantity").val(parseInt($(".input-quantity").val())+1); 
    });

    $(".down").click(function() {
       $(".input-quantity").val(parseInt($(".input-quantity").val())-1); 
    });
});​

If you don't want to go to minus number and want non-negative box, you can do it like this

$(document).ready(function() {

    $(".up").click(function() {
       $(".input-quantity").val(parseInt($(".input-quantity").val())+1); 
    });

    $(".down").click(function() {
      if(parseInt($(".input-quantity").val())>0)
       $(".input-quantity").val(parseInt($(".input-quantity").val())-1); 
    });
});​

Here is jsfiddle http://jsfiddle.net/X57Mz/6/

Upvotes: 2

user1432124
user1432124

Reputation:

demo http://jsfiddle.net/7hzcB/6/

Jquery code

<script type="text/javascript"> 
 $(function() {
    $(".up").click(function() {
        $(".input-quantity").val(parseInt($(".input-quantity").val()) + 1)
    });
    $(".down").click(function() {
        $(".input-quantity").val(parseInt($(".input-quantity").val()) - 1)
    });
}); 

 </script>​​​​​​​​​​​​​​​​​​

Html

<div class="inputQty"> 
         <span> 
            <small class="up">^</small> 
             <small class="down">V</small> 
         </span> 
         <input type="text" maxlength="6" name="oa_quantity" class="input-quantity"  value="1"/> 
     </div>

Upvotes: 2

thecodeparadox
thecodeparadox

Reputation: 87073

$('.inputQty small').on('click', function() {

    var cls = $(this).hasClass('up'); // check that it has up class
    $('.input-quantity').val(function() {
        // if up class exists then increase value by 1 else decrease by 1
        return cls ? parseInt(this.value) + 1 : parseInt(this.value) - 1;
    });
});

Working Sample

Upvotes: 0

Kabilan S
Kabilan S

Reputation: 1094

Here Goes Your code ..

$('.up').click(function()
{

 var temp=$('.input-quantity').val();

    $('.input-quantity').val(parseInt(temp)+parseInt(1));

});

$('.down').click(function()
{

 var temp=$('.input-quantity').val();

    $('.input-quantity').val(parseInt(temp)-parseInt(1));

});

Upvotes: 2

Sam
Sam

Reputation: 146

$(document).ready( function() {
  var el = $('#test');
  function change( amt ) {
    el.val( parseInt( el.val(), 10 ) + amt );
  }

  $('.up').click( function() {
    change( 1 );
  } );
  $('.down').click( function() {
    change( -1 );
  } );
} );

Upvotes: 0

Tats_innit
Tats_innit

Reputation: 34107

Yet another demo http://jsfiddle.net/3v3YL/2/

code B-)

var inputval = parseInt($('.input-quantity').val());

$(".up").click(function(){

    $('.input-quantity').val(inputval++);

});

$(".down").click(function(){

     $('.input-quantity').val(inputval--);
});
​

Upvotes: 0

Ayush
Ayush

Reputation: 42440

Grab the current value, increment it by 1, replace the value:

$(document).ready(function(){
    $('.up').on('click',function(){
        var value = parseInt($('.input-quantity').first().val());
        value++;
        $('.input-quantity').first().val(value);
                         
    });
});​

Demo

Getting the down button working is a trivial modification of the above code.

Upvotes: 0

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13461

Use this:

$(function(){
  $('.up').on('click',function(){
     $('.input-quantity').val(parseInt($('.input-quantity').val())+1);
  });

  $('.down').on('click',function(){
     $('.input-quantity').val(parseInt($('.input-quantity').val())-1);
  });
});
​

Working Fiddle

Upvotes: 2

Related Questions