Hi Guys!
I am using Javascript & PHP to populate a select list. The Ajax is working perfectly as I have tested it. However, as you can see from the below code, I have a button which adds more rows (which includes 2 select lists and file input) to a table.
When I click Add Row, the row is added perfectly and both select boxes along with the file field are shown as expected. The problem occurs when I select a value from the “room_name” box - there are no values returned inside the “album_title” select box. It doesn’t seem to be triggering the onChange event.
Here’s the javascript:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length - 2;
var row = table.insertRow(rowCount);
/* Image name (cell1) */
var cell1 = row.insertCell(0);
cell1.innerHTML = "Image #" + rowCount;
/* Image input (cell2) */
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.id = 'image_name[]';
element2.name = 'image_name[]';
element2.type = 'file';
cell2.appendChild(element2);
/* Room name (cell3) */
var cell3 = row.insertCell(2);
var selector = document.createElement('select');
selector.id = 'room_name['+ rowCount +']';
selector.name = 'room_name['+ rowCount +']';
selector.onchange = "getalbums('"+ rowCount +"',this.value)";
// options
var option = document.createElement('option');
option.value = '';
option.appendChild(document.createTextNode('Select a room'));
selector.appendChild(option);
option = document.createElement('option');
option.value = '1';
option.appendChild(document.createTextNode('Main Room'));
selector.appendChild(option);
option = document.createElement('option');
option.value = '2';
option.appendChild(document.createTextNode('Karma'));
selector.appendChild(option);
option = document.createElement('option');
option.value = '3';
option.appendChild(document.createTextNode('Krug'));
selector.appendChild(option);
option = document.createElement('option');
option.value = '4';
option.appendChild(document.createTextNode('Reception'));
selector.appendChild(option);
option = document.createElement('option');
option.value = '5';
option.appendChild(document.createTextNode('Courtyard'));
selector.appendChild(option);
cell3.appendChild(selector);
/* Album title (cell4) */
var cell4 = row.insertCell(3);
var newdiv = document.createElement('div');
newdiv.id = 'album_div_'+ rowCount;
var selector = document.createElement('select');
selector.id = 'album_title['+ rowCount +']';
selector.name = 'album_title['+ rowCount +']';
var option = document.createElement('option');
option.value = '';
option.appendChild(document.createTextNode('Select an album'));
selector.appendChild(option);
newdiv.appendChild(selector);
cell4.appendChild(newdiv);
}
