I have a page that collects, which classes students are going to take and displays both the Course Title and the Catalog Number in a table. If the student selects a Course Title, it will automatically fill in what the Catalog Number is in the next cell, and vice-versa.
The only problem I'm having is, when you fill in one Course Title, it fills every single Catalog Number cell there is (and vice-versa).
<body>
<table>
<tbody>
<tr>
<td>
<input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()">
<datalist id="courses" name="courseDatalist">
<!--Filled in script-->
</datalist>
</td>
<td>
<input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()">
<datalist id="catalogs" name="catalogDatalist">
<!--Filled in script-->
</datalist>
</td>
</tr>
<tr>
<td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
<td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
</tr>
<tr>
<td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
<td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
</tr>
<tr>
<td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
<td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="testTemplateJS.js"></script>
<script>
//Course Names
var courseNames = ["Class A", "Class B", "Class C", "Class D", "Class E"];
var list = $('#courses')[0];
courseNames.forEach(function(item) {
var option = document.createElement('option');
option.value = item;
list.appendChild(option);
});
</script>
<script>
//Catalog Numbers
var catNumbers = ["Catalog 1", "Catalog 2", "Catalog 3", "Catalog 4", "Catalog 5"];
var list = $('#catalogs')[0];
catNumbers.forEach(function(item) {
var option = document.createElement('option');
option.value = item;
list.appendChild(option);
});
</script>
<script>
function UpdateCatNumbers() {
//on change of courseInput, run...
$("input[name=courseInput]").change(function() {
//declare a as the array index # of courseNames
var a = courseNames.indexOf($(this).val());
//change catalog input to display the same array index of catNumbers
$("input[name=catalogInput]").val(catNumbers[a]);
});
}
</script>
<script>
function UpdateCourseNames() {
$("input[name=catalogInput]").change(function() {
var b = catNumbers.indexOf($(this).val());
$("input[name=courseInput]").val(courseNames[b]);
});
}
</script>
</body>How do I get it so the UpdateCatNumbers() and UpdateCourseNames() functions only populate the cell directly next to them?
So you need to apply the value to one other input only. In this case you can use jQuery eq(index) - with it you can select single element from a jQuery collection based on an index:
$("input[name=courseInput]").each(function(index) {
$(this).change(function() {
var a = courseNames.indexOf($(this).val());
$("input[name=catalogInput]").eq(index).val(catNumbers[a]);
)};
});