display a Textbox by clicking CheckBox array

I displayed a list of item with Checkbox. I want a user to Check the items he want and enter the quantity he wants for the item. I hid the Quantity Textbox (txtQty) using CSS. I want if you click an Item, the corresponding txtQty will appear for you to enter the Quantity you want. I am using CodeIgniter. So I have sucdessfully pulled data fro MySQL through the Model to the View and displayed it, as shown in the interface image attached. I am using Jquery to do the hide and show. The Interface

My Code: 2. View Code (PHP)

<table class="card1 table table-striped table-bordered table-responsive" style="height: 350px; overflow: scroll">
    <thead>
        <tr>
            <th>SN</th>
            <th>Product</th>
            <th>Tick</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <?php $i=0; foreach($it as $r): $i++; ?>
        <tr>
            <td><?php echo $i; ?></td>
            <td><?=$r['Item'];?></td>
            <td>
                <label>
                    <input type="checkbox" name="item[]" value="<?=$r['Item']?>" id="jj">
                </label>
            </td>
            </td>
            <td> 
                <input type="number" name="qty[]" id="tx" style="display: none" />
                <input type="hidden" name="price" value="<?=$r['CostPrice']?>" />
            </td>
        </tr> 
        <?php endforeach?>
        <tr>
            <td colspan="3">
                <input type="submit" name="btnub" value="Send Order" class="btn btn-warning card1" />
            </td>
        </tr>
    </tbody>
</table>

3. my Jquery Code.

<script>
    $(document).ready(function() {
        $('#jj').change(function () {
            if (this.checked) {
                $('#tx').show();
            } else {
                $('#tx').hide();
            }
        });
    });
</script>

I will also like to know how to now retrieve only selected Items, and quantity at the Controller

Answer

There’s two main issues here. Firstly your PHP loop is creating HTML with repeated id attributes. This is invalid as id have to be unique within the DOM. Change those to classes instead.

As a corollary you can no longer use the id to select the #tx element. You’ll need to select it by it’s class using DOM traversal to relate it to the specific checkbox which was changed.

Also note that the if condition can be simplified by using toggle(), and that your HTML has an additional </td> which can be removed.

With all that said, try this:

jQuery($ => {
  $('.jj').on('change', function() {
    $(this).closest('tr').find('.tx').toggle(this.checked);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="card1 table table-striped table-bordered table-responsive" style="height: 350px; overflow: scroll">
  <thead>
    <tr>
      <th>SN</th>
      <th>Product</th>
      <th>Tick</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Foo</td>
      <td><label><input type="checkbox" name="item[]" value="100" class="jj"></label></td>
      <td>
        <input type="number" name="qty[]" class="tx" style="display: none" />
        <input type="hidden" name="price" value="50" />
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bar</td>
      <td><label><input type="checkbox" name="item[]" value="100" class="jj"></label></td>
      <td>
        <input type="number" name="qty[]" class="tx" style="display: none" />
        <input type="hidden" name="price" value="50" />
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Fizz</td>
      <td><label><input type="checkbox" name="item[]" value="100" class="jj"></label></td>
      <td>
        <input type="number" name="qty[]" class="tx" style="display: none" />
        <input type="hidden" name="price" value="50" />
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>Buzz</td>
      <td><label><input type="checkbox" name="item[]" value="100" class="jj"></label></td>
      <td>
        <input type="number" name="qty[]" class="tx" style="display: none" />
        <input type="hidden" name="price" value="50" />
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <input type="submit" name="btnub" value="Send Order" class="btn btn-warning card1" />
      </td>
    </tr>
  </tbody>
</table>

Advertisement

Answer