CODEWITHSUNDEEP
javascriptjqueryhtml
Amit
Amit

Reputation: 35

Select and display value from each new "select option" created for table row

I could not find a solution so far for the following issue. If anyone can help me in this, I will be very happy.

I have a simple table with 1 select box and one text box. I am adding table rows with jQuery script add button. Similarly there is delete option.

My target is to display selected names in each row. But when I am adding rows and then selecting the "select option", the name changes for every row. That's not intended here.

Here is fiddle link for testing - https://jsfiddle.net/rmse9nw3/

<table id="datagrid" class="display table1">


  <th>Employee Code</th>
  <th>Employee Name</th>


<tr id="row1">
    <td > 
    <select name="empid" class="dropdn">
        <option>Please select...</option>
        <option>Jhon Doe</option>
        <option>George Antony</option>
        <option>David Blare</option>
        <option>Kene Roy</option>
    </select> 

    </td>

    <td>
        <input type='text' readonly name="name" size="20" class="name" value=""/>
    </td>
    <td>
        <input type="button" name="addRow" class="add" value='Add'/>
    </td>
    <td>
        <input type="button" name="removeRow" class="removeRow" value='Delete'/>
    </td>

And jQuery is -

$(document).ready(function () {

    $(document).on('click','#datagrid .add',function () {

           var row=$(this).closest('tr');
           var clone = row.clone();
           var tr= clone.closest('tr');
           tr.find('input[type=text]').val('');
           $(this).closest('tr').after(clone);
           var $span=$("#datagrid tr");
           $span.attr('id',function (index) {
           return 'row' + index;

        });

    });

    $(document).on('click','#datagrid .removeRow',function () {
        if ($('#datagrid .add').length > 1) {
            $(this).closest('tr').remove();
        }

    });

}); 

var dropDown = ".dropdn";
var empName = ".name";

$(document).on("change",(dropDown),function(e){

    var value = $.trim($(this).val());

    $(empName).val(value);

});

Upvotes: 2

Views: 2273

Answers (5)

Alessandro
Alessandro

Reputation: 4472

The selector .name, will select all the field in the document with class attribute equals to name, so when you set a new value to it, it will change every fields .name.

To change only the "right" name, you could modify the following line:

$(empName).val(value);

to 

$(this).closest('tr').find(empName).val(value);

in order to get only the input field name in the same tr of the select element.

See following snippets (where I modify just the above line), please:

(function($) {
	// always strict mode on
	// cannot use undefined vars on strict mode
	"use strict";

	$(document).ready(function () {
		
		$(document).on('click','#datagrid .add',function () {
	
			   var row=$(this).closest('tr');
			   var clone = row.clone();
			   var tr= clone.closest('tr');
			   tr.find('input[type=text]').val('');
			   $(this).closest('tr').after(clone);
			   var $span=$("#datagrid tr");
			   $span.attr('id',function (index) {
			   return 'row' + index;
		   
			});
			
		});
		
		$(document).on('click','#datagrid .removeRow',function () {
			if ($('#datagrid .add').length > 1) {
				$(this).closest('tr').remove();
			}
			
		});
		
	}); 

	var dropDown = ".dropdn";
	var empName = ".name";
	
    $(document).on("change",(dropDown),function(e){
		
		var value = $.trim($(this).val());
		
    //Change this line:
	//$(empName).val(value);
    //To:
    $(this).closest('tr').find(empName).val(value);
		
	}); 
	
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="datagrid" class="display table1">
<thead>
  <tr>
      <th>Employee Code</th>
      <th>Employee Name</th>
  </tr>
</thead>

<tbody id="dataTable">

    <tr id="row1">
        <td > 
        <select name="empid" class="dropdn">
            <option>Please select...</option>
            <option>Jhon Doe</option>
            <option>George Antony</option>
            <option>David Blare</option>
            <option>Kene Roy</option>
        </select> 
       
        </td>

        <td>
            <input type='text' readonly name="name" size="20" class="name" value=""/>
        </td>
        <td>
            <input type="button" name="addRow" class="add" value='Add'/>
        </td>
        <td>
            <input type="button" name="removeRow" class="removeRow" value='Delete'/>
        </td>
        
  </tr>
                
</tbody>

</table>

I hope it was clear, bye.

Updated, answer to new question, how to add options dinamically:

$.each([
  { id : 1, name : "Jhon Doe"},
  { id : 2, name : "George Antony"},
  { id : 3, name : "David Blare"},
  { id : 4, name : "Kene Roy"}
], function( index, value ) {
    $('#empid').append($('<option>',
    {
        value: value["id"],
        text : value["name"]
    }));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="empid" class="dropdn">
    <option>Please select...</option>
</select>

Upvotes: 1

Kamal Lama
Kamal Lama

Reputation: 700

You can use :last pseudo-selector to select the last cloned element having class name 'name',

var dropDown = ".dropdn";
var empName = ".name:last";//select last element having classname named 'name'

$(document).on("change",(dropDown),function(e){

    var value = $.trim($(this).val());
    $(empName).val(value);

});

Upvotes: 2

Zahid Saeed
Zahid Saeed

Reputation: 1171

There you go: https://jsfiddle.net/rmse9nw3/3/

Actually, when an option was selected from the dropdown, you were selecting all the <input> and then changing its value. What I did is, when an option was selected then move to the closest tr then find the <input> inside that <tr> and change its value and voila, its done :)

Upvotes: 0

Erdogan Oksuz
Erdogan Oksuz

Reputation: 621

Try this;

(function($) {
	// always strict mode on
	// cannot use undefined vars on strict mode
	"use strict";

	$(document).ready(function () {
		
		$(document).on('click','#datagrid .add',function () {
	
			   var row=$(this).closest('tr');
			   var clone = row.clone();
			   var tr= clone.closest('tr');
			   tr.find('input[type=text]').val('');
			   $(this).closest('tr').after(clone);
			   var $span=$("#datagrid tr");
			   $span.attr('id',function (index) {
			   return 'row' + index;
		   
			});
			
		});
		
		$(document).on('click','#datagrid .removeRow',function () {
			if ($('#datagrid .add').length > 1) {
				$(this).closest('tr').remove();
			}
			
		});
		
	}); 

	var dropDown = ".dropdn";
	var empName = ".name";
	
    $(document).on("change",(dropDown),function(e){
		
		var value = $.trim($(this).val());
		
		$(this).parent().next().find(".name").val(value);
		
	}); 
	
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="datagrid" class="display table1">
<thead>
  <tr>
      <th>Employee Code</th>
      <th>Employee Name</th>
  </tr>
</thead>

<tbody id="dataTable">

    <tr id="row1">
        <td > 
        <select name="empid" class="dropdn">
            <option>Please select...</option>
            <option>Jhon Doe</option>
            <option>George Antony</option>
            <option>David Blare</option>
            <option>Kene Roy</option>
        </select> 
       
        </td>

        <td>
            <input type='text' readonly name="name" size="20" class="name" value=""/>
        </td>
        <td>
            <input type="button" name="addRow" class="add" value='Add'/>
        </td>
        <td>
            <input type="button" name="removeRow" class="removeRow" value='Delete'/>
        </td>
        
  </tr>
                
</tbody>

</table>

Upvotes: 1

tech2017
tech2017

Reputation: 1806

having class .name in not working properly. Your selection is applied to all elements under that class. You need to target that input only. check this:

$(document).on("change",(dropDown),function(e){

  var value = $.trim($(this).val());
  console.log($(this).parent().parent());
  $(this).parent().parent().find('.name').val(value);

});

Upvotes: 0

Related Questions