CODEWITHSUNDEEP
jquery
Nam Nguyen
Nam Nguyen

Reputation: 23

How to get the value from the input

I am trying to catch a change of input but it doesn't work with the button increase or decrease the value, what is the solution here?

<div class="container">
          <button id="tang" class="btn btn-success">+</button>
          <input type="text"  name="" id="number" value="1"">
          <button id="giam" class="btn btn-danger">-</button>
          <h1 id="show"></h1>
      </div>

$("#tang").click(function(){
            let result = parseInt($("#number").val()) +1 ;
            $("#number").val(result);
        });
        $("#giam").click(function(){
            let result = parseInt($("#number").val()) -1 ;
            $("#number").val(result);
        });

        $("#number").change(function(){
            $("#show").text($("#number").val());
        })

Upvotes: 2

Views: 92

Answers (5)

Shiv Patne
Shiv Patne

Reputation: 553

Please refer below code. You will need to trigger change event from increase and decrease button change.

$("#tang").click(function() {
  let result = parseInt($("#number").val()) + 1;  
  $("#number").val(result).change();
});
$("#giam").click(function() {
  let result = parseInt($("#number").val()) - 1;  
   $("#number").val(result).change();
});

$("#number").change(function() {
  $("#show").html($("#number").val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
          <button id="tang" class="btn btn-success">+</button>
          <input type="text"  name="" id="number" value="1"">
          <button id="giam" class="btn btn-danger">-</button>
          <h1 id="show"></h1>
      </div>

Upvotes: 6

Nguyễn Văn Phong
Nguyễn Văn Phong

Reputation: 14228

There are 2 options

  1. Trigger change event like $("#number").change(). However, your code is repeated numerous code unnecessarily.
  2. You should refactor code like below.

$("#tang").click(function(){
    let result = parseInt($("#number").val()) + 1 
    AssignThenDisplayValue(result);
});
$("#giam").click(function(){
    let result = parseInt($("#number").val()) - 1 ;
    AssignThenDisplayValue(result);
});

$("#number").change(function(){
    AssignThenDisplayValue($("#number").val());
});

function AssignThenDisplayValue(value){;
  $("#number").val(value);
  $("#show").text(value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
          <button id="tang" class="btn btn-success">+</button>
          <input type="text"  name="" id="number" value="1">
          <button id="giam" class="btn btn-danger">-</button>
          <h1 id="show"></h1>
      </div>

Upvotes: 0

Negi Rox
Negi Rox

Reputation: 3932

There is a typo in your code and wrap your all function inside in document.ready.

typo in this line
<input type="text" name="" id="number" value="1""> //remove one double quote.

$(document).ready(function(){
       $("#tang").click(function(){
             var container=$("#number");
            let result = parseInt(container.val()) +1 ;
            container.val(result);
            container.val(result).change();
        });
        $("#giam").click(function(){
            var container=$("#number");
            let result = parseInt(container.val()) -1 ;
            if(result<0)
              result=0;
            container.val(result);
            container.val(result).change();
        });

        $("#number").change(function(){
            $("#show").text($("#number").val());
        })
   })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
          <button id="tang" class="btn btn-success">+</button>
          <input type="text"  name="" id="number" value="1">
          <button id="giam" class="btn btn-danger">-</button>
          <h1 id="show"></h1>
 </div>

Upvotes: 0

Carsten Massmann
Carsten Massmann

Reputation: 28236

As a quick fix you could add an event trigger to your lines in the button .click functions like

$("#number").val(result).change();

You could go further and combine the two click() functions into one (with an if clause for increasing/decreasing the value).

Upvotes: 0

Chitrangada
Chitrangada

Reputation: 11

It is working for me. Here is the working code at: https://jsfiddle.net/297s50gk/

Did you include jQuery in your page?

HTML

<div class="container">
  <button id="tang" class="btn btn-success">+</button>
  <input type="text"  name="" id="number" value="1"">
  <button id="giam" class="btn btn-danger">-</button>
  <h1 id="show"></h1>
</div>


$("#tang").click(function(){
  let result = parseInt($("#number").val()) +1 ;
  $("#number").val(result);
});
$("#giam").click(function(){
  let result = parseInt($("#number").val()) -1 ;
  $("#number").val(result);
});

$("#number").change(function(){
  $("#show").text($("#number").val());
})

Upvotes: 1

Related Questions