We Keep Coding

how to add items to dynamic drop down list in laravel using ajax JQuery

friends, I am facing an issue in Ajax actually. My code is working fine when the page is loaded. But When I click on the add button to add a new row for second entry it doesn't work. When Page loaded, it's working perfect When I click on Add ButtonAfter clicking on Add Button, It add duplicate text in drop-down box
Here is my code
$(document).ready(function(){
var experienceCount = 1;
experience_field(experienceCount);
function experience_field(number)
{
html = '<div class="row">'
html += '<div class="col-3"><div class="form-group"><label for="PreviousHospital">Previous Hospital</label><select class="form-control select2" name="PreviousHospital[]" id="PreviousHospital" style="width: 100%;"><option selected="selected">Select Previous Hospital</option></select></div></div>';
$.ajax({
url: "{{ route('previousHospital') }}",
method:'get',
data:$(this).serialize(),
dataType:'json',
success:function(data)
{
$.each(data, function(value, text){
$("#PreviousHospital").append('<option value="' + text.Hospital + '">' + text.Hospital + '</option>');
});
}
});
html += '<div class="col-2"><div class="form-group"><label for="Experience">Experience</label><input type="text" class="form-control" name="Experience[]" id="Experience" required></div></div>';
html += '<div class="col-3"><div class="form-group"><label for="WorkCountry">Country</label><select class="form-control select2" name="WorkCountry[]" id="WorkCountry" style="width: 100%;"><option selected="selected">Select Country</option></select></div></div>';
html += '<div class="col-3"><div class="form-group"><label for="WorkCity">City</label><select class="form-control select2" name="WorkCity[]" id="WorkCity" style="width: 100%;"><option selected="selected">Select City</option></select></div></div>';
if(number > 1)
{
html += '<div class="col-1"><div class="form-group"><label style="color: white;">Button</label><button type="button" name="experienceRemove" id="" class="btn btn-block btn-outline-danger btn-sm experienceRemove form-control" >Remove</button></div></div></div>';
$('.experience').append(html);
}
else
{
html += '<div class="col-1"><div class="form-group"><label style="color: white;">Button</label><button type="button" name="experienceAdd" id="experienceAdd" class="btn btn-block btn-outline-success btn-sm form-control">Add</button></div></div></div>';
$('.experience').html(html);
}
}
$(document).on('click', '#experienceAdd', function(){
experienceCount++;
experience_field(experienceCount);
});
$(document).on('click', '.experienceRemove', function(){
experienceCount--;
$(this).closest(".row").remove();
});
});
You can check all images, in the first image, when I load the page. It works fine and populates the data to the dropdown list too. But if I click on the add button to add more dynamic fields so the Ajax doesn't work, it adds data in first loaded Dropdown list not in second dropdown list.
What i need, i need it should add data in all dropdowns lists but not duplicate as you can see duplicate items in images. if user click add button.

I solved the problem, I was using the ID instead of Class name
$.ajax({
url: "{{ route('previousHospital') }}",
method:'get',
data:$(this).serialize(),
dataType:'json',
success:function(data)
{
$('.PreviousHospital').find('option').remove();
$(".PreviousHospital").append('<option selected="selected">Select Previous Hospital</option>');
$.each(data, function(value, text){
$(".PreviousHospital").append('<option value="' + text.Hospital + '">' + text.Hospital + '</option>');
});
}
});

Add this before appened with eaxh
$('#PreviousHospital').find('option').remove();

Table rows not visible within <tbody>. How could search filter be implemented in this table?

