i am adding a input file tag and a link using a javascript function, works great. Now i want to add also a radio button and a text whit this radio... i can add the radio whit no problems, but the text... idk how.
here is the code...
addCampo = function () {
nDiv = document.createElement('div');
nDiv.className = 'archivo';
nDiv.id = 'file' + (++numero);
nCampo = document.createElement('input');
nCampo.name = 'archivos[]';
nCampo.type = 'file';
a = document.createElement('a');
a.name = nDiv.id;
a.href = '#';
a.onclick = elimCamp;
a.innerHTML = ' Eliminar';
portada = document.createElement('input');
portada.name = 'portada';
portada.type = 'radio';
portada.value = '1';
nDiv.appendChild(nCampo);
nDiv.appendChild(portada);
// HERE I WANT A SIMPLE TEXT SAYING WHATS DOES THE RADIO =)
nDiv.appendChild(a);
container = document.getElementById('adjuntos');
container.appendChild(nDiv);
}
this is working just fine! the only thing i dont know is how to add text whitout tags...
You need
text = document.createTextNode('what the radio does');
nDiv.appendChild(text);
Although it's better to use a label, because then you don't have to sharp-shoot the radio button. In that case you'd need:
portada.id = 'portada';
text = document.createElement('label');
text.innerText = 'what the radio does';
text.for = 'portada';
nDiv.appendChild(text);
Edit: as mentioned in the comments, innerText is not necessarily supported by all browsers, sorry! Just use innerHTML instead, use textContent if you don't care about old versions of IE, or create a text node and add it to the label node.
Related
I have a button that creates two input fields when someone clicks on the add button. I want to add a font awesome icon right next to the second input field. I tried adding it by using appendChild and innerHTML but that doesn't work at all I just don't get the icon rendered, how can I do it? Here is my code:
const mainParent = document.getElementById('main-parent');
const newPlatformNameInput1 = document.createElement("input");
newPlatformNameInput1.id = index + '_first';
newPlatformNameInput1.classList.add("form-control");
newPlatformNameInput1.classList.add("input");
const newPlatformNameInput2 = document.createElement("input");
newPlatformNameInput2.id = index + '_second';
newPlatformNameInput2.classList.add("form-control");
newPlatformNameInput2.classList.add("input");
const wrapperParent = document.createElement('div');
wrapperParent.id = index + '_parent';
wrapperParent.appendChild(newPlatformNameInput1);
wrapperParent.appendChild(newPlatformNameInput2);
mainParent.appendChild(wrapperParent);
mainParent.appendChild('<i class="fas fa-trash"></i>');
AppendChild expects a node to be passed not plain HTML.
icon = document.createElement("i");
icon.setAttribute("class","fas fa-trash");
mainParent.appendChild(icon);
So I have created elements in my html using javascript. The only problem is that my button is not showing up. Following is my code:
var search_div1 = document.createElement("div");
search_div1.className = "input-group row-fluid";
var search_div2 = document.createElement("div");
search_div2.className = "span4 offset4";
var search_input = document.createElement("input");
search_input.className = "form-control offset8";
search_input.id = "searchText";
search_input.type = "text";
search_input.placeholder = "Search...";
search_input.style.width = "200px";
search_input.style.marginLeft = "550px";
var search_span = document.createElement("span");
search_span.className = "input-group-btn";
search_span.width = "50px";
var search_button = document.createElement("button");
search_button.type = "submit";
search_button.id = "search";
search_button.name = "search";
search_button.className = "btn btn-flat";
search_button.onclick = myFunction;
var search_icon = document.createElement("i");
search_icon.className = "fa fa-search";
search_button.appendChild(search_icon);
search_span.appendChild(search_button);
search_input.appendChild(search_span);
search_div2.appendChild(search_input);
search_div1.appendChild(search_div2);
Everything else is showing perfectly except for the search_button and I have created buttons like this that work perfectly. Can someone kindly assist me? Thanks in advance.
You're using .appendChild() incorrectly. For example, this line of code:
search_input.appendChild(search_span);
Is trying to make a <span> a child of an <input>. That is not legal HTML.
Remember x.appendChild(y) makes y a child of x in the DOM hierarchy.
We can't really advise what the exact right sequence of appending is because we don't know what HTML structure you're trying to end up with. If you show us what you want the DOM hierarchy to look like when you're done, we can help with the proper code to achieve that.
The output of code below produces a line of text and then a button below the text.
How can I place the button beside the text?
var count = document.createTextNode('My text: ');
document.getElementById('container').appendChild(count);
var f = document.createElement('form');
f.setAttribute('method','POST');
f.setAttribute('action','test');
var text = document.createElement('input');
text.setAttribute('type','hidden');
text.setAttribute('name','text');
text.value = 'Hey! - hidden value';
var s = document.createElement('input'); //input element, Submit button
s.setAttribute('type','submit');
s.setAttribute('value','Hey!');
f.appendChild(text);
f.appendChild(s);
document.getElementById('container').appendChild(f);
s.onclick=function(){
f.submit();
};
jsFiddle: http://jsfiddle.net/bobbyrne01/hk0annoq/
The display attribute of form elements is set to block by default, which means that when they're created they'll skip one line within a paragraph. To solve this, one approach would be to make the form's display atrribute to inline or inline-block:
f.style.display = 'inline';
Here:
var f = document.createElement('form');
f.setAttribute('method','POST');
f.setAttribute('action','test');
f.style.display = 'inline';
Your updated fiddle here.
Update:
Expanding epascarello's answer, a more correct approach would be:
var f = document.createElement('form');
f.setAttribute('method','POST');
f.setAttribute('action','test');
// Create your label
var label = document.createElement('label');
// Set its text
var count = document.createTextNode('My Text: ');
var text = document.createElement('input');
text.setAttribute('type','hidden');
text.setAttribute('name','text');
text.value = 'Hey! - hidden value';
var s = document.createElement('input'); //input element, Submit button
s.setAttribute('type','submit');
s.setAttribute('value','Hey!');
// Append your text, hidden input and submit button to the label
label.appendChild(count);
label.appendChild(text);
label.appendChild(s);
// Append the label to the form
f.appendChild(label);
// Append the form to the container
document.getElementById('container').appendChild(f);
Because it gives the document better semantics.
What you have
<text node - inline>
<form - block - causes new line>
You would need to append it inside the form, not the container.
f.appendChild(count);
f.appendChild(text);
f.appendChild(s);
document.getElementById('container').appendChild(f);
You should also look at using a label element since that is how you are treating that text.
It's easier than what they say and no CSS needed, look at HERE
You just had to put 'count' inside the form rather than the container
f.appendChild(count);
instead of
document.getElementById('container').appendChild(count);
Can anybody give me a working code for creating dynamic radio buttons in html (and javascript) which works in IE, Firefox and Chrome?
I saw a lot of codes in the internet, but none of them worked for me.
I also need them to have a label. And I don't want to use Jquery.
Tried this code:
function test() {
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute('type', 'radio');
element.setAttribute('value', 'source');
element.setAttribute('name', 'source');
element.setAttribute('id', 'source_id');
var foo = document.getElementById("divTxt");
foo.appendChild(element);
var newlabel2 = document.createElement("Label");
newlabel2.for = "source_id";
newlabel2.innerHTML = "first name ";
foo.appendChild(newlabel2);
}
var radio1 = document.createElement('input');
radio1.id = 'myRadioId1';
radio1.type = 'radio';
radio1.name = 'radioGroup';
radio1.value = 'someValue1';
var radio2 = document.createElement('input');
radio2.id = 'myRadioId2';
radio2.type = 'radio';
radio2.name = 'radioGroup';
radio2.value = 'someValue2';
var label1 = document.createElement('label');
label1.htmlFor = radio1.id;
label1.innerHTML = 'label for radio1';
var label2 = document.createElement('label');
label2.htmlFor = radio2.id;
label2.innerHTML = 'label for radio2';
Appending to container:
var container = document.getElementById('mydivid');
container.appendChild(radio1);
container.appendChild(label1);
container.appendChild(radio2);
container.appendChild(label2);
If you need radio group, you should give them same names. Here is fiddle
The main problem with the code (which you posted in a comment and I copied into the question) is that it contains only a function definition. The function is not called at all, so need to have a statement like test(). Moreover, the function postulates that there is an element with id=divTxt on the page, and that element must appear before the calling the function. The following code successfully creates a radio button element and its label and inserts them into an existing element on the page:
<!DOCTYPE html>
<title>Demo</title>
<div id=divTxt></div>
<script>
function test() {
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute('type', 'radio');
element.setAttribute('value', 'source');
element.setAttribute('name', 'source');
element.setAttribute('id', 'source_id');
var foo = document.getElementById("divTxt");
foo.appendChild(element);
var newlabel2 = document.createElement("Label");
newlabel2.setAttribute('for', "source_id");
newlabel2.innerHTML = "first name ";
foo.appendChild(newlabel2);
}
test();
</script>
(You cannot use the for property in JavaScript; the property name is htmlFor, but it is probably simpler to set the for attribute as above.)
However, radio buttons should always appear in groups, due to their nature, so you should use a function with some arguments to generate a set of radio buttons according to a common pattern. Like this:
<!DOCTYPE html>
<title>Demo</title>
<div id=divTxt></div>
<script>
function radio(name, value, text) {
var element = document.createElement("input");
var id = name + value;
element.setAttribute('type', 'radio');
element.setAttribute('value', value);
element.setAttribute('name', name);
element.setAttribute('id', id);
var foo = document.getElementById("divTxt");
foo.appendChild(element);
var newlabel2 = document.createElement("label");
newlabel2.setAttribute('for', id);
newlabel2.innerHTML = text;
foo.appendChild(newlabel2);
}
radio('sex', '0', 'male');
radio('sex', '1', 'female');
</script>
You should minimally enhance this by adding code that adds line breaks between the items, or preferably put each pair of a button and its label inside a div elemebt.
So I have the following html:
<div id="divForComponents">
<input type="button" value="+" onclick="addFilter('divForComponents')"/>
</div>
And in my script file:
function addFilter(divId){
var div = document.getElementById(divId);
var label = document.createElement("label");
var text = document.createTextNode("Filter by:");
label.appendChild(text);
div.appendChild(label);
var filter = document.createElement("select");
filter.name = "selectName";
filter.options[0] = new Option("selection 1","value 1");
filter.options[1] = new Option("selection 2","value 2");
filter.options[2] = new Option("selection 3","value 3");
filter.options[3] = new Option("selection 4","value 4");
div.appendChild(filter);
var input = document.createElement("input");
input.type = "text";
input.name = "inputName";
div.appendChild(input);
}
Now the select component and the input field are added properly, but the label is added before the button I already had on that div. I would like and expect to obtain a positioning:
Button Label Select Input
Instead I get:
Label Button Select Input
The browser I'm testing on is Chromium, not sure if that counts for anything here.
Regards,
Bogdan
Is it actually inserting the label before the button or just visually showing up that way? It sounds like you may have a CSS style that is telling the label to float left.
For one, your function is named addComponents() and yet you use addFilter(). I've just tried your code and changed addFilter() to addComponents() and the label has been set properly.
Works fine in chrome when your function is named properly:
http://jsfiddle.net/AlienWebguy/bVzwr/