Link to home
Start Free TrialLog in
Avatar of chaitu chaitu
chaitu chaituFlag for India

asked on

how to change ids for dynamic rows when user select drop down

how to change id's of the  text boxes when use select drop down value to 'Country';

when user select 'Country' then 3 dynamic rows will be displayed.

how to. change the id's of the  text boxes[Employee Value].first text box  id should change to 'country,2nd text box id be 'state' and 3rd textbox city.

if user select other option then text box id should be as it is..

       
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>



var sample=
[
    {
        "company": 123,
       
        "organizationMap": {
            "Country": [
                "country",
                "state",
                "City"
            ]
        }
    }
];

$(document).ready(function(){



				$(document).on('click',"#addrow",function(event){
			
			
                        var $tr = $(this).closest('tr');
                        var allTrs = $tr.closest('table').find('tr');

                        var lastTr = allTrs[allTrs.length-1];
                        var $clone = $(lastTr).clone();

                        $clone.find('td').each(function(){

                            var el = $(this).find(':first-child');
                            var name = el.attr('name') || null;
							  var id = el.attr('id') || null;
                          if(name !=null && name.indexOf("[") > -1)
                                   {
										var number= parseInt(name.substring(name.indexOf("[")+1, name.indexOf("]")));
										number++;
										var tillfirstsquare= name.substring(0,name.indexOf("[")+1);
										var tillfirsttolastsquare =name.substring(name.indexOf("]"),name.length);
										var result=tillfirstsquare+number+tillfirsttolastsquare;
										el.attr('name', result);
										 el.attr('id', id+parseInt(number));
                                    }

                        });

                        $clone.find('input:text').val('');
                        $tr.closest('table').append($clone);

					
                });

			

				$(document).on('change',"#allemployees",function(event){
			
								
				$('#addattributedivtable > tbody  > tr:gt(1)').remove();
				
				if( $('#addattributedivtable > tbody  > tr:last').find('td:last-child').find("#addrow").length ==0)
				{
				   $('#addattributedivtable > tbody  > tr:last').find('td:last-child').append("<input type='button' id='addrow' name='addrow' value='addrow' />");
				}
					
    						   
							if($.isArray(sample[0].organizationMap[$(this).find('option:selected').text()]))
							{
										
									for(var i=0;i<sample[0].organizationMap[$(this).find('option:selected').text()].length;i++)
									{
									
									   $( "#addrow" ).trigger( "click" );
									   
									  $("input[name='employeeChange["+i+"].employeeValue']").val(sample[0].organizationMap[$(this).find('option:selected').text()][i]);
									  }
									 
							}
							else{
										$("input[name='employeeChange[0].employeeValue']").val(sample[0][$(this).find('option:selected').text()]);
											$( ".datepick" ).datepicker();	 
							  }

                       });

			
	 });
</script>

<table border="1" class="table table-striped table-hover  table-bordered" id="addattributedivtable">

<tbody><tr>
<td name="deleterow" id="deleterow" class="deleterow"></td>

<td><label class="col-md-3 control-label" >Employee Names</label>
</td>


<td>
<label class="col-md-3 control-label" >Employee Value</label>
</td>

<td class="addrow">&nbsp;</td>

</tr>

<tr>
<td name="deleterow" class="deleterow"></td>

<td>
<select id="allemployees" name="employeeChange[0].name" class="form-control">
<option value="0" selected="">Please Select Employee</option>
<option value="6">Country</option>
<option value="6">company</option>
</select>
</td>


			
<td><input id="employeeValue" name="employeeChange[0].employeeValue" size="45" type="text" >
			</td>

<td>
<input type="button" id="addrow" name="addrow" value="addrow">
</td>

</tr>
                                                                                                                </tbody></table>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of chaitu chaitu

ASKER

its not working.all text boxes  are not in the same row.one text in first row,2nd text box in 2nd row and so on..
So post a complete table to see what you really have
please see my original post .when select drop down value it will display dynamic rows.
I see a table and two rows, I can't imagine your dynamic row, post them