I am a still a newbie so sorry for any mistakes. I have searched a lot and couldn't solve my problem. I dynamically created this radio input:
var radio_input = document.createElement('input');
radio_input.type = "radio";
radio_input.name = "test_input"
radio_input.value = "teeest";
radio_input.appendChild(my_form);
However I can't get the input value to show up. I get something similar to this:
(but one instead of 3)
I want to have "test" written in the left side of the input... Can someone help me?
As #RobertoLinare said in his comment, you can create a div and append the label:
var radio_input = document.createElement('input');
var label = document.createElement('label');
var div = document.createElement('div');
radio_input.type = "radio";
radio_input.name = "test_input"
radio_input.value = "teeest";
label.innerHTML = "Label";
document.getElementById("my_form").appendChild(div);
div.appendChild(label);
div.appendChild(radio_input);
<form id="my_form">
</form>
Html :
<form id="my_form"></form>
JS :
var myForm = document.getElementById("my_form");
// Clear previous contents of the container
while (myForm.hasChildNodes()) {
myForm.removeChild(myForm.lastChild);
}
var radio_input = document.createElement("input");
radio_input.type = "radio";
radio_input.name = "test_input";
radio_input.value = "teeest";
var label = document.createElement('label');
label.innerHTML = "Label Title ";
myForm.appendChild(radio_input);
myForm.appendChild(label);
Related
Having trouble getting the a label dynamically assigned to a radio button. all of the code is working except the innerHTML. Cannot spot why. Thanks in advance for any help.
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
</form>
<br>
<button onclick="addRadio()">Add radio buttons!</button>
<script>
// This function will add a new Radio buttons to the above
count = 0;
function addRadio()
{
count++;
//Create input type
var myRadio = document.createElement("input");
var myName = document.createElement("testRadio");
var myBreak = document.createElement("br");
var myLabel = document.createElement("label");
var labelMessage = "Radio Button: " + count;
var labelId = "l" + count;
myRadio.setAttribute("type", "radio");
myRadio.setAttribute("name", "testRadio");
myRadio.setAttribute("value", "Radio Button: " + count);
myLabel.setAttribute("for", labelId);
myRadio.setAttribute("id", labelId);
document.getElementById('myForm').appendChild(myRadio);
document.getElementById('myForm').appendChild(myLabel);
document.getElementById('myForm').appendChild(myBreak);
document.getElementById('labelId').innerHTML = 'labelMessage';
}
</script>
</body>
</html>
The label element might not be inserted by the next line itself. It is better to do
myLabel.innerHTML = 'labelMessage';
As you have the element already in a variable.
There is a tiny error in the code.
Before the .innerHTML you get the element by id 'labelId' as a string.
You need to select with the labelID as a var so:
document.querySelector(`label[for="${labelId}"]`).innerHTML = labelMessage;
I managed to add an input(text-field of login) childNode to a label(login)
<script>
let wrapperr = document.getElementById("dynamic-field");
var label1 = document.createElement("label");
label1.appendChild(document.createTextNode("login"));
wrapperr.appendChild(label1);
linebreak = document.createElement("br");
label1.appendChild(linebreak);
var input1 = document.createElement("input");
label1.insertBefore(input1, label1.children[1]).style.width = "94%";
</script>
now I want to add to that input a childNode of label(password) and to that label another childNote for the password-field.
below is my try
<script>
var label2 = document.createElement("label");
label2.appendChild(document.createTextNode("password"));
line_break.insertBefore(label2, line_break.children[1]).style.width = "94%";
var input2 = document.createElement("input");
label2.insertBefore(input2, label2.children[1]).style.width = "94%";
</script>
You can't add a child to a BR element - only to its parent. Doing so, will automatically make it the last child, unless you specifically choose otherwise.
Lets start again,
I would like to loop through a few values and then append them to a form to show a select box,
This is my button to add a new field in HTML:
<input type="button" value="Add Field" onclick="addField()">
Then the addField Javascript:
function addField() {
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('name', "newDrop[]");
input.setAttribute('id', 'newDrop');
input.setAttribute('class', 'newDrop');
input.setAttribute('placeholder', 'Options');
document.getElementById('dropdown').appendChild(input);
};
As you can see that this will append a new form with the attributes above.
Once I am happy with the values in each field and submit the additional fields with the below HTML:
<input type="button" value="Create Field" onclick="addInput('dynamicInput')">
I am hoping to create a dynamically created select with the details I added in the fields.
What I would like to happen is that I can loop through the values and create the options with the values that have been entered in the fields. My Javascript for this is below:
function addInput(divName) {
//other case here
case 'dropdown':
myInputs[counter]['atts'] = [];
myInputs[counter]['atts']['label'] = document.getElementById('fieldDropDownLabel').value
myInputs[counter]['atts']['one'] = document.getElementsByName('newDrop[]')
break;
}
var dd = document.createElement('select');
//other cases go here
case 'dropdown':
var label = document.createElement('label');
label.textContent = myInputs[counter]['atts']['label'];
label.setAttribute('for', myInputs[counter]['atts']['label']);
label.setAttribute('id', 'dropdown');
f.appendChild(label);
dd.setAttribute('name', myInputs[counter]['atts']['label'])
//default option
var option = document.createElement('option');
option.text = 'Please Select';
option.value = '';
dd.add(option, dd.options[null]);
//additional options
var option1 = document.createElement('option')
var newDrop = myInputs[counter]['atts']['one']
for(i=0; i < newDrop.length; i++)
{
option1.text = myInputs[counter]['atts']['one'];
option1.value = myInputs[counter]['atts']['one'];
dd.add(option1, dd.options[null]);
}
counter++;
f.appendChild(dd);
break;
I am just unable to get the values to show in the select options. Hopefully this is better than the last post.. Is there any chance someone can help?
Thanks
I'm building a small to do list and everything worked fine so far until I included a checkbox. now when I click on the button, nothing happens and neither do I see a checkbox. There must be something wrong with the order of code-does someone know how I need to rearrange the code and WHY?
Html code:
<body>
<h1>To Do List</h1>
<p><input type="text" id="textItem"/><button id="add">Add</button></p>
<ul id="todoList">
</ul>
</body>
Javascript code:
function addItem() {
var entry = document.createElement("li");
var checkBox = document.getElementById("input");
checkBox.type = "checkbox";
var span = document.createElement("span");
span.innerText = entry;
var textItem = document.getElementById("textItem");
entry.innerText = textItem.value;
var location = document.getElementById("todoList");
entry.appendChild(checkBox);
entry.appendChild(span);
location.appendChild(entry);
}
var item = document.getElementById("add");
item.onclick = addItem;
UPDATED - I've spotted 4 issues . Follow Below :
1st : When you create the check box you should be using setAttribute method to specify input type : checkbox.setAttribute("type" , "checkbox")
2nd : Your checkbox variable should be creating an input element : var checkBox = document.createElement("input");
3rd : You should be using innerHtml instead of innerText as you are referencing a list ELEMENT stored in your entry variable : span.innerHtml = entry;
4th: Really minor but you should grab your item and attach an event to the item before your function :
var item = document.getElementById("add");
item.addEventListener("click" , addItem)
Just change your javascript to the following :
var item = document.getElementById("add");
item.addEventListener("click" , addItem)
function addItem() {
var entry = document.createElement("li");
var checkBox = document.createElement("input");
checkBox.setAttribute("type" , "checkbox");
var span = document.createElement("span");
span.innerHtml = entry;
var textItem = document.getElementById("textItem");
entry.innerText = textItem.value;
var location = document.getElementById("todoList");
entry.appendChild(checkBox);
entry.appendChild(span);
location.appendChild(entry);
}
Example Here : http://codepen.io/theConstructor/pen/pyPdgg
Good Luck!
i would be very thankful if anyone could help me with this
i am trying to use php uploader plugin and upload multiple files.
i want to assign unique ids to the generating text box fields.
but whenever I am using a for loop to assign id , the text boxes won't show up
here is my code
var input = document.createElement('input');
input.value = task.FileName;
input.id = "textBox_";
for(var i = 0; i<0; i++){
input.id = "textBox_'.i.'";
}
document.body.appendChild(input);
}
the help will be appreciated ..
You are not appending the value of i properly. In js concatenation is done using + operator not using .
input.id = "textBox_"+i;
Place
document.body.appendChild(input);
inside the for loop like shown below as it has to generate input each time until loop ends.
for(var i = 0; i<0; i++)
{
input.id = "textBox_"+i;
document.body.appendChild(input);
}
Change input.id = "textBox_'.i.'"; to input.id = "textBox_"+i;
Concatenation in js is cone using + operator
So your code will be:
var input = document.createElement('input');
input.value = task.FileName;
input.id = "textBox_";
for(var i = 0; i<0; i++){//Condition of this loop is wrong in the sence it wont execute even once so fix it as your needs
input.id = "textBox_"+i;
document.body.appendChild(input);
}
}