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
<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>