Radio form value not showing up? - javascript

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

Dynamically add Radio Button Labels - JavaScript

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;

how to add a childNode to an element in javascript

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.

Creating a Dynamic form with Javascript

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

To do list javascript-something is wrong with my code/order

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!

PHP text boxes dynamic ID generating

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

Categories