I'm trying to build a table based on this example: http://demo.webslesson.info/multiple-checkbox-update-data/
https://www.webslesson.info/2018/09/update-multiple-rows-with-checkbox-in-php-using-ajax-jquery.html
It works fine, however I'm struggling with adding a search field to enable search across table rows.
I've tried adding search field, but it didn't work because table rows are not listed within tbody tag, but called dynamically from ajax and not sure what would be the best way to teach my search field to interact with the table rows listed as results from script below. Would someone be able to help me with this? Thanks in advance!
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<form method="post" id="update_form">
<div align="left">
<input type="submit" name="multiple_update" id="multiple_update" class="btn btn-info" value="Multiple Update" />
</div>
<br />
<div class="table-responsive">
<table id="mirror" class="table table-bordered table-striped">
<thead>
<th width="5%"></th>
<th width="20%">Name</th>
<th width="30%">Address</th>
<th width="15%">Gender</th>
<th width="20%">Designation</th>
<th width="10%">Age</th>
</thead>
<tbody></tbody>
</table>
</div>
</form>
</div>
</div>
</body>
<script>
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"select.php",
method:"POST",
dataType:"json",
success:function(data)
{
var html = '';
for(var count = 0; count < data.length; count++)
{
html += '<tr>';
html += '<td><input type="checkbox" id="'+data[count].id+'" data- name="'+data[count].name+'" data-address="'+data[count].address+'" data-gender="'+data[count].gender+'" data-designation="'+data[count].designation+'" data-age="'+data[count].age+'" class="check_box" /></td>';
html += '<td>'+data[count].name+'</td>';
html += '<td>'+data[count].address+'</td>';
html += '<td>'+data[count].gender+'</td>';
html += '<td>'+data[count].designation+'</td>';
html += '<td>'+data[count].age+'</td></tr>';
}
$('tbody').html(html);
}
});
}
fetch_data();
$(document).on('click', '.check_box', function(){
var html = '';
if(this.checked)
{
html = '<td><input type="checkbox" id="'+$(this).attr('id')+'" data-name="'+$(this).data('name')+'" data-address="'+$(this).data('address')+'" data-gender="'+$(this).data('gender')+'" data-designation="'+$(this).data('designation')+'" data-age="'+$(this).data('age')+'" class="check_box" checked /></td>';
html += '<td><input type="text" name="name[]" class="form-control" value="'+$(this).data("name")+'" /></td>';
html += '<td><input type="text" name="address[]" class="form-control" value="'+$(this).data("address")+'" /></td>';
html += '<td><select name="gender[]" id="gender_'+$(this).attr('id')+'" class="form-control"><option value="Male">Male</option><option value="Female">Female</option></select></td>';
html += '<td><input type="text" name="designation[]" class="form-control" value="'+$(this).data("designation")+'" /></td>';
html += '<td><input type="text" name="age[]" class="form-control" value="'+$(this).data("age")+'" /><input type="hidden" name="hidden_id[]" value="'+$(this).attr('id')+'" /></td>';
}
else
{
html = '<td><input type="checkbox" id="'+$(this).attr('id')+'" data-name="'+$(this).data('name')+'" data-address="'+$(this).data('address')+'" data-gender="'+$(this).data('gender')+'" data-designation="'+$(this).data('designation')+'" data-age="'+$(this).data('age')+'" class="check_box" /></td>';
html += '<td>'+$(this).data('name')+'</td>';
html += '<td>'+$(this).data('address')+'</td>';
html += '<td>'+$(this).data('gender')+'</td>';
html += '<td>'+$(this).data('designation')+'</td>';
html += '<td>'+$(this).data('age')+'</td>';
}
$(this).closest('tr').html(html);
$('#gender_'+$(this).attr('id')+'').val($(this).data('gender'));
});
$('#update_form').on('submit', function(event){
event.preventDefault();
if($('.check_box:checked').length > 0)
{
$.ajax({
url:"multiple_update.php",
method:"POST",
data:$(this).serialize(),
success:function()
{
alert('Data Updated');
fetch_data();
}
})
}
});
});
</script>
<script>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("mirror");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>

Here's an idea for a search field.
After searching a given string, the results will appear in the searchResults div. The script searches through every cell in the tbody element, that hasn't got any child elements - that way the cells with checkboxes are being ignored.
As a search criterion I'm using a simple regular expression, that matches every string that contains the searched value.
Add this part below your form:
<form>
<input id="searchInput" type="text" name="search" />
<button id="searchBtn">Search</button>
</form>
<div id="searchResults"></div>
And this in script tag:
$('#searchBtn').on('click', (e) => {
e.preventDefault()
$('#searchResults').html('')
const searchedVal = $('#searchInput').val()
const tableRows = $('tbody tr')
tableRows.each(row => {
const columns = $(tableRows[row]).find('td')
columns.each(col => {
const columnContent = $(columns[col]).html()
const columnChildren = $(columns[col]).children().length
if (columnChildren > 0) return
const regex = new RegExp('.*' + searchedVal + '.*')
const match = columnContent.match(regex)
match != null && $('#searchResults').append(`<p>Found in row ${row + 1}, column ${col + 1}: ${columnContent}</p>`)
})
})
})

