CODEWITHSUNDEEP
javascripthtmljquery
mac.imp022
mac.imp022

Reputation: 23

Copy dropdown values on dynamic textbox

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>

Upvotes: 0

Views: 107

Answers (3)

Lu&#237;s Ramalho
Lu&#237;s Ramalho

Reputation: 10198

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>

Upvotes: 0

noonelikeme
noonelikeme

Reputation: 106

        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>

Upvotes: 0

Hien Nguyen
Hien Nguyen

Reputation: 18975

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>

Upvotes: 0

Related Questions