Enable/Disable functionality to input filed in a table using JS

Question

I am having a table. In every row, I will be having 5 input fields. There is a button addrow. when you click on it,it will create a new row.

 addrow function(){
 var table = document.getElementById("rtable");
  var row = table.insertRow();
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3=row.insertCell(2);
  var cell4=row.insertCell(3);
  var cell5=row.insertCell(4);
  var cell6=row.insertCell(5);
  cell1.innerHTML="<td><input type='text' class='form-control' name='r1'></td>"
  cell2.innerHTML="<td><input type='date' class='form-control' name='r2'></td>"
 cell3.innerHTML="<td><input type='number' class='form-control' name='r3' ></td>"
 cell4.innerHTML="<td><select class='form-control' name='r4'>"+
 "<option value='yes' >Yes</option><option value='no' selected>No</option></select> </td>"
 cell5.innerHTML="<td><input type='date' class='form-control' name='r5'></td>"
  cell6.innerHTML="<td><button type='button' class='buttongreentab' onclick='remcosdeleterow(this)'>Delete</button> </td>"
}

now i want to add a functionality to 'r4'. i.e 4th cell. if my selected option is yes, then r5 should be enabled. if my selected option is No, then r5 should be disabled. but the problem is every row will be having a cell with name r5. I tried many options. Nothing worked. Can someone help me?

Based on suggestions, I edited my code as:

     <script>
        const getSelect = document.querySelectorAll('select.form-control');
    
    getSelect.forEach(getSingleSelect => { 
    getSingleSelect.addEventListener('change', () => {
         console.log(getSingleSelect.value);
       if (getSingleSelect.value == 'yes') {
        // console.log('I will render cell5.innerHTML');
          cell5.innerHTML="<td style='display:none'><input type='date' class='form-control' name='os5'></td>"
       } else {
         console.log('I will not render cell5.innerHTML');
       }
     })
    });
</script>