Display data after choose product name using ajax

I try to use ajax output data from database I pass data product_name and product weight How can i display product weight out of
Now my Output
<select>category</select> //after select category It will display product name
<select>productname</select> //after select productname How can i display my product weight outof select tag
i want to display <span>product_weight</span> after I choose product_name
Here is my AJAX call . i try to console my data i get product_weight in my data already.
var op=" ";
$.ajax({
type:'get',
url:'{!!URL::to('findProductName')!!}',
data:{'id':cat_id},
success:function(data){
// console.log('success');
console.log(data);
// console.log(data.length);
op+='<option value="0" selected disabled>chose product</option>';
for(var i=0;i<data.length;i++){
op+='<option value="'+data[i].id_p+'" name="id_p">'+data[i].product_name+data[i].product_weight+'</option>';
}
div.find('.productname').html(" ");
div.find('.productname').append(op);
// console.log(data.length);
},
error:function(){
}
});
here is my html
<select style="width:50%;" class="productcategory" id="prod_cat_id" name="id_c[]">
<option value="0" disabled="true" selected="true">category</option>
#foreach($category as $c)
<option value="{{$c->id_c}}" name="id_c" id="id_c">{{$c->category_name}}</option>
#endforeach
</select>
<select style="width:48%;" class="productname" name="id_p[]">
<option value="0" disabled="true" selected="true"> productname</option>
</select>
here is my append jeavescript
<script type="text/javascript">
var i = 0;
$(document).ready(function() {
$('#add-form').click(function() {
i++;
$('#add-me').append(
'<tbody id="row'+i+'"><tr>'+
'<td class="col-md-7">'+
'<select style="width:50%;" class="productcategory" id="prod_cat_id" name="id_c['+ i +']"><option value="0" disabled="true" selected="true">category</option>#foreach($category as $c)<option value="{{$c->id_c}}" name="id_c[]" id="id_c[]">{{$c->category_name}}</option>#endforeach</select><select style="width:48%;" class="productname" name="id_p['+ i +']"><option value="0" disabled="true" selected="true"> product name</option></select>'
+'</td>'
+'<td class="col-md-1">'
+'<div id="target_div_where_to_display_weight['+i+']" name="target_div_where_to_display_weight['+i+']">'
+'</div>'
+'<td class="col-md-1">'
+'<input id="quantity" type="text" name="quantity_box[]" class="form-control"/>'
+'</td>'
+'<td class="col-md-1">'
+'<input id="unit_price" type="text" name="unit_price[]" class="form-control"/>'
+'</td>'
+'<td class="col-md-1">'
+'<input id="price" type="text" name="price[]" class="form-control"/>'
+'</td>'
+'<td class="col-md-2">'
+'<button id="'+i+'" type="button" class="btn btn-danger delegated-btn">Delete</button>'
+'</td>'
+'</tr></tbody>'
);
$('button.btn.btn-danger').click(function() {
var whichtr = $(this).closest("tr");
whichtr.remove();
});
});
});
</script>
here is my output look like
update

