在复选框旁边添加文本

Question

when click the checkbox another modal will pop up for the quantity of the selected value and I check Geda Jumuad and add "2" as quantity value but then the value '2' was put in the beginning of the checboxes . . I want to put the quantity value beside the selected checkbox.. please help me. heres my code

<b>Menu: </b>
<br>
<div class="menucontainers" style="background: #fff; border-style: solid; border-width: 2px; border-color:#ccccff; width: 400px; height:150px; overflow:auto;">
  <!-- <img src ="../1.jpg" class="img-rounded"> -->

  <ul>
      <?php
                          include ('myConnection.php');

                          $query = "Select * from menu_category order by menu_cat_name";
                          $result = mysql_query($query);
                          while ($row = mysql_fetch_array($result)) {
                              $menucatname = $row['menu_cat_name'];
                              $menucatid = $row['menu_cat_id_inc'];

                        ?>
          <li class="dropdownz" style="border-style: solid;border-color: white; border-bottom: 2px; border-left: 2px; border-right: 2px">
              <a href="#" data-toggle="dropdownz" style="font-size:15px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i id = "arrow" class="icon-arrow"></i><?php echo "$menucatname"; ?></a>
              <ul id="ddownz-menu" class="dropdownz-menu">
                  <li>
                      <?php
                              $query2 = "Select * from menu where menu_cat_id_inc = '$menucatid' order by menu_name";
                              $result2 = mysql_query($query2);
                              $countme = 0;
                              while ($row2 = mysql_fetch_array($result2)) {
                                  $menuname = $row2['menu_name'];
                                  $price = $row2['price'];                          
                              if ($countme % 2 == 0)
                              {
                            ?>
                          <div class="col col-md-6">
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <input type="checkbox" id="newmenu" name="cbox[]" style="font-size:15px" value="<?php echo $row2['menu_id_inc'];?>">
                              <?php

                                      echo '<span id = "quantity" style = "color:black;"></span>'. " " . "$menuname";
                                  ?>

                          </div>
                          <?php
                              }
                              else
                              {

                              ?>
                              <div class="col col-md-4">
                                  <input type="checkbox" id="newmenu" name="cbox[]" value="<?php echo $row2['menu_id_inc'];?>">

                                  <?php
                                      echo '<span id = "quantity" style = "color:black;"></span>'. " " . "$menuname";
                                  ?>
                              </div>

                              <?php
                              }
                              }
                                  ?>
                  </li>
              </ul>
          </li>
          <?php
                          }

                        ?>
  </ul>
</div>

and for javascript. .

$("#qtyok").click(function () {
    var id = $("#menuid").val();
    var qty = $("#qtybox").val();
    if (qty != '') {
        $("#loaderz").show();
        $.post("fm_valuemenuload.php", {
                id: id,
                qty: qty

            },
            function (data, status) {
                $("#loaderz").hide();
                $("#modalQty").modal('hide');
                $("#message").html('Added');
                document.getElementById('quantity').innerHTML = qty;
                price += data * qty;
                $("#newprice").val(price.toFixed(2));
                $("#modalSUCCESS").modal('show');
                setTimeout(func1, 3000);

            });
    }
});

`

Answer 1

I might be misunderstanding your problem but... I think you just got it in the wrong order. Place the span after the $menuname.

Instead of

echo '<span id = "quantity" style = "color:black;"></span>'. " " . "$menuname";

Do

echo "$menuname".' <span id = "quantity" style = "color:black;"></span>';

You also must assign unique ids to your spans. Although your checkboxes are dynamic, you can for example retrieve the value of those checkboxes and append it to 'quantity'. You will have ids 'quantity1', 'quantity2', 'quantity3' produced. Change the previous line of code to

echo "$menuname".' <span id = "quantity'.$row2['menu_id_inc'].'" style = "color:black;"></span>';

You will also have to do something similar in your javascript. Retrieve the checkbox value number in a javascript variable, and append it to 'quantity' here

document.getElementById('quantity' + value).innerHTML = qty;