Search code examples
jqueryajaxcakephpclonejquery-clone

Clone Select Box Option value in same page


I have an Address Column in form created in cakephp, where we have Permanent Address and Present Address, in which, address ,country, state, city fields are to be filled. like in below imageAddress Form

As seen in picture there is a Select Box (Same as Above) which is for cloning the all Address fields (Address, Country, State, City) from Present address to Permanent address for those who have Same Address. We are only using India's States So we have set country by default India and all india states in state select box, so we have to only call cities option through ajax after state selection by user, as code //Function for select city

 function get_city(UserProfileState)  
    {  
        var state_id=document.getElementById('UserProfileState').value;     
        $.ajax({  
            type: "GET",  
            url: "get_city",  
            data: "UserProfileState="+state_id,  
            success: function(msg){  
                $("#city").html(msg); 
            }  
        });             
    }

//Function for Cloning All address fields

 $("#chkform").click(function()
        { 
            if($(this).is(":checked")) 
            {
                $("#UserProfilePeraddress").val($("#UserProfilePaddress").val());
                $("#UserProfilePcountry").val($("#UserProfileCountry").val());
                $("#UserProfilePstate").val($("#UserProfileState").val());
                $("#UserProfilePcity").val($("#UserProfileCity").val());
                $("#UserProfilePpincode").val($("#UserProfilePcode").val());
                $("#UserProfilePtelephone").val($("#UserProfileTelephone").val());

            }}

As i got value updated from ajax call from page get_city.ctp, but when i clone fields it still does not get value from city field, clone pcity show empty option in select box. enter image description here


Solution

  • I got it, Updated Clone Function as

    if($(this).is(":checked")) 
            {
                $("#UserProfilePeraddress").val($("#UserProfilePaddress").val());
                $("#UserProfilePcountry").val($("#UserProfileCountry").val());
                $("#UserProfilePstate").val($("#UserProfileState").val());               
                var state_id=document.getElementById('UserProfileState').value;
                var city_id=document.getElementById('UserProfileCity').value;   
                $.ajax({  
                    type: "GET",  
                    url: "get_city",  
                    data: { UserProfilePState : state_id,
                        UserProfilePcity : city_id  },
                    success: function(msg){  
                        $("#pcity").html(msg); 
                    }  
                });             
                $("#UserProfilePpincode").val($("#UserProfilePcode").val());
                $("#UserProfilePtelephone").val($("#UserProfileTelephone").val());
    
            }
    

    I have to pass the state and city value to another ajax call. and now it works perfect.