Get value from textbox inside table and store it as variable using JQuery

Question

I have some problems with storing a variable from a textbox inside a dynamically generated table.

My goal is, I want to get the value from the textbox inside a dynamically generated table, then store it to the database.

My problem is, I can the textbox value using

 $(this).closest('tr').find("input").each(function() {
      var stock = $(this).val();
 })

But when I call it outside the function, the stock value doesn't store in the variable.

Here is the code to retrieve the data

$(document).on("click", ".tambahSparepart", function(event){
    $(this).closest('tr').find("input").each(function() {
        var stock = $(this).val();
    })
    alert('stock');
})

Here is the HTML code where the textbox is generate

<table id="example1" class="table table-bordered table-striped">
    <thead>
    <tr>
        <th>Stock Code</th>
        <th style="padding-right: 265px">Stock Description</th>
        <th>UM</th>
        <th>Stock Available</th>
        <th>Need</th>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody>
        <?php
            foreach ($data->result() as $row) {;?>
                <tr>
                    <td><?php echo $row->stock_code;?></td>
                    <td><?php echo $row->stock_description;?></td>
                    <td><?php echo $row->um;?></td>
                    <td><?php echo $row->stock;?></td>
                    <td>
                        <input type="text" name="stock" class="form-control" placeholder="Stock...">
                    </td>
                    <td>
                        <button class="tambahSparepart btn btn-block btn-default"
                        stock_code="<?php echo $row->stock_code;?>"
                      >
                        Tambah
                      </button>
                    </td>
                </tr>
        <?php }
              ;?>
    </tbody>
    <tfoot>
        <tr>
            <th>Stock Code</th>
            <th>Stock Description</th>
            <th>UM</th>
            <th>Stock Available</th>
            <th>Need</th>
            <th>Actions</th>
        </tr>
    </tfoot>
</table>

Thank you

var stock = ''; $(this).closest('tr').find("input").each(function() { stock = $(this).val(); }) initialize it outside .each — guradio
– guradio, Commented Oct 23, 2019 at 5:05

giuseppedeponte · Accepted Answer · 2019-10-23 05:50:11Z

Variables are scoped inside their context of execution, so when you are creating and assigning a value to your variables you actually have (at least) two contexts :

// Here is the global scope of execution, assuming all of this does not happen in another function:
 var outerVar = 123;

 $(this).closest('tr').find("input").each(
    function() {
      // Here you define another context of execution by declaring a function, that is a piece of code that is not executed right away, thus needs a different context.
      // Here you are executing your function multiple times inside a loop, so there will be multiple assignment of some value to different variables all named 'stock'
      var stock = $(this).val();
      // Inside this function you will have access to the outer and inner context variables
      console.log(outerVar, stock) // 123, 'some value'
    }
  )
  // Outside the function you will not have access to the function's inner context variables
      console.log(outerVar, stock) // 123, undefined

So, if you want the two contexts to communicate, you can create a variable on the outer scope, and then update it from the inner one. Here is an example with your case:

 // Here we defined a global variable, and since we are going to have multiple values, we give it an empty array as value.
 var stocks = [];

 $(this).closest('tr').find("input").each(
    function() {
      var stock = $(this).val();
      // At each iteration we push the current value of stock into the global array
      stocks.push(stock);
    }
  )

  console.log(stocks);

Hope this helps !

bharat parmar · Accepted Answer · 2019-10-23 07:43:19Z

0

Replace your code:

$(document).on("click", ".tambahSparepart", function(event){
    $(this).closest('tr').find("input").each(function() {
        var stock = $(this).val();
    })
    alert('stock');
})

To this one:

$(document).on("click", ".tambahSparepart", function(event){
    var stock =  $(this).closest('tr').find("input").val();
    alert(stock);
});

answered Oct 23, 2019 at 7:43

bharat parmar

3023 silver badges14 bronze badges

Collectives™ on Stack Overflow

Get value from textbox inside table and store it as variable using JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related