My horizontal form is dynamically generated using JavaScript, with each input field having a jQuery autocomplete that retrieves data from a database using the $.get method.
I'm looking to automatically populate the second input field with the corresponding value when a selection is made in the first input field. The rows and autocomplete functionality are cloned as the rows are created.
In the scenario depicted in the image below, upon selecting the category set, I want the value field to be filled automatically:
https://i.stack.imgur.com/JQwDA.png
I have successfully implemented the autocomplete feature but am struggling to auto-fill the second input field.
function loadcategorysetvalue(table, tabdata){
var catsetlov = [];
var catvalov = [];
$.get("URL", function(response){
catsetlov = response;
}).done(function(){
var row = null;
var newId = 1;
for(var i = 0; i < catsetlov.length; i++){
newId++;
row = insertrow(table(table, tabdata, "categories"));
cell = row.cells[0];
cell.children[0].value = catsetlov[i];
setcatvalue(catsetlov[i]);
addbtn(row);
var id = cell.children[0].getAttribute("id");
var newId = id + "_" + newId;
cell.children[0].setAttribute("id", newId);
$('#' + newId).autocomplete({
source: catsetlov,
minLength: 0
}).focus(function(){
$.get("url", function(response){
catsetlov = response;
});
$(this).autocomplete("search", "");
});
}
});
}