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);
Related
I am trying to create an "on an off switch" for a project where I can get a questionnaire group of elements. When you run the following code, you will see a div appear on the screen in a group of elements. The text is above the checkbox, I need them to be side by side. Any ideas?
var bigDiv = document.createElement("div")
var fem = document.createElement("P");
var t = document.createTextNode("FooText");
var femI = document.createElement("INPUT");
bigDiv.style.display = 'block';
fem.appendChild(t);
bigDiv.appendChild(fem);
femI.setAttribute("type", "checkbox");
bigDiv.appendChild(femI);
bigDiv.setAttribute("id", "demChoosing")
document.body.appendChild(bigDiv);
P.S - the key words 'fem' and 'demChoosing' don't mean anything
The reason for that is simple: p elements are rendered as block-elements. So they use the whole available width. You can try to set the display type to "inline" or "inline-block" to put the p tag and the input tag in the same line.
var bigDiv = document.createElement("div")
var fem = document.createElement("P");
var t = document.createTextNode("FooText");
var femI = document.createElement("INPUT");
bigDiv.style.display = 'block';
fem.appendChild(t);
bigDiv.appendChild(fem);
femI.setAttribute("type", "checkbox");
fem.setAttribute('style', 'display: inline-block;')
bigDiv.appendChild(femI);
bigDiv.setAttribute("id", "demChoosing")
document.body.appendChild(bigDiv);
I am attempting to remove an entire element and recreate it on an event:
I cannot seem to get this right despite several variations of the same code:
For example on event, I need to remove the element and then recreate the same element. I do not want to remove the text:
This is what I have tried (experimental): The result is inconsistent and the code is repetitive.
function removeCreate(){
var input = document.getElementById('display');
var body = document.getElementsByTagName('body')[0];
if(!!input){
input.parentNode.removeChild(input);
input = document.createElement('input');
input.id = 'display';
input.setAttribute('type',"text");
body.appendChild(input);
} else {
input.parentNode.removeChild(input);
input = document.createElement('input');
input.id = 'display';
input.setAttribute('type',"text");
body.appendChild(input);
}
}
Your reason for removing your input element and re-creating it is quite unclear, but let's say it gets modified somehow and you want to "reset" its state.
When you say "I do not want to remove the text", the most probable thing I understand is that you want to keep the current value that the user has typed into your input.
If this fits your situation, then you could simply hold a "template" of your input element in memory, so that you can clone it when needed and use the clone to replace the one in DOM. When doing so, retrieve first the current input value, and inject it back into the cloned input.
Result:
var inputTemplate = document.createElement('input');
inputTemplate.setAttribute('type', 'text');
function cloneInput() {
var newInput = inputTemplate.cloneNode(true);
newInput.id = 'display';
return newInput;
}
var input = document.getElementById('display');
var body = document.getElementsByTagName('body')[0];
if(!!input){
// First retrieve the current value (what the user has typed / default value)
var value = input.value;
input.parentNode.removeChild(input);
input = cloneInput();
input.value = value; // Re-inject the value.
body.appendChild(input); // Note that this would put your input at the bottom of the page.
} else {
//input.parentNode.removeChild(input); // useless?
input = cloneInput();
body.appendChild(input);
}
I'm writing a simple to-do list. that a user input a text and the it's added as a checkbox. But i'm getting this error i have no idea what's it about
INVALID_CHARACTER_ERR: DOM Exception 5
window.onload = function(){
var textBox = document.getElementById("taskInput"),
submitBtn = document.getElementById("submit"),
taskPool = document.getElementById("todoTask");
submitBtn.addEventListener("click", function(){
var task = document.createElement("<input type=\"checkbox\">" + textBox.value + "</input>");
taskPool.appendChild(task);
});
}
document.createElement takes the tag name only as its parameter, you'll have to set the type and value after
var task = document.createElement("input")
task.type = "checkbox";
task.value = textBox.value;
Also input tags are empty, there are no closing tag or inner html, the value is set as an attribute in markup.
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/
I have a column of input boxes and have a button for the last row to add more input boxes below the last input box. Is there a best way to do this ?
You can go about something like this:
function addTextBox()
{
var container = document.getElementById('container');
var txt = document.createElement('input');
txt.type = 'text';
txt.name = "my name";
container.appendChild(txt);
}
In the above code, container is supposed to be your column id which contains text boxes.