when I change my select option to yes, still there is no use. I dont understand where i am going wrong? I am having a table. there are 5 columns. and we can add / delete the rows based on our requirement. I want to add a feature so that when someone selects yes on 4th column, 5th column should be enabled and if 4th column is no, then 5th column should be disbaled. I dont know how to achieve this? Please help me.. :(

Always Helping · Accepted Answer · 2020-08-30 03:14:55Z

Here is fully working code you with JS. You need to use functions like nextElementSibling and childNodes[0] to get the correct r5 from each row on select option Yes or No

When you click on add Row button you need to wrap your querySelectorAll method in a function and just call this dynamicElements() function each time you click to a new row to your table. Since we need to check each time for dynamically added element.

To disable the r5 you can simple use disabled property of the input and set it true on NO or else enable it on YES as false

I have also added functionality of removing the specific row when you click on delete button. In that you can use closest function to get the row tr and use remove() function to remove from the DOM.

Lastly, I have not changed any class in your code at all as you wanted to keep the class name OR HTML as it is!

Live Working Demo:

const addRow = () => {
  const table = document.querySelector("#rtable");
  const row = table.insertRow();
  const cell1 = row.insertCell(0);
  const cell2 = row.insertCell(1);
  const cell3 = row.insertCell(2);
  const cell4 = row.insertCell(3);
  const cell5 = row.insertCell(4);
  const cell6 = row.insertCell(5);
  cell1.innerHTML = "<td><input type='text' class='form-control' name='r1'></td>"
  cell2.innerHTML = "<td><input type='date' class='form-control' name='r2'></td>"
  cell3.innerHTML = "<td><input type='number' class='form-control' name='r3' ></td>"
  cell4.innerHTML = "<td><select class='form-control' name='r4'>" +
    "<option disabled selected>Choose</option><option value='yes' >Yes</option><option value='no'>No</option></select> </td>"
  cell5.innerHTML = "<td><input type='date' class='form-control' name='r5'></td>"
  cell6.innerHTML = "<td><button type='button' class='btn btn-danger buttongreentab' onclick='remcosdeleterow(this)'>Delete</button> </td>"

  dynamicElements() //fetch all dynamic elements
}

//Call this function on addRow so that all element are fetched / watched again
function dynamicElements() {
  const getSelect = document.querySelectorAll('select.form-control');
  getSelect.forEach(getSingleSelect => {
    getSingleSelect.addEventListener('change', (e) => {
      if (e.target.value == 'yes') {
        e.target.parentElement.nextElementSibling.childNodes[0].disabled = false
      } else {
        e.target.parentElement.nextElementSibling.childNodes[0].disabled = true
      }
    })
  })
}

//Remove row
function remcosdeleterow(el) {
  el.closest('tr').remove() //remove row onClick
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<table id="rtable"></table>
<button class="btn btn-success" onclick="addRow()">Add Row</button>

MarkBurns · Accepted Answer · 2020-08-29 15:10:49Z

0

First, you need to add an Event Listener for the select field. In this case it would be a change event. It will listen to the value, here is an example:

const getSelect = document.querySelector('.select');

getSelect.addEventListener('change', () => {
    console.log(getSelect.value);
  if (getSelect.value == 'yes') {
    console.log('I will render cell5.innerHTML');
    // cell5.innerHTML='<td><input type="date" class="form-control" name="r5"></td>'
  } else {
    console.log('I will not render cell5.innerHTML');
  }
})

<select class="select">
  <option disabled selected>Select an Option</option>
  <option value="yes">yes</option>
  <option value="no" active>no</option>
</select>

You will need to give the select tag a class/id name (it's safer to declare a class name than the whole element tag).

The condition I made in the snipper, you can add the cell5.innerHTML="<td><input type='date' class='form-control' name='r5'></td>" in the if the value == 'yes'

Try to implement this, and let me know if you need extra help. Of course, remove the cell5.innerHTML='<td><input type='date' class='form-control' name='r5'></td>' you had, I will be in the if condition.

Also use a more modern syntax:

const addRow = () => {
  const table = document.querySelector("#rtable");
  const row = table.insertRow();
  const cell1 = row.insertCell(0);
  const cell2 = row.insertCell(1);
  const cell3 = row.insertCell(2);
  const cell4 = row.insertCell(3);
  const cell5 = row.insertCell(4);
  const cell6 = row.insertCell(5);
  cell1.innerHTML = "<td><input type='text' class='form-control' name='r1'></td>"
  cell2.innerHTML = "<td><input type='date' class='form-control' name='r2'></td>"
  cell3.innerHTML = "<td><input type='number' class='form-control' name='r3' ></td>"
  cell4.innerHTML = "<td><select class='form-control' name='r4'>" +
    "<option value='yes' >Yes</option><option value='no' selected>No</option></select> </td>"
  cell5.innerHTML = "<td><input type='date' class='form-control' name='r5'></td>"
  cell6.innerHTML = "<td><button type='button' class='buttongreentab' onclick='remcosdeleterow(this)'>Delete</button> </td>"
}

const getSelect = document.querySelectorAll('select.form-control');

   getSelect.forEach(getSingleSelect => { 
   getSingleSelect.addEventListener('change', () => {
        console.log(getSingleSelect.value);
      if (getSingleSelect.value == 'yes') {
        console.log('I will render cell5.innerHTML');
        // cell5.innerHTML='<td><input type="date" class="form-control" name="r5"></td>'
      } else {
        console.log('I will not render cell5.innerHTML');
      }
    })
    }

edited Aug 29, 2020 at 15:10

answered Aug 23, 2020 at 7:25

MarkBurns

4681 gold badge6 silver badges16 bronze badges

7 Comments

Surendar Over a year ago

Hi.. thanks for the help. But I cannot change the class name. My classname shall be 'form-control' for all the <td> tags. can you suggest something else please

MarkBurns Over a year ago

I dont need the td class name. Only the class name declared in the select tag

Surendar Over a year ago

yeah.. the classs name in select is "form-control" which i cannot change. It is my css classname. any other alternative i can do?

MarkBurns Over a year ago

Just use this: const getSelect = document.querySelector('select.form-control');

Surendar Over a year ago

i am having many rows with the same select.form-control, how can it distinguish on what row i changed the value?

|

Collectives™ on Stack Overflow

Enable/Disable functionality to input filed in a table using JS

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related