How to add dropdown selected data to table using jquery

Joined
Feb 25, 2022
Messages
7
Reaction score
1
I am trying to add data from a select dropdown to a table so in the first table td cell it would display the service name then in the second table td cell it would display the service cost.

I found this on the forum https://stackoverflow.com/questions/41034014/how-to-add-dropdown-selected-data-to-table-using-jquery which works but just adds the service name only so am trying to amend it so it adds the service cost to the second table td cell but am getting stuck with it. Below is what I got so far. I'm not 100% on jquery

I am trying to add data from a select dropdown to a table so in the first table td cell it would display the service name then in the second table td cell it would display the service cost.

I found this on the forum https://stackoverflow.com/questions/41034014/how-to-add-dropdown-selected-data-to-table-using-jquery which works but just adds the service name only so am trying to amend it so it adds the service cost to the second table td cell but am getting stuck with it. It's not doing anything now when I click the Add To Lost button.

Below is what I got so far. I'm not 100% on jquery

Code:
<div class="row">
        <div class="col-lg-4">
        <?php
        include("connectdb.php"); // Database connection using MySQLi

        if($r_set = $mysqli->query("SELECT id, service, cost from service_list")){

        ?>
        <div class="form-group servicename">
             <select id="service" name="service" class="form-control servicelist">
                  <option value="">Select Service</option>

                  <?php
        while ($row = $r_set->fetch_assoc()) {
                  echo "<option data-price=" . $row['cost'] . " value='" . $row['service'] . "'>" . $row['service'] . "</option>";
        }
                  ?>
             </select>
        <?php
     }else{
        echo $mysqli->error;
     }
        ?>
     </div>
    </div>
    <div class="col-lg-4">
        <input type="text" class="form-control form-control-border text-right price-input" readonly>
    </div>
    </div>

<div class="row">
      <input type="button" value="Add To List" class="btn btn-primary submit1" id="submit1" />
</div>

<div class="row">
     <table id="table1" class="table">
            <thead>
                  <tr>
                      <th style="width: 10px">#</th>
                      <th>Task</th>
                      <th>Progress</th>
                      <th style="width: 40px">Label</th>
                  </tr>
             </thead>
                    <tbody></tbody>
      </table>
</div>

    <script>
            $("#submit1").click(function() {
                {
                    var selected = $('.servicelist');
                    selected.each(function() {
                        $('#table1')
                        var tr = $('<tr>')
                            tr.append('<td>' + $(this).val() + '</td>');
                        tr.append('<td>' +(this).val($(this).find(':selected').data('price') + '</td>');
                        $('#table1 tbody').append(tr)
                    });
                }
            });
        </script>
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
Try this:

HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <style>
    
    </style>
  
  </head>
  <body>
<div class="form-group servicename">
             <select id="service" name="service" class="form-control servicelist">
                  <option value="">Select Service</option>
                  <option data-price="100" value="service1">service1</option>
                  <option data-price="200" value="service2">service2</option>
                  <option data-price="300" value="service3">service3</option>
                  <option data-price="400" value="service4">service4</option>
                  <option data-price="500" value="service5">service5</option>
             </select>     

</div>                 
<div class="row">
      <input type="button" value="Add To List" class="btn btn-primary submit1" id="submit1" />
</div>

<div class="row">
     <table id="table1" class="table">
            <thead>
                  <tr>
                      <th style="width: 10px">#</th>
                      <th>Task</th>
                      <th>Progress</th>
                      <th style="width: 40px">Label</th>
                  </tr>
             </thead>
                    <tbody></tbody>
      </table>
</div>

    <script>
            $("#submit1").click(function(){
                    const val = $('#service').val(),
                          cost = $('#service :selected').attr('data-price'),
                          curr = $('#table1 tr').length;
                          if(!cost) return;
                    $('#table1').append('<tr><td>' + curr + '</td><td>' + val + '</td><td>' + cost + '</td><td>-</td></tr>');
            });
        </script>
  </body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top