We Keep Coding

Use .innerHTML to define a input field with ng-model

I want to create multiple input fields in a for-loop and assign a unique ng-model name to each field so I can use the values later.
Here is how I did it. inputmap is a map.
<script cam-script type="text/form-script">
for (let i=0;i<3;i++){
var name = "inputmap.item"+ i.toString(); // inputmap.item0, inputmap.item1, inputmap.item2, etc
document.getElementById("inputs").innerHTML += "<input type='text' ng-model='" + name + "' required/><br>"
}
</script>
<div id="inputs"></div>
But when I look at the $scope.inputmap, it's empty.
When I hardcode the input fields like:
<div id="inputs">
<input type='text' ng-model='inputmap.item0' required/><br>
<input type='text' ng-model='inputmap.item1' required/><br>
<input type='text' ng-model='inputmap.item2' required/><br>
</div>
I was able to get the values I entered in the fields. I am new to HTML and any help/hints is appreciated.

First you have += on document.getElementById("inputs").innerHTML += "<input type='text' ng-model='" + name + "' required/><br>" and can be changed to just =
There are to ways to do this. I think if you change document.getElementById("inputs").innerHTML += "<input type='text' ng-model='" + name + "' required/><br>" to document.getElementById("inputs").innerHTML = `<input type='text' ng-model="${name}" required/><br>` then that will add it in correctly. Never done this though and might not work where you can do my second way of doing it:
for(let i = 0; i < 3; i++) {
let input = document.createElement('input') //Creates input element
let wrapper = document.getElementById('inputs') //Gets the div element
let name = `inputmap.item${i.toString()}` //Gets the name
input.setAttribute('ng-model', name) // Sets 'ng-model' attribute to name
wrapper.appendChild(input) //Sets 'wrapper' as 'input' parent
}
Hope this helps!

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

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

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";
}

Make checkboxes act like radio buttons in duplicatable input fields

I'm creating a duplicate-able div's containing check box's, at the moment on the original set of inputs, the check boxes act like radio buttons, but when duplicated it still only works on the first not the second.
Also on submit it only returns one value for the original form in the console, but no value for any duplicates.
Any help greatly appreciated.
JS Fiddle: http://jsfiddle.net/dawidvdh/EEd7c/
jQuery:
//Clone Tracking
var g_counter = 1;
var d_counter = 1;
var dependant = ["dependant"];
var group;
//Clone Tracking
//General Variables
var relation_input_groups = ["relation-group-1"];
//General Variables
//Generate variables
var relation_fields=[0];
var relation_input ="<label>Spouse</label>"+
"<input type='checkbox' value='spouse' class='relationship' name='relationship' />" +
"<label>own child</label>"+
"<input type='checkbox' value='ownchild' class='relationship' name='relationship' />" +
"<label>adopted</label>"+
"<input type='checkbox' value='adopted' class='relationship' name='relationship' />" +
"<label>stepchild</label>"+
"<input type='checkbox' value='stepchild' class='relationship' name='relationship' />" +
"<label>parent</label>"+
"<input type='checkbox' value='parent' class='relationship' name='relationship' />" +
"<label>inlaw</label>"+
"<input type='checkbox' value='inlaw' class='relationship' name='relationship' />" +
"<label>brother</label>"+
"<input type='checkbox' value='brother' class='relationship' name='relationship' />" +
"<label>other</label>"+
"<input type='checkbox' value='other' class='relationship' name='relationship' />";
//Generate variables
jQuery(document).ready(function(e)
{
//populate jquery generated fields
jQuery(relation_fields).each(function()
{
jQuery(relation_input).appendTo('#relation-group-1');
});
//populate jquery generated fields
//Cloning Function
jQuery('#clone').click(function()
{
clone_dependant();
});
function clone_dependant()
{
// Store the value of the previous Id to insert the cloned div..
var oldId = g_counter;
g_counter++;
currentdep ='dependant-'+g_counter;
// Clone the Dependant Div and set a new id
var $clonedDiv = jQuery('#dependant-1').clone(false).attr('id', 'dependant-'+g_counter);
var relation_newDiv = 'relation-group-'+ g_counter;
// Find div's inside the cloned object and set a new id's
$clonedDiv.find('#relation-group-1').attr('id',"relation-group-" + g_counter );
// You don't need to Loop thru the inputs to set the value
$clonedDiv.find('input').val('');
$clonedDiv.find('input:checkbox').removeAttr('checked');
// Insert the cloned object
$clonedDiv.insertAfter("#dependant-" + oldId);
relation_input_groups.push(relation_newDiv);
}
//Cloning Function
//Validation
//submit function
var $unique = $('input[type="checkbox"]');
$unique.click(function()
{
$unique.removeAttr('checked');
$(this).attr('checked', true);
});
var result = {};
var dependants;
var dep_counter = 0;
jQuery('#submit').click(function()
{
jQuery('.dependant').each(function(k, v)
{
dep_counter++
dependants = {};
result['dependant'+dep_counter] = [dependants];
dependants['relationship'] = $(v).find('.relationship:checked').val();
});
var jsonData = JSON.stringify(result);
console.log(jsonData);
});
});
and the HTML:
<div id="dependant-1" class="dependant">
<div id="label">relationship:</div> <div id="relation-group-1"></div>
</div>
<button id="clone">clone</button>
<button id="submit">submit</button>
Thanks in advance :)

See this : http://jsfiddle.net/EEd7c/1/
var $unique = $('input[type="checkbox"]');
$unique.live("click", function() {
$(this).siblings().removeAttr('checked');
$(this).attr('checked', true);
});
Yet Live is deprecated...
Or
$(document).on("click", 'input[type="checkbox"]', function() {
$(this).siblings().removeAttr('checked');
$(this).attr('checked', true);
});

The reason why it does not work is you are not attaching the click events to the new cloned elements.
$(document).on("click", 'input[type="checkbox"]', function() {
jQuery(this).siblings(":checked").removeAttr('checked');
});

var $unique = $('input[type="checkbox"]');
$unique.live('click',function() {
$(this).closest('div').find('input[type="checkbox"]').removeAttr('checked');
$(this).attr('checked', true);
});
Using live to register the event handler to dynamically created elements. $unique variable will contain only the initial set of checkboxes.

jquery uncertain error?

i am using this code to access all the hidden elements from a form:
function get_hidden_val(ids,form_id)
{
var get_check_val = document.getElementById(ids);
if(get_check_val.checked){
var div = $('<div></div>')
.appendTo('form#bulk_add_cart')
.attr('id',"bulk_"+form_id)
$("form#" +form_id).find('input[type="hidden"]').each(function(){
var value =$(this).val();
var name = $(this).attr("name");
var tags = "<input type='hidden' value='" + value + "' name='"+name+"'>";
$('div#' +form_id).append(tags);
});
}
else
{
$("form#bulk_add_cart").find('div#' +form_id).remove();
}
}
My problem is when I click the first checkbox it give me the result but when i click the second checkbox it doesn't and also the another problem is when i click first checkbox it shows total hidden elements but when i second time checked it, it show 4 less ?
Please suggest a solution.
Thanks

#user704302: Missing >, update var tags to --
var tags = "<input type='hidden' value='" + value + "' id='"+id+"'>";