You can store product_weight in a new tag attribute inside each option tag, like "data-weight". In order to display the corresponding weight you would just need to do this:
$("select.productname").on("change",function(){
var weight = $(this).find(":selected").data("weight"); // .attr("data-weight");
var span = "<span>"+weight+"</span>";
$("#target_div_where_to_display_weight").html(span);
});
UPDATE
In your ajax request replace:
for(var i=0;i<data.length;i++){
op+='<option value="'+data[i].id_p+'" name="id_p">'+data[i].product_name+data[i].product_weight+'</option>';
}
by
for(var i=0;i<data.length;i++){
op+='<option value="'+data[i].id_p+'" name="id_p" data-product_weight="'+data[i].product_weight+'">'+data[i].product_name+data[i].product_weight+'</option>';
}
and in the code i wrote before replace the first instruction by:
var weight = $(this).find(":selected").data("product_weight"); // or .attr("data-product_weight");
UPDATE 2
If you want to append to a div the weight of each product you choose, the should look like this:
First, change your "#target_div_where_to_display_weight" div by a "<div id='weights_wrapper'></div>", then change the first function (on change) by:
<pre>$("select.productname").on("change",function(){
var prod = $(this).find(":selected"); // .attr("data-weight");
var weight = prod.data("product_weight");
var id_p = prod.val();
var added_content = "";
var content = "<div class='weight' data-ip_p='"+id_p+"'><span>"+weight+"</span>"+added_content+"</div>";
$("#weights_wrapper").append(content);
});</pre>
In this way you can add anchor tags to manage every weight's block. For example, if you want to delete a weight after adding it, you could set added_content = ''; and then createthe following function:
<pre>$("#weights_wrapper").on("click",".close_weight",function(){
$(this).parent().remove();
});</pre>

On cloning a dropdownlist and it's cascaded dropdownlist,the cascaded dropdownlist is not loading relevant data

I have created two asp.net dropdown controls to present a country and it's states.I have one input button here on clicking which, I am supposed to clone the category and it's subcategory dropdownlists(which it does).
Here is the issue:
On changing an index in the countries(Category) dropdown, I am getting the statelist in the subcategory.
But when i clone both the dropdownlists and select a different country in the category, I still get the obsolete values for the previously selected country.
I have shared a screenshot. Here on selecting India as the selected value, I keep getting states of US as the subcategories.
Here is my code:
<body>
<form id="form1" runat="server">
<div style="float: left;">
<input type="button" id="btnClone" value="Clone Dropdown" />
</div>
<br />
<br />
<table>
<tr>
<td>
<div>Category:</div>
</td>
<td>
<div style="float: left">
<asp:DropDownList ID="ddlCountryList" runat="server" class="ddlCountryClass"></asp:DropDownList>
</div>
</td>
<td>
<div>Sub Category:</div>
</td>
<td>
<div style="float: left">
<asp:DropDownList ID="ddlStateList" runat="server" class="ddlStateClass"></asp:DropDownList>
</div>
</td>
</tr>
<tr>
<td>
<div id="target">
</div>
</td>
<td>
<div id="target2">
</div>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
// Clones the Category and the subcategory dropdown lists
$('#btnClone').click(function () {
$('select.ddlCountryClass:eq(0)').clone();
var original = $('select.ddlCountryClass:eq(0)');
var allSelects = $('select.ddlCountryClass');
clone = original.clone();
$('#target').append($('<span>').text('Category:'));
$('#target').append(clone).append('<br /><br /><br />');
$('select.ddlStateClass:eq(0)').clone();
var original = $('select.ddlStateClass:eq(0)');
var allSelects = $('select.ddlStateClass');
clone = original.clone();
$('#target2').append($('<span>').text('SubCategory:'));
$('#target2').append(clone).append('<br /><br /><br />');
});
//Fetches subcategory values based on the Category dropdown
$(function () {
$('#ddlStateList').attr('disabled', 'disabled');
$('#ddlStateList').attr('disabled', 'disabled');
$('#ddlStateList').append('<option selected="selected" value="0">Select State</option>');
$('#ddlCountryList').change(function () {
var country = $('#ddlCountryList').val()
$('#ddlStateList').removeAttr("disabled");
$.ajax({
type: "POST",
url: "Default.aspx/BindStates",
data: "{'country':'" + country + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var j = jQuery.parseJSON(msg.d);
var options;
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'
}
$('#ddlStateList').html(options)
},
error: function (data) {
alert('Something Went Wrong')
}
});
});
});
</script>
Being rookie in jquery, I have know idea how to achieve the required.
Please share your thoughts!
Thanks!

you need to change your clone() to clone(true), that way it will copy over the event handlers
A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well.
this passes:
clone = original.clone()
to this:
clone = original.clone(true)

How pass the checked checkbox value to the next page using javascript

