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

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.. :(

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>

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');
}
})
}

Related

Check and Uncheck Checkbox

Why when I check the checkbox it works fine when I uncheck it nothing happen
<form method="get">
<table id="row">
<tr><th colspan="2" >Location</th></tr>
<tr><td>Country:</td><td><select id="country" name ="country" style="width:200px"></select></td></tr>
<tr><td>City:</td><td><select name ="city" id ="state"></select></td></tr>
<script language="javascript">
populateCountries("country", "state");
</script>
<tr><td></td><td><input onclick="myFunction()" type="checkbox" name="manualentry" value="manualentry" >Manual Entry</td></tr>
<script>
var table = document.getElementById("row");
function myFunction() {
if (document.getElementsByTagName('manualentry').checked = true) {
document.getElementById("row").deleteRow(2);
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(-1);
cell1.innerHTML = "City:";
cell2.innerHTML = '<input type="text" >';
} else {
document.getElementById("row").deleteRow(2);
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "City:";
cell2.innerHTML = '<select name ="city" id ="state"></select>';
}
}
</script>
<tr ><td colspan="2" align="right" > <input type="submit" value="Submit"></td></tr>
</table>
</form>
A couple things. GetElementsByTagName is the wrong function call, that method is used to get an array of elements by their actual HTML tag. Use GetElementsByName instead. Also, this call will return an array, so you need to specify which index it is (it will be index 0). Since checked is already a boolean value, you do not need to specify == true.
Replace if (document.getElementsByTagName('manualentry').checked = true)
with if (document.getElementsByName('manualentry')[0].checked)
You forgot a = in the if condition:
if (document.getElementsByTagName('manualentry').checked = true) {
try
if (document.getElementsByTagName('manualentry').checked == true) {

nicEdit dynamical instances binding 2 of the functions

I have read all the answers provided on this questions and none of them are applying to my needs.
Also, i have already asked an 'almost similar' question about binding on dynamically created elements. I also applied these answers (which worked on other scripts) but it does not work on this one.
Explanation:
I have a form, where i give the possiblity to add a new row to my table (row with multiple cells) one of these cell is a textarea. What i want to do is be able to add nicedit to these text area created dynamically.
The creation of the new row and cells:
var index = 2;
function myCreateFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
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);
cell1.innerHTML = "<textarea type='text' id='des" + index + "' name='des" + index + "' placeholder='' rows='1' class='form-control input-sm' value=''/></textarea>";
cell1.vAlign = "top";
cell2.innerHTML = "<input type='text' id='qu" + index + "' name='qu" + index + "' placeholder='' class='form-control input-sm qu' value=''/>";
cell2.vAlign = "top";
cell3.innerHTML = "<input type='text' id='pu" + index + "' name='pu" + index + "' placeholder='' class='form-control input-sm pu' value=''/>";
cell3.vAlign = "top";
cell4.innerHTML = "<input type='text' id='rl" + index + "' name='rl" + index + "' placeholder='' class='form-control input-sm rl' value=''/>";
cell4.vAlign = "top";
cell5.innerHTML = "<input type='text' id='tl" + index + "' name='tl" + index + "' placeholder='' class='form-control input-sm total' value=''/>";
cell5.vAlign = "top";
index++;
return false;
Each clic adds a row and the textarea is on the first cell
Now the nicedit with instances:
bkLib.onDomLoaded(function() {
var myNicEditor = new nicEditor();
myNicEditor.setPanel('myNicPanel');
myNicEditor.addInstance('des1');
myNicEditor.addInstance('des2');
myNicEditor.addInstance('des3');
myNicEditor.addInstance('des4');
myNicEditor.addInstance('des5');
myNicEditor.addInstance('des6');
myNicEditor.addInstance('des7');
myNicEditor.addInstance('des8');
myNicEditor.addInstance('des9');
myNicEditor.addInstance('des10');
});
Only the instance "des1" is preloaded on the page and nicedit works perfectly, if i clic add row, it will created a row with the id and class "des2" but the nicedit does not apply to it.
This is what i have tried, please no laughing, i am still limited in the comprehension of javascript:
I wrape nicedit loading into a function:
function addnicedit {
//nicedit code here
}
$("#myTable").on("change", addnicedit);
I thought of generating this nicEdit code each time #mytable gets a modification (new row added) and run the nicedit function each time the new row is created. But here, the nicedit does not even load once.
I should mention that the nicEdit Panel is not loaded on each text area, i am using this exemple: http://nicedit.com/demos.php?demo=4 it is the inline editor where i have the panel loaded ONCE only and it should apply to all the textareas.
I would love some help with this, is it my code 'function' that is not written correctly or is it just not possible with nicEdit and the way it is loaded. I see also a onDomLoaded elements in the code... is there something realted to that ?
Any help is mucly appreciated.
Thanks for reading :)
Update
I tried re-initializing the nicedit function each time the row is created like this:
the nicedit function has no names so i gave it a name (tried)
bkLib.onDomLoaded(function initNicEdit() {
var myNicEditor = new nicEditor();
myNicEditor.setPanel('myNicPanel');
// instances
});
And re-run the function initNicEdit() at the end of my function which adds a row like this:
function myCreateFunction() {
//function here
index++;
initNicEdit();
return false;
But i can not see the effect since the page refreshes. I did have return false; at the end of my function, also in initNicEdit(); and on my button, but it does still refresh.
I'll keep trying.

Make content of a dynamically created cell bold when clicked using Javascript

HTML:
<table id="table">"
</table>
<input type="text" id="text1">
<input type="text" id="text2">
<input type="text" id="text3">
<button onclick="addRow()">Add Row</button>
Add Row Function:
function appendRow() {
var table = document.getElementById("table");
{
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.innerHTML = "<p onclick=\"bold()\">words</p>;
}
}
Currently empty bold function
function bold() {
}
When the text in a cell is clicked I want to make it bold, however I'm not quite sure how I would do this due to the lack of id values from having dynamically created the content of the cells.
How would I do this?
Try this:
//add parameter into onclick trigger function
cell1.innerHTML = "<p onclick=\"bold(this)\">words</p>";
function bold(obj){
//using the innerHTML to change content
obj.innerHTML = '<b>' + obj.innerHTML + '</b>';
// OR using CSS
obj.style.fontWeight = "bold"; //thx René Roth comments
}
cell1.innerHTML = "<p onclick=\"bold(this)\">words</p>;
Script:
function bold(obj) {
obj..style.fontWeight="bold";
}

How can I return the data in select option

I have an issue here because when I'm saving my data I can get the value of the option box but upon clicking the edit button its the same.. I want to do is it will become the option box with the value showing first
Heres my fiddle: http://jsfiddle.net/te2wF/32/
Heres my code:
function Edit(){
var par = $(this).parent().parent(); //tr
var tdName = par.children("td:nth-child(1)");
var tdAge = par.children("td:nth-child(2)");
var tdGender = par.children("td:nth-child(3)");
var tdButtons = par.children("td:nth-child(4)");
tdName.html("<input type='text' id='txtName' value='"+tdName.html()+"'/>");
tdAge.html("<input type='text' id='txtage' value='"+tdAge.html()+"'/>");
tdGender.html(tdGender.html());
tdButtons.html("<input type='button' value = 'Save' class='btnSave'/><input type='button' value='Delete' class='btnDelete'/>");
$(".btnSave").bind("click", Save);
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
};
Working Demo
Few issues resolved:
1. Updated Edit function to provide a select option to edit the selection with last selection selected.
function Edit() {
var par = $(this).parent().parent(); //tr
var tdName = par.children("td:nth-child(1)");
var tdAge = par.children("td:nth-child(2)");
var tdGender = par.children("td:nth-child(3)");
var tdButtons = par.children("td:nth-child(4)");
tdName.html("<input type='text' id='txtName' value='" + tdName.html() + "'/>");
tdAge.html("<input type='text' id='txtage' value='" + tdAge.html() + "'/>");
if(tdGender.html().toLowerCase() == "female") {
tdGender.html("<select class='gender'><option></option><option>Male</option><option selected>Female</option></select>");
} else {
tdGender.html("<select class='gender'><option></option><option selected >Male</option><option >Female</option></select>");
}
tdButtons.html("<input type='button' value = 'Save' class='btnSave'/><input type='button' value='Delete' class='btnDelete'/>");
$(".btnSave").bind("click", Save);
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
};
2. Your code was not able to find isNumberKey function. So, I moved it outside the scope so that its accessible from everywhere.
3. In your Add function, the select markup contained an additionally >. Removed it in my code.
Here you have: http://jsfiddle.net/edgarinvillegas/te2wF/33/
Main 2 changes are that we're storing the select html in a var:
var genderSelectHtml = "<select class='gender'><option></option><option value='Male'>Male</option><option value='Female'>Female</option></select>";
And then when editing, this recreates the select:
$(genderSelectHtml).val(tdGender.html()).appendTo(tdGender.empty());
Cheers, from La Paz, Bolivia

Add new row to the table containing a drop down list on button click

I want to add a new row on button click to a table. New Row will have one textbox and one drop-down. Dropdown (select element)'s options to be added from session attribute.
I am able to add textbox using following function.
function addRow(btn) {
var parentRow = btn.parentNode.parentNode;
var table = parentRow.parentNode;
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name="abc";
cell1.appendChild(element1);
var cell3 = row.insertCell(1);
var element2 = document.createElement("select");
var option1 = document.createElement("option");
option1.innerHTML = "Option1";
option1.value = "1";
element2.appendChild(option1, null);
}
I have one session attribute "types". I want to add one drop down list as other column to the row where options are to be added from types. I am setting the attribute "types" when page gets loaded.
I am using Java Servlet for server side.
Any help is appreciated.
<c:forEach items="${types}" var="type">
If u have session attribute "types" then u can do like this. Post ur remaining coding so i can update my answer.
var Type = 'option 1';
function AddRow() {
$('#tblTest').append(
'<tr><td>' +
'<input type="text" />' +
'<select><option>' + Type + '</option></select>' +
'</td></tr>');
}
<table id="tblTest">
<tr>
<td>
<input type="text" name="data1" value="TempData" />
</td>
<td>
<input type="button" value="Add" onclick="AddRow()" />
</td>
</tr>
</table>

Categories