I'm developing billing software in core php
i need searchable select tag with add more button
i had created add select using bootstrap
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
</head>
<div class="container">
<div class="row">
<h2>Bootstrap-select example</h2>
<p>This uses <a href="https://silviomoreto.github.io/bootstrap-select/">https://silviomoreto.github.io/bootstrap-select/</a>
</p>
<hr />
</div>
<div class="row-fluid">
<tbody>
<tr>
<td>
<h4>1</h4>
</td>
<td class="text-semibold text-dark">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" onchange="getModel(this.value);" name="products">
<option value="" disabled selected>Choose Products</option>
<?php include "inc/db-connect.php"; $qryyy=m ysqli_query($conn, "SELECT * FROM `products`"); if (mysqli_num_rows($qryyy)> 0) { // output data of each row while($rowpro = mysqli_fetch_assoc($qryyy)) { ?>
<option data-subtext="(INR <?php echo $rowpro['price']; ?>/-)" value="<?php echo $rowpro['id']; ?>">
<?php echo $rowpro[ 'pname']; ?>
</option>
<?php }} else { ?>
<option value="" data-subtext=" first!!!">
<?php echo "Please add products"; ?>
</option>
<?php } ?>
</select>
</td>
<td>
<label id="model-list" style="padding-left: 100px;"></label>
</td>
<td>
<input type="number" name="qty" id="qty" min="1" style="width:70px;">
</td>
<td>
<input type="number" name="price" id="price" min="1" style="width:70px;" readonly>
</td>
<td>
<button type="button" name="add" id="add" class="btn btn-success">Add More</button>
</td>
</tr>
</tbody>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
</html>
Above code is working fine but when i had inserted add more javascript then css is missing from next result of add more script
<script>
$(document).ready(function() {
var i = 1;
$('#add').click(function() {
i++;
$('#dynamic_field').append('<tr id="row' + i + '"><td><h4>' + i + '</h4></td><td class="text-semibold text-dark"><select class="selectpicker" data-show-subtext="true" data-live-search="true" onchange="getModel(this.value);" name="products"><option value="" disabled selected>Choose Products</option><?php
include "inc/db-connect.php"; $qryyy = mysqli_query($conn, "SELECT * FROM `products`");
if (mysqli_num_rows($qryyy) > 0) {
// output data of each row
while ($rowpro = mysqli_fetch_assoc($qryyy)) { ?>
< option data - subtext = "(INR <?php echo $rowpro['price']; ?>/-)"
value = "<?php echo $rowpro['id']; ?>" > <? php echo $rowpro['pname']; ?> < /option><?php
}
} else { ?>
< option value = ""
data - subtext = " first!!!" > <? php echo "Please add products"; ?> < /option><?php } ?> < /select > < /td > < td > < label id = "model-list"
style = "padding-left: 100px;" > < /label></td > < td > < input type = "number"
name = "qty"
id = "qty"
min = "1"
style = "width:70px;" > < /td><td><input type="number" name="price" id="price" min="1" style="width:70px;" readonly></td > < td > < button type = "button"
name = "remove"
id = "'+i+'"
class = "btn btn-danger btn_remove" > X < /button></td > < /tr>');
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$('#submit').click(function() {
$.ajax({
url: "name.php",
method: "POST",
data: $('#add_name').serialize(),
success: function(data) {
alert(data);
$('#add_name')[0].reset();
}
});
});
});
</script>
I know my english is too bad, but i need help if any one can understand with my language then please help me out from this... Or just suggest other way to go through it... ..............................................................................
EDIT : Codepen Demo : https://codepen.io/singhviku/pen/JzyBVZ
