I am trying to create a checkbox dynamically using following HTML/JavaScript. Any ideas why it doesn't work?
<div id="cb"></div>
<script type="text/javascript">
var cbh = document.getElementById('cb');
var val = '1';
var cap = 'Jan';
var cb = document.createElement('input');
cb.type = 'checkbox';
cbh.appendChild(cb);
cb.name = val;
cb.value = cap;
cb.appendChild(document.createTextNode(cap));
</script>
You're trying to put a text node inside an input element.
Input elements are empty and can't have children.
...
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "id";
var label = document.createElement('label')
label.htmlFor = "id";
label.appendChild(document.createTextNode('text for label after checkbox'));
container.appendChild(checkbox);
container.appendChild(label);
The last line should read
cbh.appendChild(document.createTextNode(cap));
Appending the text (label?) to the same container as the checkbox, not the checkbox itself
You can create a function:
function changeInputType(oldObj, oTyp, nValue) {
var newObject = document.createElement('input');
newObject.type = oTyp;
if(oldObj.size) newObject.size = oldObj.size;
if(oldObj.value) newObject.value = nValue;
if(oldObj.name) newObject.name = oldObj.name;
if(oldObj.id) newObject.id = oldObj.id;
if(oldObj.className) newObject.className = oldObj.className;
oldObj.parentNode.replaceChild(newObject,oldObj);
return newObject;
}
And you do a call like:
changeInputType(document.getElementById('DATE_RANGE_VALUE'), 'checkbox', 7);
/* worked for me */
<div id="divid"> </div>
<script type="text/javascript">
var hold = document.getElementById("divid");
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "chkbox1";
checkbox.id = "cbid";
var label = document.createElement('label');
var tn = document.createTextNode("Not A RoBot");
label.htmlFor="cbid";
label.appendChild(tn);
hold.appendChild(label);
hold.appendChild(checkbox);
</script>
Related
I am trying to add a check box on the same line as my paragraph in my to do list.
I have tried:
let addToDoButtton = document.getElementById('addToDo');
let toDoContainer = document.getElementById('toDoContainer');
let inputField = document.getElementById('inputField');
addToDoButtton.addEventListener('click', function(){
var paragraph = document.createElement('p');
var checkbox = document.createElement('input');
checkbox.type='checkbox';
paragraph.classList.add('paragraph-styling');
paragraph.innerText = inputField.value;
toDoContainer.appendChild(checkbox);
toDoContainer.appendChild(paragraph);
inputField.value=""
paragraph.addEventListener('click', function () {
paragraph.style.textDecoration="line-through";
paragraph.style.color='#5493f7';
})
paragraph.addEventListener('dblclick', function(){
toDoContainer.removeChild(paragraph);
toDoContainer.removeChild(paragraph)
})
I have also tried:
toDoContainer.appendChild(checkbox) &&
toDoContainer.appendChild(paragraph);
I got this for the output:
Please take a look here
const input = document.createElement('input');
input.id = 'input';
input.type = 'checkbox';
const label = document.createElement('label');
label.htmlFor = 'input';
toDoContainer.append(input, label);
I'm trying to generate inputs automatically according to user's input.
For example if he enter 2 then it will automatically generate:
2 x (select option(values : M-Mr) + text input + text input + date
input )
I already made the 3 last inputs(text-text-date) , I faced a probleme with the select option
Thank you!!
<input type="text" id="member" name="member" value="">Number of members: <br/>
Fill Details
<div id="container"/>
and this is funtion :
function addFields(){
var number = document.getElementById("member").value;
var container = document.getElementById("container");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
container.appendChild(document.createTextNode("Member " + (i+1)));
var input = document.createElement("input");
var input1 = document.createElement("input");
var input2 = document.createElement("input");
input.type = "text";
input1.type = "text";
input2.type = "date";
container.appendChild(input);
container.appendChild(input1);
container.appendChild(input2);
container.appendChild(document.createElement("br"));
}
}
for the snipped code :
https://jsfiddle.net/f4hptzsy/
This example adds the select element with two options included.
See comments in the code for explanation of how it works.
// Identifies existing HTML elements
const member = document.getElementById("member");
const container = document.getElementById("container");
// Calls `useNumber` when `member` changes
member.addEventListener("change", useNumber);
// Defines `useNumber`
// (The listener can automatically access the triggering event)
function useNumber(event){
// The element where the event happened is the `target`
const memberValue = event.target.value;
// Calls `addFields` if the value can be used as an integer
const num = parseInt(memberValue);
if(num){
addFields(num);
}
}
function addFields(number) {
// Clears container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
// Creates new elements and adds them to container
for (i = 0; i < number; i++) {
container.appendChild(document.createTextNode("Member " + (i + 1)));
// Defines a select element
const dropdown = document.createElement("select");
// Enumerates options and adds them to the select element
let options = ["M", "Mr"];
for (let option of options){
optionElement = document.createElement("option");
optionElement.value = option;
optionElement.innerHTML = option;
dropdown.appendChild(optionElement);
}
var input = document.createElement("input");
var input1 = document.createElement("input");
var input2 = document.createElement("input");
input.type = "text";
input1.type = "text";
input2.type = "date";
// Adds the select element to the page
container.appendChild(dropdown);
// Adds other inputs to the page
container.appendChild(input);
container.appendChild(input1);
container.appendChild(input2);
container.appendChild(document.createElement("br"));
}
}
<input id="member" />
<br />
<div id="container"></div>
EDIT:
The useNumber function just tests if the input is a valid integer before calling addFields.
It would be fine to omit this function and have addFields itself be the event listener instead, like:
// Identifies existing HTML elements
const member = document.getElementById("member");
const container = document.getElementById("container");
// Calls `addFields` when `member` changes
member.addEventListener("change", addFields);
function addFields(event) { // We name the triggering event "event"
// Gets value of element where the `change` event happened
const memberValue = event.target.value;
// Converts value to a number
const number = parseInt(memberValue);
// Makes sure conversion succeeded before proceding
if(number){
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i = 0; i < number; i++) {
container.appendChild(document.createTextNode("Member " + (i + 1)));
// Defines a select element
const dropdown = document.createElement("select");
// Enumerates options and adds them to the select element
let options = ["M", "Mr"];
for (let option of options){
optionElement = document.createElement("option");
optionElement.value = option;
optionElement.innerHTML = option;
dropdown.appendChild(optionElement);
}
var input = document.createElement("input");
var input1 = document.createElement("input");
var input2 = document.createElement("input");
input.type = "text";
input1.type = "text";
input2.type = "date";
// Adds the select element to the page
container.appendChild(dropdown);
container.appendChild(input);
container.appendChild(input1);
container.appendChild(input2);
container.appendChild(document.createElement("br"));
}
}
}
<input id="member" />
<br />
<div id="container"></div>
I am creating dynamic checkboxes and want a function to be called every time I check any checkbox. The checkbox looks good but my onclick event does not work. Also if I do not pass 'this' to my function, my function gets called on load as well.
Below is my code:
for(var i=0; i<options.length; i++) {
var op = options[i].new_name;
var label = document.createElement("label");
var description = document.createTextNode(op);
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = "multiselectCheckbox";
checkbox.value = op;
checkbox.onclick= "getCheckedValues(this)";
label.appendChild(checkbox);
label.appendChild(description);
document.getElementById("multiselect").appendChild(label);
document.getElementById("multiselect").appendChild(document.createElement("br"));
}
Please let me know what am I doing wrong here.
The below snippet works. I suppose this is what you want to do. You need not pass this in the function and also call the function without ""
var options = [{new_name: "1"}, {new_name: "2"}]
for(var i=0; i<options.length; i++) {
var op = options[i].new_name;
var label = document.createElement("label");
var description = document.createTextNode(op);
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = "multiselectCheckbox";
checkbox.value = op;
checkbox.onclick = getCheckedValues;
label.appendChild(checkbox);
label.appendChild(description);
document.getElementById("multiselect").appendChild(label);
document.getElementById("multiselect").appendChild(document.createElement("br"));
}
function getCheckedValues() {
alert(this.value);
}
<div id="multiselect"></div>
While i click the Add Row button it showing error. I want to append a new 'tr' of every time i click add row button. the each td must contain, checkbox, firstname, lastname, email, mobile edit & save.
i want to save the values if i click save button..
and edit button to edit the fields.
Checkbox is to select the multiple rows and delete the entire row.
Can someone please help me to do this.. thanks in advance.
var form = document.createElement('form');
document.body.appendChild(form);
var table = document.createElement('table');
table.setAttribute("id","myTable");
form.appendChild(table);
var btnClick = document.createElement('button');
btnClick.setAttribute('onclick','addTable()');
btnClick.innerHTML = "Add Row";
form.appendChild(btnClick);
var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";
var btnDelete = document.createElement('button');
btnDelete.innerHTML = "Delete";
var btnEdit = document.createElement('button');
btnEdit.innerHTML = "Edit";
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
var input = document.createElement('input');
input.type = "text";
input.placeholder = "Firstname";
var input1 = document.createElement('input');
input1.type = "text";
input1.placeholder = "Lastname";
var input2 = document.createElement('input');
input2.type = "email";
input2.placeholder = "Email";
var input3 = document.createElement('input');
input3.type = "number";
input3.placeholder = "Number";
function addTable() {
var row = document.createElement('tr');
table.appendChild(row);
var cell = document.createElement('td');
row.appendChild(cell);
cell.appendChild(checkbox);
cell.appendChild(input);
cell.appendChild(input1);
cell.appendChild(input2);
cell.appendChild(input3);
cell.appendChild(btnSave);
cell.appendChild(btnEdit);
}
JsFiddle
First and most important thing to change is the tag you're using for your add row button. By using a button you're going to cause the form to submit each time you press it, thereby undoing your row add and any other page changes. Use an < input > tag with type button if you want the same look. You'll probably want to do the same with your save edit and delete buttons if you want the page to respond without reloading.
For everything else you're pretty much there. If I were you I would stop using setAttribute for everything. You can set the id and onclick of an element by a direct property set (ie table.id = "myTable";). I typically only use setAttribute for inline style when I want to set more than one property at once (ie table.setAttribute("style","border:2px solid;color:red;");
Here's my version of your code that works.
window.onload = function(){
var addTable = function() {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
var input = document.createElement('input');
input.type = "text";
input.placeholder = "Firstname";
var input1 = document.createElement('input');
input1.type = "text";
input1.placeholder = "Lastname";
var input2 = document.createElement('input');
input2.type = "email";
input2.placeholder = "Email";
var input3 = document.createElement('input');
input3.type = "number";
input3.placeholder = "Number";
var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";
var btnDelete = document.createElement('button');
btnDelete.innerHTML = "Delete";
var btnEdit = document.createElement('button');
btnEdit.innerHTML = "Edit";
var row = document.createElement('tr');
table.appendChild(row);
addCell(row,checkbox);
addCell(row,input);
addCell(row,input1);
addCell(row,input2);
addCell(row,input3);
addCell(row,btnSave);
addCell(row,btnEdit);
addCell(row,btnDelete);
};
var form = document.createElement('form');
form.method = "post";
document.body.appendChild(form);
var table = document.createElement('table');
table.id = "myTable";
form.appendChild(table);
var btnClick = document.createElement('input');
btnClick.type = "button";
btnClick.value = "Add Row";
btnClick.onclick = addTable;
form.appendChild(btnClick);
};
function addCell(row,elm){
var cell = document.createElement('td');
row.appendChild(cell);
cell.appendChild(elm);
}
With javascript, i want my checkbox to change the text decoration of an input text field.
So when it's checked, the text in the input text field turns bold.
Remember i'm learning so i'm not a pro as you guys ;)
I thought something like this;
var checkbox = create("input");
checkbox.type = "checkbox";
checkbox.id = "checkboxId" + counter;
div.appendChild(checkbox);
checkbox.onClick="boldChange(this)"
var input = create("input");
input.type = "input";
input.id = "inputId" + counter;
div.appendChild(input);
function boldChange()
var boldgroup = document.getElementsByName(el.name);
for (var b=0; boldgroup[b]; ++b)
inputId.style.textDecoration = boldgroup[b].checked ? 'bold' : 'none';
}
How can i make this work?
Thank you so much in advance
Here is a working JSFiddle example based on your code above: Link to example
Code snippet: (place below </body> so that all of DOM is loaded)
<script>
var div = document.getElementById('div'),
counter = 0;
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "checkboxId" + counter;
div.appendChild(checkbox);
checkbox.onclick = boldChange;
counter++;
var input = document.createElement("input");
input.type = "text";
input.id = "inputId" + counter;
div.appendChild(input);
function boldChange() {
input.style.fontWeight = (checkbox.checked)?'bold':'normal';
}
</script>