Copy dropdown values on dynamic textbox

Question

I've got dynamic textboxes which are added upon button click.

However, I wanted to copy the dropdown values on each dynamic copied dynamic textbox for some other purposes.

But, it only copies the value of the dropdown on the first textbox and is not copying on all respective textboxes. Please help.

My code:

 function addRow() { var table = document.getElementById("bod"); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var but = document.getElementById("submit_form"); row.insertCell(0).innerHTML = test_type.value; row.insertCell(1).innerHTML = '<input type="text" name="question[]" id="question" size="20"/>'; row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>'; row.insertCell(3).innerHTML = '<input type="text" name="test_type_val[]" id="test_type_val"/>'; } function copyValue() { var dropboxvalue = document.getElementById('test_type').value; document.getElementById('test_type_val').value = dropboxvalue; } function deleteRow(obj) { var index = obj.parentNode.parentNode.rowIndex; var table = document.getElementById("bod"); table.deleteRow(index); }

 <select id="test_type" name="test_type" /> <option value=""></option> <option value="EASY"> EASY </option> <option value="MEDIUM"> MEDIUM </option> <option value="DIFFICULT"> DIFFICULT </option> </select> <input type="button" id="add" name="add" value="Add" onclick="Javascript:addRow(); copyValue()"> </div> <br> <table id="bod"> <tr> <th>TEST TYPE</th> <th>QUESTION</th> <th>DELETE BUTTON</th> <th>COPIED VALUE FROM DROPDOWN</th> </tr> </table>

Answer 1

You need change using id to class test_type_val

row.insertCell(3).innerHTML = '<input type="text" name="test_type_val[]" class="test_type_val"/>';

Create index =0 for get correct class row.

In copy function change to

document.getElementsByClassName('test_type_val')[index++].value = dropboxvalue;

 var index = 0; function addRow() { var table = document.getElementById("bod"); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var but = document.getElementById("submit_form"); row.insertCell(0).innerHTML = test_type.value; row.insertCell(1).innerHTML = '<input type="text" name="question[]" id="question" size="20"/>'; row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>'; row.insertCell(3).innerHTML = '<input type="text" name="test_type_val[]" class="test_type_val"/>'; } function copyValue() { var dropboxvalue = document.getElementById('test_type').value; document.getElementsByClassName('test_type_val')[index++].value = dropboxvalue; } function deleteRow(obj) { var index = obj.parentNode.parentNode.rowIndex; var table = document.getElementById("bod"); table.deleteRow(index); }

 <select id="test_type" name="test_type" /> <option value=""></option> <option value="EASY"> EASY </option> <option value="MEDIUM"> MEDIUM </option> <option value="DIFFICULT"> DIFFICULT </option> </select> <input type="button" id="add" name="add" value="Add" onclick="Javascript:addRow(); copyValue()"> </div> <br> <table id="bod"> <tr> <th>TEST TYPE</th> <th>QUESTION</th> <th>DELETE BUTTON</th> <th>COPIED VALUE FROM DROPDOWN</th> </tr> </table>

Answer 2

 function addRow() { var table = document.getElementById("bod"); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var but = document.getElementById("submit_form"); row.insertCell(0).innerHTML = test_type.value; row.insertCell(1).innerHTML = '<input type="text" name="question[]" id="question'+rowCount+'" size="20"/>'; row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>'; row.insertCell(3).innerHTML = '<input type="text" name="test_type_val[]" id="test_type_val'+rowCount+'"/>'; var dropboxvalue = document.getElementById('test_type').value; document.getElementById('test_type_val'+rowCount).value = dropboxvalue; } function deleteRow(obj) { var index = obj.parentNode.parentNode.rowIndex; var table = document.getElementById("bod"); table.deleteRow(index); }

 <select id="test_type" name="test_type" /> <option value=""></option> <option value="EASY"> EASY </option> <option value="MEDIUM"> MEDIUM </option> <option value="DIFFICULT"> DIFFICULT </option> </select> <input type="button" id="add" name="add" value="Add" onclick="Javascript:addRow();"> </div> <br> <table id="bod"> <tr> <th>TEST TYPE</th> <th>QUESTION</th> <th>DELETE BUTTON</th> <th>COPIED VALUE FROM DROPDOWN</th> </tr> </table>

Answer 3

Another possible solution is to make each input have a unique id, such as rowId :

<input type="text" name="test_type_val_${rowId}" id="test_type_val_${rowId}"/>

You can then add a click listener to your button which increments that count every time it's clicked. Don't forget to decrement it every time you remove a row:

let button = document.getElementById("add");
button.addEventListener("click", (e) => {
  addRow();
  copyValue();
  rowId++;
});

 let rowId = 0; let button = document.getElementById("add"); button.addEventListener("click", (e) => { addRow(); copyValue(); rowId++; }); function addRow() { var table = document.getElementById("bod"); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var but = document.getElementById("submit_form"); row.insertCell(0).innerHTML = test_type.value; row.insertCell(1).innerHTML = '<input type="text" name="question[]" id="question" size="20"/>'; row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>'; row.insertCell( 3 ).innerHTML = `<input type="text" name="test_type_val[]" id="test_type_val_${rowId}"/>`; } function copyValue() { var dropboxvalue = document.getElementById("test_type").value; document.getElementById(`test_type_val_${rowId}`).value = dropboxvalue; } function deleteRow(obj) { var index = obj.parentNode.parentNode.rowIndex; var table = document.getElementById("bod"); table.deleteRow(index); }

 <select id="test_type" name="test_type"> <option value=""></option> <option value="EASY">EASY</option> <option value="MEDIUM">MEDIUM</option> <option value="DIFFICULT">DIFFICULT</option> </select> <input type="button" id="add" name="add" value="Add" /> <br /> <table id="bod"> <tr> <th>TEST TYPE</th> <th>QUESTION</th> <th>DELETE BUTTON</th> <th>COPIED VALUE FROM DROPDOWN</th> </tr> </table>