CODEWITHSUNDEEP
javascriptjquery
vinai
vinai

Reputation: 91

how to get the value of the variable stored in another variable in jquery

I want to get the value of a input box if its corresponding checkbox is checked.

Tried it at jsfiddle https://jsfiddle.net/xpvt214o/125530/

I can get the variable name, but can't get is value. I get an 'undefined' alert an the end.

Also, I need to get the total of all amounts which are checked. How can I do this?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(":checkbox").click(function(){
        //$(this).hide();
        if (this.checked) {
         var id = $(this).attr('id');
         var x = "amt_" + id;
         alert("x is " + x);
         alert($(x).val());
         }
    });

});
</script>
</head>
<body>
<form method="post" action=""  >
<input type="checkbox" name="food[]" id="345" value="inv_345">34 
   Amount <input name=amt_345 id="amt_345" value=10><br> 
<input type="checkbox" name="food[]" id="456" value="inv_456">45 
   Amount <input name=amt_456 value=20 id=amt_456><br>
<input type="checkbox" name="food[]" id="789" value="inv_789">78 
   Amount <input name=amt_789 id=amt_789 value=30><br>
<input type=submit name=submit value=submit>
</form>
Total Amt of Clicked Values is <div id="totalval"></div>
</body>
</html>

Upvotes: 2

Views: 281

Answers (2)

Takit Isy
Takit Isy

Reputation: 10081

From your code…

You needed to add a "#" in your variable to make it work var x = "#amt_" + id;.
Plus, I added the total functionnality.

Here is a working snippet of all that:
(I modified your alerts to console.logs because alerts are making me mad! :))

$(document).ready(function() {
  $(":checkbox").click(function() {

    if (this.checked) {
      var id = $(this).attr('id');
      var x = "#amt_" + id; // You needed to add #
      console.log($(x).val());
    }

    // Added total!
    var total = 0;
    $(":checkbox:checked").each(function(index) {
      x = "#amt_" + $(this).attr('id');
      total += parseInt($(x).val());
    });
    console.log("total:", total);

  });

});
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <form method="post" action="">
    <input type="checkbox" name="food[]" id="345" value="inv_345">34 Amount <input name=amt_345 id="amt_345" value=10><br>
    <input type="checkbox" name="food[]" id="456" value="inv_456">45 Amount <input name=amt_456 value=20 id=amt_456><br>
    <input type="checkbox" name="food[]" id="789" value="inv_789">78 Amount <input name=amt_789 id=amt_789 value=30><br>
    <input type=submit name=submit value=submit>
  </form>
  Total Amt of Clicked Values is
  <div id="totalval"></div>
</body>

</html>

Hope it helps!

Upvotes: 1

Criss
Criss

Reputation: 983

Your selector is incomplete at the end there:

alert($(x).val());

You're selector is $('amt_456'), which doesn't match any elements, but I think you want to find the input that's name attribute is that variable:

alert($('input[name="' + x + '"]').val());

... if I understand correctly.

Upvotes: 0

Related Questions