Getting the value from a textbox

Question

I have a question getting the values from a textbox using jquery. My code is as follows:

<table width="500" border="0">
    <tr>
        <td><input type="text" class="quantity" /></td>
        <td><input type="button" class="btn" p_id="item2" value="submit" /></td>
    </tr>
    <tr>
        <td><input type="text" class="quantity" /></td>
        <td><input type="button" class="btn" p_id="item3" value="submit" /></td>
    </tr>
    <tr>
        <td><input type="text" class="quantity" /></td>
        <td><input type="button" class="btn" p_id="item4" value="submit" /></td>
    </tr>
</table>

<script>
    $(document).ready(function(){
        $('.btn').click(function(){
            var p_id = $(this).attr("p_id");
            var q_ty = $('#quantity').val();
            $.post("updateQty.php",{p_id:p_id, q_ty:q_ty},function(result){
                alert(result);
            });
        });
    });
</script>

I have managed to get the ID for the items, but I can't get the values for the textbox that is selected.

[When do you use Class vs Id?](https://stackoverflow.com/questions/33884214/when-do-you-use-class-versus-id/33884388#33884388) the `id` attribute should be unique, in your code it appears 3 times. try switching to `class` instead or update the `id` for each input to be unique. — Jake, Mar 17 '16 at 02:55

Steve · Accepted Answer · 2016-03-17T02:59:56.700

Since all of your textboxes have the same ID, you won't be able to select the value of any particular one the way you are doing it.

Instead, you could get the closest <tr> element based on the button that was clicked, then find the input and get the value that way.

Eg.

<table width="500" border="0">
    <tr>
        <td><input type="text" class="quantity-input" /></td>
        <td><input type="button" class="btn" p_id="item2" value="submit" /></td>
    </tr>
    <tr>
        <td><input type="text" class="quantity-input"/></td>
        <td><input type="button" class="btn" p_id="item3" value="submit" /></td>
    </tr>
    <tr>
        <td><input type="text" class="quantity-input" /></td>
        <td><input type="button" class="btn" p_id="item4" value="submit" /></td>
    </tr>
</table>

<script>
    $(document).ready(function(){
        $('.btn').click(function(){
            var row = $(this).closest('tr');
            var p_id = $(this).attr("p_id");
            var q_ty = row.find(".quantity-input").val();

            $.post("updateQty.php",{p_id:p_id, q_ty:q_ty},function(result){
                alert(result);
            });
        });
    });
</script>

Note, each input has a class to select on, rather than the id.

score 0 · Answer 2 · answered Mar 17 '16 at 02:56

There are several input with id = quantity...I think you should change them so that you can differentiate by concat the p_id you find

<table width="500" border="0">
  <tr>
<td><input type="text" id="quantity_item2" /></td>
<td><input type="button" class="btn" p_id="item2" value="submit" /></td>
  </tr>
  <tr>
    <td><input type="text" id="quantity_item3" /></td>
    <td><input type="button" class="btn" p_id="item3" value="submit" /></td>
  </tr>
  <tr>
    <td><input type="text" id="quantity_item4" /></td>
    <td><input type="button" class="btn" p_id="item4" value="submit" /></td>
  </tr>
</table>

<script>
    $(document).ready(function(){
        $('.btn').click(function(){
            var p_id = $(this).attr("p_id");
            var q_ty = $('#quantity_' + p_id).val();
            $.post("updateQty.php",{p_id:p_id, q_ty:q_ty},function(result){
            alert(result);
            });
        });
    });
</script>

i'm sorry, it's supposed to be class='quantity' not id='quantity' — hafizy Baharudin, Mar 17 '16 at 03:08

Getting the value from a textbox

2 Answers2