Click here to Skip to main content
15,894,825 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Ajax code:

JavaScript
$(document).ready(function () {
 	var counter = 0;
	$("#addButton").click(function () {
            if (counter > 19) {
                alert("Only 20 Address allowed");
                return false;
            }
			
			 
        var elems = '<div class="col-lg-5"  id="Address' + counter + '">'+
              '<textarea class="form-control" name="alt_address[]" rows="3" placeholder="Address' + (counter+1) + '" /><div class="col-lg-6 form-group col-lg-offset-6"> </div>' +
			  '<div class="col-lg-3 form-group" id="city' + counter + '">'+
			  '<select name="city_name[]" id="city_name' + counter + '" class="form-control"></select>' +
			  '</div><div class="col-lg-3 form-group"><select name="locality_name[]" id="locality_name' + counter + '" class="form-control"><option value="" selected="selected" >Select Locality</option></select></div></div>' + 
              '<div class="col-lg-1 form-group">'+
              '<button type="button" class="removebtn" id="removeButton' + counter + '">' +
			  '<span class="glyphicon glyphicon-minus"></span></button>' +
			  '</div><div class="col-lg-6 form-group col-lg-offset-6"> </div>' ;
			
        
		$('#addressDiv').append(elems);
                  
            counter++;
			
			
			 $.ajax({

            type:"Post",

            url:"city_load.php",
 
			cache:"false",

            success:function(html){
                alert("test");
                $("#city_name" + counter).html(html);

            }

            });
			 			
			 return false;
			 });
			 
			 $("#city_name" + counter).change(function(){

        

        $city_id = $(this).val();

        

        $.ajax({

            type:"Post",

            url:"ajax-dd3ck.php",

            data:"city_id="+$city_id,

            cache:"false",

            success:function(html){

                $("#locality_name" + counter).html(html);

            }

            });

        });

    
					
					$(document).on('click','.removebtn',function () {
					
					if(counter==0){
          alert("No more textbox to remove");
          return false;
       }   

    counter--;

        $("#Address" + counter).remove();
		$("#removeButton" + counter).remove();
		

      
	  
		
		
    });

    
});
  </script>      

PHP
<?php
include("db.php");
        $sql="select * from city";

                    $res=mysqli_query($con,$sql);
                    while($row=mysqli_fetch_array($res))
                    {

                   echo "<option value='$row[city_id]'>$row[city_name]</option>";

                     }

?>
Posted
Comments
Gyaneswar kumar 2-Nov-15 6:58am    
Above should work fine.what is the issue?
Basudev Semwal 2-Nov-15 22:17pm    
In my above code, the dropdown for city in the line below not getting populated with database values but tried to keep alert box which works fine:
success:function(html){
alert("test");
$("#city_name" + counter).html(html);

http://snag.gy/6BqXN.jpg

}
Basudev Semwal 3-Nov-15 5:31am    
I have debug my jquery code and getting below error in my console tab:
if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){"use strict";var b=a.fn.jquery.split(" ")[0].split(".");if(b[0]<2&&b[1]<9||1==b[0]&&9==b[1]&&b[2]<1)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")}(jQuery)

I am using 1.11.3 and bootstrap 3.3.4

<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900