I am retrieving value from database and showing it in html table with check boxes.i am also having button, when user check the check box and it pass the rowid and redirect next page .if user not check the check box and check the button it will not pass the rowid and it will not redirect.
my problem is when first row in html table is checked and button pressed its working but if i am checking the second row in html table and click the button it not performing any action
below is my code
<tbody id="fbody" class="fbody" style="width:1452px" >
<?php
$clientid=$_GET['clientid'];
if($clientid!=""){
$sql = mysql_query("SELECT * FROM billingdatainputandexport WHERE clientid = '$clientid'");
while($rows=mysql_fetch_array($sql))
{
if($alt == 1)
{
echo '<tr class="alt">';
$alt = 0;
}
else
{
echo '<tr>';
$alt = 1;
}
echo '<td style="width:118px" class="edit clientid '.$rows["id"].'">'.$rows["clientid"].'</td>
<td id="CPH_GridView1_clientname" style="width:164px" class="edit clientname '.$rows["id"].'">'.$rows["clientname"].'</td>
<td id="CPH_GridView1_billingyear" style="width:168px" class="edit billingyear '.$rows["id"].'">'.$rows["billingyear"].'</td>
<td id="CPH_GridView1_billingmonth " style="width:169px" class="edit billingmonth '.$rows["id"].'">'.$rows["billingmonth"].'</td>
<td style="width:167px" class=" '.$rows["id"].'">
<input name="nochk" value=" '.$rows["id"].'" type="submit" style="margin:0 0 0 49px;background-image: url(/image/export.png);background-repeat: no-repeat;cursor:pointer;color:#C0C0C0;" ></td>
<td style="width:69px"><input type="checkbox" id="chk1" name="chk1" value=" '.$rows["id"].'"/></td>
</tr>';
}
}
?>
</tbody>
<input type="image" name="yousendit" id="yousendit" src="/image/export.png" style="margin:-5px 23px -28px 822px;cursor:pointer;" >
javascript
<script>
$(document).ready(function() {
$("#yousendit").click(function() {
if(document.getElementById('chk1').checked){
var ms = document.getElementById('chk1').value;
$.ajax({
type:"post",
data:"ms="+ms,
success:function(data) {
window.location = 'billingdatainputandexport/billingdatainputandexportdetailedreport.php?ms='+ms+''
$.post("billingdatainputandexport/billingdatainputandexportdetailedreport.php", { "test": ms } );
$("#result").html(data);
}
});
}
});
});
</script>

You can change this:
id="chk1"
name="chk1"
<input type="checkbox" id="chk1" name="chk1" value=" '.$rows["id"].'"/>
to this:
class="chk"
name="chk"'.$rows["id"].'
'<input type="checkbox" id="chk1" name="chk"'.$rows["id"].'" value=" '.$rows["id"].'"/>'
and update the jQuery code:
$("#yousendit").click(function() {
var $check = $('.chk:checked');
$.ajax({ //<-------------here you havn't mentioned the url
type:"post",
data:$check.serialize(),
success:function(data){
............
}
});
});

HTML page should have only 1 element with specified ID, in your case as code is running in loop and you are assigning id
<td style="width:69px"><input type="checkbox" id="chk1" name="chk1" value=" '.$rows["id"].'"/></td>
all the checkbox will have the same ID. Now once you try to get checked status by selector
if(document.getElementById('chk1').checked){
it will return true if only first checkbox is selected and ignore all the other instances.
You should use class selector and loop through elements to get comma-separated values and make ajax call.
First change id to class in HTML
<input type="checkbox" class="chk1" name="chk1" value=" '.$rows["id"].'"/>
and change JavaScript to process selected checkbox array
$(document).ready(function () {
$("#yousendit").click(function () {
var id_list = [];
$.each($(".chk1:checked"), function (index, element) {
var tmpVal = $(element).val();
id_list.push(tmpVal);
});
if (id_list.length > 0) {
var ms = id_list.join();
$.ajax({
type: "post",
data: "ms=" + ms,
success: function (data) {
window.location = 'billingdatainputandexport/billingdatainputandexportdetailedreport.php?ms=' + ms + ''
$.post("billingdatainputandexport/billingdatainputandexportdetailedreport.php", {
"test": ms
});
$("#result").html(data);
}
});
}
});
});