asked on

add more button stop working when i used dynamic dropdown from database

Hi,
for client drop down i am using chosen(for search client name and multiple selection). my problem is when i use client drop down in java script for add more row, add more button stop working and when i comment the code add more button is working. code given below.

<?php //echo $fet_client["clients"] ?>

Open in new window

html_code += '<td><select name="client[]" id="client'+count+'" class="chosen form-control input-sm"><option value="">Select Client</option><?php $client = mysql_query("SELECT * FROM clients ");while($fet_client=mysql_fetch_array($client)){?><option value="<?php echo $fet_client["cl_id"];?>"><?php //echo $fet_client["clients"] ?></option><?php } ?></select></td>';

Open in new window

Html code is here

<tr>
	<td><span id="sr_no">1</span></td>
	<td>
	<select name="client[]" id="client" class="chosen  form-control input-sm">
		<option value="">Select Client</option>
		<?php $client = mysql_query("SELECT * FROM clients ");
			while($fet_client=mysql_fetch_array($client)){
		?>
		<option value="<?php echo $fet_client['cl_id'];?>"><?php echo $fet_client['clients'];?></option>
		<?php } ?>
	</select>
	</td>				  

	<td><input type="text" name="invoice_no[]" id="invoice_no" class="form-control input-sm" value="" required /></td>			  
	<td><input type="text" name="job_no[]" id="job_no" class="form-control input-sm" value="" /></td>

	<td><input type="text" name="receiving_date[]" id="datepicker" class="form-control input-sm" value="" required /></td>

	<td><input type="text" name="on_ac[]" id="on_ac" class="form-control input-sm" value="" /></td>
	<td><input type="text" name="received_amount[]" id="received_amount" class="form-control input-sm number_only" value="" /></td>
	<td><input type="text" name="tds[]" id="tds" class="form-control input-sm number_only" value="" /></td>
	<td><input type="text" name="added_by[]" id="added_by" class="form-control input-sm" value="" /></td>
	<td><input type="text" name="remark[]" id="remark" class="form-control input-sm" value="" /></td>		  			  
	<td></td>				 
	</tr>

Open in new window

Javascript code for add more row

var count = 1;	
	$('#datepicker').datepicker();
	$(document).on('click', '#add_row', function(){		
	  count++;  
	  $('#total_item').val(count);
	  var html_code = '';
	  html_code += '<tr id="row_id_'+count+'">';
	  html_code += '<td><span id="sr_no">'+count+'</span></td>';
	  
	  html_code += '<td><select name="client[]" id="client'+count+'" class="chosen form-control input-sm"><option value="">Select Client</option><?php $client = mysql_query("SELECT * FROM clients ");while($fet_client=mysql_fetch_array($client)){?><option value="<?php echo $fet_client["cl_id"];?>"><?php echo $fet_client["clients"] ?></option><?php } ?></select></td>';	  
	  
	  html_code += '<td><input required type="text" name="invoice_no[]" id="invoice_no'+count+'" class="form-control input-sm" /></td>';
	  
	  html_code += '<td><input type="text" name="job_no[]" id="job_no'+count+'" class="form-control input-sm" /></td>';

	  html_code += '<td><input required type="text" name="receiving_date[]" id="datepicker'+count+'" class="form-control input-sm" /></td>';
	   
	  html_code += '<td><input type="text" name="on_ac[]" id="on_ac'+count+'" class="form-control input-sm" /></td>';
	  
	  html_code += '<td><input type="text" name="received_amount[]" id="received_amount'+count+'" class="form-control input-sm number_only" /></td>';
	  
	  html_code += '<td><input type="text" name="tds[]" id="tds'+count+'" class="form-control input-sm number_only" /></td>';
	  
	  html_code += '<td><input type="text" name="added_by[]" id="added_by'+count+'" class="form-control input-sm" /></td>';
	  
	  html_code += '<td><input type="text" name="remark[]" id="remark'+count+'" class="form-control input-sm" /></td>';
	  
	  html_code += '<td><button type="button" name="remove_row" id="'+count+'" class="btn btn-danger btn-xs remove_row">X</button></td>';
	  html_code += '</tr>';	  
	  $('#invoice-item-table').append(html_code);
	  $('#datepicker'+ count).datepicker();
	  $('#client_chosen'+ count).chosen();
	});

Open in new window

please find the attachment.

ASKER CERTIFIED SOLUTION

gr8gonzo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

I reviewed your code :

<table id="invoice-item-table">
    <tbody>
        <tr>
            <td><span id="sr_no">1</span></td>
            <td>
                <select name="client[]" class="client_chosen form-control input-sm">
                    <option value="">Select Client</option>
                    <?php
                    $client = mysql_query("SELECT * FROM clients");
                    while($fet_client=mysql_fetch_array($client))
                    {
                        $cl_id = $fet_client["cl_id"];
                        $cli = $fet_client["clients"];
                        echo '<option value="' . $cl_id . '">' . $cli . '</option>';
                    }
                    ?>
                </select>
            </td>
            <td><input type="text" name="invoice_no[]" id="invoice_no" class="form-control input-sm" value="" required /></td>
            <td><input type="text" name="job_no[]" id="job_no" class="form-control input-sm" value="" /></td>

            <td><input type="text" name="receiving_date[]" class="datepicker form-control input-sm" value="" required /></td>

            <td><input type="text" name="on_ac[]" id="on_ac" class="form-control input-sm" value="" /></td>
            <td><input type="text" name="received_amount[]" id="received_amount" class="form-control input-sm number_only" value="" /></td>
            <td><input type="text" name="tds[]" id="tds" class="form-control input-sm number_only" value="" /></td>
            <td><input type="text" name="added_by[]" id="added_by" class="form-control input-sm" value="" /></td>
            <td><input type="text" name="remark[]" id="remark" class="form-control input-sm" value="" /></td>
            <td></td>
        </tr>
    </tbody>
</table>
<script>
    $('#datepicker').datepicker();
    $(document).on('click', '#add_row', function(){

        // CLONE THE FIRST ROW
        // https://api.jquery.com/clone/
        var firstRowClone = $("#invoice-item-table tbody tr:first").clone();
        // APPEND FIRST ROW TO TABLE
        $('#invoice-item-table tbody').append(firstRowClone);

        // CREATE DATEPICKER IN THE CLONE
        $('.datepicker', firstRowClone).datepicker();
        // BEAUTIFY THE DROPDOWN USING THE CHOOSEN PLUGIN
        $('.client_chosen', firstRowClone).chosen();

        // COUNT NUMBER OF ROW
        var count = $("#invoice-item-table tr").length();
        // UPDATE THE TOTAL OF ITEM
        $('#total_item').val(count);

    });
</script>

Open in new window

leakim971

Also I believe :
$cli = $fet_client["clients"];
should be something like this instead :
$cli = $fet_client["cl_name"];

I don't have the clients table schema but I'm assuming this as your client id is : cl_id

Amita Singh

ASKER

Thank You.