I have a checkboxlist, and I created a javascript function that will add checkbox to the checkboxlist,
here's the code
function add1()
{
var ques = document.getElementById('Questions_que1');
var container = document.getElementById('Questions_wh1');
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "que1";
checkbox.value = ques.value;
checkbox.id = "id";
var label = document.createElement('label');
label.htmlFor = "id";
label.appendChild(document.createTextNode(ques.value));
container.appendChild(checkbox);
container.appendChild(label);
}
but the problem is that the checkbox label is being displayed on the next line instead of after the checkbox on the same line..
what am I doing wring here???
Related
I am trying to create a radio button and a label with JavaScript and I got the radio button working, but the label doesn't appear next to it and I can't figure out what I am doing wrong. This is my code:
const x = document.createElement("INPUT");
x.setAttribute("type", "radio");
document.body.appendChild(x);
const y = document.createElement("LABEL");
const t = document.createTextNode("Label text");
y.textContent = "Label text";
y.setAttribute("for", "lord");
y.appendChild(t);
You need to append the label to the body but your code is appending it as child of radio button
const x = document.createElement("INPUT");
x.setAttribute("type", "radio");
x.setAttribute("id", "lord");
document.body.appendChild(x);
const y = document.createElement("LABEL");
const t = document.createTextNode("Label text");
y.textContent = "Label text";
y.setAttribute("for", "lord");
document.body.appendChild(t);
yo have to apppend to de document, like the radio button
document.body.appendChild(y);
I have an array of animals ... how do I manage to create a checkbox list in javascript and fill each with a name of the animals who are in animals array and display them in html.
My my attempt code:
var lengthArrayAnimals = animals.length;
for (var i= 0; pos < tamanhoArrayDiagnosticos; pos++) {
var checkBox = document.createElement("input");
checkBox.setAttribute("type", "checkbox");
checkBox.name = diagnosticos[i];
}
Here's one way (pure JavaScript, no jQuery):
var animals = ["lion", "tigers", "bears", "squirrels"];
var myDiv = document.getElementById("cboxes");
for (var i = 0; i < animals.length; i++) {
var checkBox = document.createElement("input");
var label = document.createElement("label");
checkBox.type = "checkbox";
checkBox.value = animals[i];
myDiv.appendChild(checkBox);
myDiv.appendChild(label);
label.appendChild(document.createTextNode(animals[i]));
}
https://jsfiddle.net/lemoncurry/5brxz3mk/
I hope this is what you expected.
$(document).ready(function(){
var animals=["cat","dog","pikachu","charmaner"];
$.each(animals,function(index,value){
var checkbox="<label for="+value+">"+value+"</label><input type='checkbox' id="+value+" value="+value+" name="+value+">"
$(".checkBoxContainer").append($(checkbox));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkBoxContainer"></div>
Here's the code for the dynamically created checkboxes. How do I add line breaks to the code so that I have one checkbox per line? I tried to do document.createElement("br") and appending it after get.appendChild(label) but it didn't work.
function setCheckboxes(browser) {
var get = document.getElementById("get");
if (browser == "courses") {
for (var i = 1; i < coursesGetKeys.length; i++) {
var checkBox = document.createElement("input");
var label = document.createElement("label");
checkBox.type = "checkbox";
checkBox.value = coursesGetKeys[i];
checkBox.name = "r";
label.textContent = setOpt(coursesGetKeys[i], browser);
get.appendChild(checkBox);
get.appendChild(label);
//label.appendChild(document.createTextNode(setOpt(validCoursesKeys[i], dataset)));
}
}
if (browser == "rooms") {
for (var i = 1; i < validRoomsKeys.length; i++) {
var checkBox = document.createElement("input");
var label = document.createElement("label");
checkBox.type = "checkbox";
checkBox.value = validRoomsKeys[i];
checkBox.name = "r";
label.textContent = setOpt(validRoomsKeys[i], browser);
get.appendChild(checkBox);
get.appendChild(label);
//label.appendChild(document.createTextNode(setOpt(validCoursesKeys[i], dataset)));
}
}
};
You already know how to create an input:
var checkBox = document.createElement("input");
and how to append it:
get.appendChild(checkBox); // get is the parent element you selected at the top of your code
So your first hunch was correct, you can also do this:
var br = document.createElement("br");
get.appendChild(br);
which creates a br element, and then also appends it to the "get" parent.
I'm trying to create check boxes dynamically. But I have no idea what is the wrong with this code. Somebody please help. Comment if you need more details.
$.getJSON(url, function(json) {
console.log(json);
console.log(json.items.length);
for (var i = 0; i < json.items.length; i++) {
console.log(json.items[i].name);
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name" + json.items[i].name;
checkbox.value = "value";
checkbox.id = "id" + i;
}
});
Thank you
You never seem to be appending those dynamically created checkboxes to your DOM, so this checkbox variable that you create inside the loop simply gets garbage collected. If you want those checkboxes to appear somewhere make sure that you are actually adding them to the DOM:
document.body.appendChild(checkbox);
Of course instead of simply appending them to the body of the DOM you might want to append them to some specific element in which case you might need to get this element first:
var someDiv = document.getElementById('someId');
someDiv.appendChild(checkbox);
or if you are using jQuery:
for (var i = 0; i < json.items.length; i++) {
$('<input />', {
type : 'checkbox',
id: 'id' + i,
name: 'name' + json.items[i].name,
value: 'value'
})
.appendTo("#someId");
}
where you obviously have the corresponding container to harbor those newly added elements:
<div id="someId"></div>
Just what Darin said,
you need to append a dynamically created element to the DOM. So in your case
$.getJSON(url, function(json) {
console.log(json);
console.log(json.items.length);
for(var i=0;i<json.items.length;i++){
console.log(json.items[i].name);
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name"+json.items[i].name;
checkbox.value = "value";
checkbox.id = "id"+i;
document.body.appendChild(checkbox);
}
});
OR You can create a div in your HTML sheet, and append your checkboxes to that, so it would be something like ..
var div = document.getElementById('div');
for(var i=0;i<json.items.length;i++){
console.log(json.items[i].name);
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name"+json.items[i].name;
checkbox.value = "value";
checkbox.id = "id"+i;
div.appendChild(checkbox);
}
});
you need to add the checkbox in some html container. say you have a div with id append like below,
<div id="append" name="append">Append here</div>
and your dynamically created checkbox added to that div.
js:
$.getJSON(url, function(json) {
console.log(json);
console.log(json.items.length);
for (var i = 0; i < json.items.length; i++) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name" + json.items[i].name;
checkbox.value = "value";
checkbox.id = "id" + i;
document.getElementById( 'append' ).appendChild( checkbox);
}
});
function addrow() {
document.getElementById("myTableData").style.display="block";
/*displaying div on click of button abc*/
var el = document.createElement('input');
el.type = 'text';
el.name = 'kname';
/*creating name field*/
var el_r = document.createElement('input');
el_r.type = 'radio';
el_r.name = 'gender';
el_r.value ='FEMALE';
el_r.id = "rad1";
el_r.defaultChecked = true;
/* creating radio button for gender field */
var el_r2 = document.createElement('input');
el_r2.type = 'radio';
el_r2.name = 'gender';
el_r2.value ='MALE';
el_r2.id = "rad2";
/* creating radio button for gender field */
var obj1 = document.createTextNode("Female");
var obj2 = document.createTextNode("Male");
var objLabel = document.createElement("label");
objLabel.htmlFor = el_r.id;
objLabel.appendChild(el_r);
objLabel.appendChild(obj1);
var objLabel2 = document.createElement("label");
objLabel2.htmlFor = el_r2.id;
objLabel2.appendChild(el_r2);
objLabel2.appendChild(obj2);
/* creating drop down for date field */
var el_s = document.createElement('select');
el_s.onchange = function(){
var r = el_s.options[el_s.selectedIndex].value;
alert("selected date"+r); //cheking the selected date value;
}
for(var i=0;i<32;i++)
{
var j = i;
j = document.createElement('option');
j.text=i;
j.name="day";
j.value=j;
el_s.appendChild(j);
}
var month = new Array("January","Februray","March","April","May","June","July","August","September","October","November","December");
var el_sm = document.createElement('select');
for(var i=0;i<month.length;i++)
{
var j = i;
j = document.createElement('option');
j.text=month[i];
j.name="month";
j.value=month[i];
el_sm.appendChild(j);
}
var el_sy = document.createElement('select');
for(var i=2013;i>1950;i--)
{
var j = i;
j = document.createElement('option');
j.text=i;
j.name="year";
j.value=j;
el_sy.appendChild(j);
}
var table = document.getElementById("myTableData");
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
var tr = document.createElement('TR');
tableBody.appendChild(tr);
var td = document.createElement('TD');
td.width='175';
td.appendChild(el);
tr.appendChild(td);
var td = document.createElement('TD');
td.width='245';
td.appendChild(objLabel);
td.appendChild(objLabel2);
tr.appendChild(td);
var td = document.createElement('TD');
td.width='245';
td.appendChild(el_s);
td.appendChild(el_sm);
td.appendChild(el_sy);
tr.appendChild(td);
myTableData.appendChild(table);
}
</script>
<input type="submit" value="submit"/>
i am dynamically generating form in HTML with the help of javascript on button click named abc. my code is working fine , when i am inserting values ,but when i am posting this form with the help of button the values name and gender is showing in address bar but the DATE ( element name"el_s") selected values is not showing in addressbar.
there are 2 buttons in first displays the div in which form is shown and next one is submit button of form
You must set el_s.name='date' in order for the data to be automatically posted.