CODEWITHSUNDEEP
javascriptjquery
tkav
tkav

Reputation: 94

How can I use id and value of text input?

Textbox:

<input class="qty_txt" input id="1234" type="text"  placeholder="Current item QTY">

Javascript:

$(".qty_txt").on("change", function () {

var productID = elem.id;
var qty = elem.value;

alert(productID + qty);

});

How can I use the ID from the textbox, define it as 'productID' and define the value of the texbox as 'qty' to use in the rest of the function?

http://jsfiddle.net/VnYm7/4/

Upvotes: 1

Views: 509

Answers (4)

grahamhoyes
grahamhoyes

Reputation: 321

One of the easier things to do would be to pass in the current division as a parameter to the function using the jQuery $(this) selector. This way, the same function works for all the .qty-txt classes.

You can use the .attr() method of jQuery to get the ID of the div, and then call .val() to get the value. You could also use native JS' .value method here.

Important to note: the $(document).ready() wrapper around the jQuery code assures that that code will be called right when the page loads. If it weren't called, the browser wouldn't know to do things if the input box is changed. 

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!--jQuery Google CDN-->
        <script type="text/javascript">
               $(document).ready(function() { 
                   $(".qty_txt").on("change", function ($(this)) {

                       var productID = $(this).attr("id");
                       var qty = $(this).val();

                       alert(productID + qty);

                   });
               });

        </script>
    </head>
    <body>
        <input class="qty_txt" input id="1234" type="text"  placeholder="Current item QTY">
    </body>
</html>

Upvotes: 1

jingyinggong
jingyinggong

Reputation: 646

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    </head>
    <body>
        <input type="text" class="qty_txt" id="id1" />
        <input type="text" class="qty_txt" id="id2" />
        <input type="text" class="qty_txt" id="id3" />
        <script>
        $(".qty_txt").on("change", function () {
          var productID = this.id, qty = this.value;
          alert(productID + qty);
        });
        </script>
    </body>
</html>

This is example with several input with different ids, you may bind the "change" function to all the ".qty_txt" elements! the productID and productValue you may get by the code above!

Upvotes: 0

jdphenix
jdphenix

Reputation: 15415

If you want to retrieve attributes from the event's target, you can use specify a parameter in the function () you pass to on(), like this: 

$(".qty_txt").on("change", function (e) {
  var productID = e.target.id;
  var qty = e.target.value;

  alert(productID + ":" +  qty);
});

Take a look at this for details.

Upvotes: 0

kjsebastian
kjsebastian

Reputation: 1279

var productID = $(this).attr('id');
var qty = $(this).val();

This video better illustrates the use of this and contexts in javascript

Upvotes: 0

Related Questions