CODEWITHSUNDEEP
javascripthtmljqueryhtml-table
Anu
Anu

Reputation: 1129

How to get input value in a table's td on button click

I have a dynamic table and there is an input field in each row as well as a respective button on every rows. I want to get the respective value of the input field when I click on the respective button. To replicate the scenario, you may refer to the following static code with two rows. Can someone help?

$(".returnItem").click(function(){
    var row = $(this).closest("input").find("input[name='newQty']").val(); //This is not working
    var row = $(".newQty").val(); //This is not working also
    alert(row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
  <div class="container-fluid">
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Part Number</th>
          <th scope="col">Name of Item</th>
          <th scope="col">Description</th>
          <th scope="col">Quantity</th>
          <th scope="col">New Quantity</th>
          <th scope="col"></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>xxxxxxxxxxx</td>
          <td>name1</td>
          <td>description1</td>
          <td>10</td>
          <input class="form-control oldQty" type="number" name="oldQty" value="10" hidden readonly>
          <td><input class="form-control newQty" type="number" name="newQty"></td>
          <div class="container text-center">
            <td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
            <td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
          </div>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>yyyyyyyyyy</td>
          <td>name2</td>
          <td>description2</td>
          <td>20</td>
          <input class="form-control oldQty" type="number" name="oldQty" value="20" hidden readonly>
          <td><input class="form-control newQty" type="number" name="newQty"></td>
          <div class="container text-center">
            <td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
            <td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
          </div>
        </tr>
      </tbody>
    </table>
  </div>
</form>

Upvotes: 0

Views: 2541

Answers (2)

Nithin - Techidiots
Nithin - Techidiots

Reputation: 103

  1. You have used type="submit" in button which led to refresh in jquery fetching data there are many options below given is one of them.

  2. Use latest version of jquery cdn for using closest and find based functions. https://cdnjs.com/libraries/jquery

$(".returnItem").click(function(){
    var row = $(this).parent().prev().prev().children().val(); 
    alert(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
  <div class="container-fluid">
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Part Number</th>
          <th scope="col">Name of Item</th>
          <th scope="col">Description</th>
          <th scope="col">Quantity</th>
          <th scope="col">New Quantity</th>
          <th scope="col"></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>xxxxxxxxxxx</td>
          <td>name1</td>
          <td>description1</td>
          <td>10</td>
          <input class="form-control" type="number" class="oldQty" name="oldQty" value="10" hidden readonly>
          <td><input class="form-control" type="number" class="newQty" name="newQty"></td>
            <td><button type="button" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
            <td><button type="button" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>yyyyyyyyyy</td>
          <td>name2</td>
          <td>description2</td>
          <td>20</td>
          <input class="form-control" type="number" class="oldQty" name="oldQty" value="20" hidden readonly>
          <td><input class="form-control" type="number" class="newQty" name="newQty"></td>
            <td><button type="button" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
            <td><button type="button" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
        </tr>
      </tbody>
    </table>
  </div>
</form>

Upvotes: 2

GAMELASTER
GAMELASTER

Reputation: 1091

In your example you are using jQuery 1.2.3, which doesn't contains closest function (added since 1.3). Although, you're not looking for function closest, but parents. By this function, you will find parent <tr>, and then by find you will find the input and get his value via val.

Also, since your buttons are inside form, after pressing the button, form will be submitted, so you need to add e.preventDefault() from preventing the form to be sent.

$(".returnItem").click(function(e){
  e.preventDefault();
  row = $(this).parents("tr").find("input[name='newQty']").val();
  alert(row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
  <div class="container-fluid">
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Part Number</th>
          <th scope="col">Name of Item</th>
          <th scope="col">Description</th>
          <th scope="col">Quantity</th>
          <th scope="col">New Quantity</th>
          <th scope="col"></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>xxxxxxxxxxx</td>
          <td>name1</td>
          <td>description1</td>
          <td>10</td>
          <input class="form-control" type="number" class="oldQty" name="oldQty" value="10" hidden readonly>
          <td><input class="form-control" type="number" class="newQty" name="newQty"></td>
          <div class="container text-center">
            <td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
            <td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
          </div>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>yyyyyyyyyy</td>
          <td>name2</td>
          <td>description2</td>
          <td>20</td>
          <input class="form-control" type="number" class="oldQty" name="oldQty" value="20" hidden readonly>
          <td><input class="form-control" type="number" class="newQty" name="newQty"></td>
          <div class="container text-center">
            <td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
            <td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
          </div>
        </tr>
      </tbody>
    </table>
  </div>
</form>

Upvotes: 2

Related Questions