user3438096 user3438096 - 4 months ago 12
HTML Question

How to apply javascript function into multiple same name input fields

Please help i want to apply the javascript in the input list.
This is what i have right now. When i click the item in select list, the input textbox will be autofill and it is working right now but when i add input textbox using jquery, the javascript i used in select list is not applied on the new input. It apply only on the first select, the original list.
What should i do to apply it on all select list?
Click this link for the sample

$(document).ready(function() {
$("#category").change(function () {
var unit = $(this).find(':selected').data('number');
$('#numbervalue').val(unit);
});

var counter = 2;
$("#addNumber").click(function () {
var newTextBoxDiv = $(document.createElement('tr')).attr("id", 'TextBoxDivMat' + counter);

newTextBoxDiv.after().html('<td><select id="category"><option data-number="1" value="One">One</option><option data-number="2" value="Two">Two</option><option data-number="3" value="Three">Three</option></select></td><td><input id="numbervalue" type="text"></td>');
newTextBoxDiv.appendTo("#TextBoxesGroupMat");
counter++;
});
$("#removeButtonMat").click(function () {
counter--;
$("#TextBoxDivMat" + counter).remove();
});
});


<table id="TextBoxesGroupMat">
<thead>
<tr>
<th>Word</th>
<th>Number</th>
</tr>
</thead>
<tbody id="TextBoxDivMat1">
<tr>
<td>
<select id="category">
<option data-number="1" value="One">One</option>
<option data-number="2" value="Two">Two</option>
<option data-number="3" value="Three">Three</option>
</select>
</td>
<td><input id="numbervalue" type="text"></td>
</tr>
</tbody>
</table>
<button id="addNumber">+ add number</button>
<button id="removeButtonMat">remove</button>

Answer

Ok, the problem is that you're changing an ID, which then only changes the first ID input - change to classes and all is good - see below snippet:

Updated Fiddle

Also, it's a bad idea to have on change on a select if there is no blank option - a user must first select two to then go back and select one

$(document).ready(function() {

$(document).on("change", ".category", function () { /* changed to class */
    var unit = $(this).find(':selected').data('number');
    $(this).parent().next().find('.numbervalue').val(unit); /* ugly but works, could be better */
});

var counter = 2;
$("#addNumber").click(function () {
var newTextBoxDiv = $(document.createElement('tr'))
	     .attr("id", 'TextBoxDivMat' + counter);
 
/* changed to add select and input with classes not IDs */	
newTextBoxDiv.after().html('<td><select class="category"><option data-number="1" value="One">One</option><option data-number="2" value="Two">Two</option><option data-number="3" value="Three">Three</option></select></td><td><input class="numbervalue" type="text"></td>');
newTextBoxDiv.appendTo("#TextBoxesGroupMat");
counter++;
     });
$("#removeButtonMat").click(function () {
counter--;
 $("#TextBoxDivMat" + counter).remove();
 
     });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TextBoxesGroupMat">
                                    <thead>
                                    <tr>
                                        <th>Word</th>
                                        <th>Number</th>                                        
                                    </tr> 
                                    </thead>
                                    <tbody id="TextBoxDivMat1"> 
									<tr>
                                    <td><select class="category">                                       
									   <option data-number="1" value="One">One</option>
                                       <option data-number="2" value="Two">Two</option>
                                       <option data-number="3" value="Three">Three</option>
									   </select></td> 
                                     <td><input class="numbervalue" type="text"></td> 
                                        </tr>
                                    </tbody>        
</table>

<button id="addNumber">+ add number</button>
<button id="removeButtonMat">remove</button>