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

chaitu chaitu
chaitu chaitu used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Multitechnician
Top Expert 2014
Commented:
$(document).on("change", "select[id=allemployees]", function() {
     if($(this).attr("selectedIndex") == 1) { // if second item (Country) in the dropdown in selected
          var theRow = $(this).closest("tr"); // get row of the dropdown
          var employeeValue = theRow.find("[id=employeeValue]");
          employeeValue.val("country");
          var secondTextbox = theRow.find(":text:eq(1)");
          secondTextbox.val("state");
          var thirdTextbox = theRow.find(":text:eq(2)");
          thirdTextbox.val("city");
     }
});

Open in new window

Author

Commented:
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..
leakim971Multitechnician
Top Expert 2014

Commented:
So post a complete table to see what you really have

Author

Commented:
please see my original post .when select drop down value it will display dynamic rows.
leakim971Multitechnician
Top Expert 2014

Commented:
I see a table and two rows, I can't imagine your dynamic row, post them

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial