How to add a for="" and required='' attribute to an element with JavaScript like this: <label for='text'>Something</label> and require to input<input type="text" required>?
function newFields(){
var number = document.getElementById("link").value;
var container = document.getElementById("new");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
var label = document.createElement("label");
var input = document.createElement("input");
label.for = "text";
label.textContent = "Field " + (i + 1);
input.type = "text";
input.required = true;
container.appendChild(label);
}
}
You can either set the for attribute or set the htmlFor property:
label.setAttribute('for', 'text');
label.htmlFor = 'text';
See the MDN description of the label element.
Related
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 am trying to add an <input> element using Javascript. However, the innerHTML is not showing up. Below is my code:
function addElements()
{
container = document.getElementById("duration"); //a div container
var input1 = document.createElement("input");
var input2 = document.createElement("input");
input1.type = "number";
input1.min = "0";
input1.max = "10";
input1.required = true;
input1.innerHTML = "years";
input2.type = "number";
input2.min = "0";
input2.max = "12";
input2.required = true;
input2.innerHTML = "months";
container.appendChild(input1);
container.appendChild(input2);
}
The result of this code only produces two number input fields without the innerHTML. Is there anything wrong with my code?
Input elements don't have inner content you can set with innerHTML. Instead set value property:
input1.value = "years";
However, it seems that in your case you want to set placeholder:
input1.setAttribute("placeholder", "years");
or you can set corresponding property as well:
input1.placeholder = "years";
I think what you try to achieve is [label][input] in this case you have to add 2 new more elements on page.
function addElements()
{
container = document.getElementById("duration"); //a div container
var label1 = document.createElement("label");
var input1 = document.createElement("input");
var label2 = document.createElement("label");
var input2 = document.createElement("input");
input1.type = "number";
input1.min = "0";
input1.max = "10";
input1.required = true;
label1.innerHTML = "years";
input2.type = "number";
input2.min = "0";
input2.max = "12";
input2.required = true;
label2.innerHTML = "months";
container.appendChild(label1);
container.appendChild(input1);
container.appendChild(label2);
container.appendChild(input2);
}
addElements();
<div id="duration" />
function printPerson(nop) {
if (nop == null || nop == 0) {
document.getElementById("div1").innerHTML = "";
}
else {
for (var i = 0; i < nop; i++) {
var element = document.createElement("input");
var label = document.createElement("Label");
var button1 = document.createElement("input");
var button2 = document.createElement("input");
var br = document.createElement("br");
label.innerHTML = "User Name :";
// addition text box
element.setAttribute("type", "text");
element.setAttribute("name", "addition");
element.setAttribute("id", "cal");
// button 1
button1.setAttribute("type", "button");
button1.setAttribute("value", "+");
button1.setAttribute("onclick", "document.getElementById('cal').value += '+' ");
// button 2
button2.setAttribute("type", "button");
button2.setAttribute("value", "=");
button2.setAttribute("onclick", "document.getElementById('cal').value = eval(document.getElementById('cal').value)");
var para = document.getElementById("div1");
para.appendChild(label);
para.appendChild(element);
para.appendChild(br);
para.appendChild(button1);
para.appendChild(button2);
para.appendChild(br);
count++;
}
}
}
Here I am trying to create text boxes and buttons based on the user input but I was not able to give unique IDs for each and every dynamically generated fields so the actions are being performed only one first created text box
Try with -
element.setAttribute("id", "cal" + i);
The ids will be cal1, cal2 and so on.. And hope you will do the same for the name attribute.
I need to add a tag with some Elements, but the innerHTML inserts before appendChild.
My Js function:
function addFields(){
var isbn_container = document.getElementById("isbn_container");
isbn_container.innerHTML += "<div>";
var div = document.createElement("div");
var input = document.createElement("input");
input.type = "text";
input.name = "new-isbn-10[]";
isbn_container.appendChild(input);
var input2 = document.createElement("input");
input2.type = "text";
input2.name = "new-isbn-13[]";
isbn_container.appendChild(input2);
isbn_container.innerHTML += "<span onclick='deleted(this);'> delete</span>";
isbn_container.appendChild(document.createElement("br"));
isbn_container.appendChild(document.createElement("br"));
isbn_container.after.innerHTML += "</div>";
}
The result:
<div></div>
<input type="text" name="new-isbn-10[]">
<input type="text" name="new-isbn-13[]">
<span onclick="deleted(this);"> delete</span>
<br><br>
But I want:
<div>
<input type="text" name="new-isbn-10[]">
<input type="text" name="new-isbn-13[]">
<span onclick="deleted(this);"> delete</span>
<br><br>
</div>
Help me please.
In your code:
function addFields(){
var isbn_container = document.getElementById("isbn_container");
isbn_container.innerHTML += "<div>";
Don't do that, it's invalid markup and completely unnecessary given the following line:
var div = document.createElement("div");
var input = document.createElement("input");
input.type = "text";
input.name = "new-isbn-10[]";
isbn_container.appendChild(input);
You want this inside the div, so don't do that, add it to the div:
div.appendChild(input);
Same here:
var input2 = document.createElement("input");
input2.type = "text";
input2.name = "new-isbn-13[]";
isbn_container.appendChild(input2);
Replace with:
div.appendChild(input2);
Again, adding stuff to isbn_container doesn't put it in the div, so don't do this:
isbn_container.innerHTML += "<span onclick='deleted(this);'> delete</span>";
isbn_container.appendChild(document.createElement("br"));
isbn_container.appendChild(document.createElement("br"));
Do this:
div.innerHTML += "<span onclick='deleted(this);'> delete</span>";
div.appendChild(document.createElement("br"));
div.appendChild(document.createElement("br"));
Now all that stuff is in the div, so you can now add the div to the document:
isbn_container.appendChild(div);
}
I have an html form. When you click the button, a javascript function adds a new field. I'm trying to have the function also add a 'label' for the field as well.
I've tried using document.createElement("LABEL"), but that doesn't let me change the innerHtml (or maybe I'm doing it wrong..), nor add a closing
Here is my code. Thanks!
var instance = 2;
function newTextBox(element)
{
instance++;
// Create new input field
var newInput = document.createElement("INPUT");
newInput.id = "text" + instance;
newInput.name = "text" + instance;
newInput.type = "text";
instance++;
document.body.insertBefore(document.createElement("BR"), element);
document.body.insertBefore(newInput, element);
}
</script>
</head>
<body>
<LABEL for="text1">First name: </LABEL>
<input id="text1" type="text" name="text1">
<LABEL for="text2">Last name: </LABEL>
<input id="text2" type="text" name="text2">
<input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</body>
function newTextBox(element)
{
instance++;
// Create new input field
var newInput = document.createElement("INPUT");
newInput.id = "text" + instance;
newInput.name = "text" + instance;
newInput.type = "text";
var label = document.createElement("Label");
label.htmlFor = "text" + instance;
label.innerHTML="Hello";
instance++;
document.body.insertBefore(document.createElement("BR"), element);
document.body.insertBefore(newInput,element);
document.body.insertBefore(label, newInput);
Note that for attribute of the label tag, corresponds to the property htmlFor fo the label object in javascript
The example from Vincent does not work.
Try this:
var newlabel = document.createElement("Label");
newlabel.setAttribute("for",id_from_input);
newlabel.innerHTML = "Here goes the text";
parentDiv.appendChild(newlabel);
<div id="somediv">
some div
</div>
<script>
var instance = 0;
function newTextBox(element){
instance++;
// Create new input field
var newInput = document.createElement("INPUT");
newInput.id = "text" + instance;
newInput.name = "text" + instance;
newInput.type = "text";
var newlabel = document.createElement("Label");
newlabel.setAttribute("for","text" + instance);
newlabel.innerHTML = "Here goes the text";
document.getElementById("somediv").appendChild(newlabel);
document.getElementById("somediv").appendChild(newInput);
}
</script>