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/
Related
I'm a bit new to javascript and I'm having a hard time figuring out how to dynamically create textboxes from a dropdownlist using javascript. Here's my issue in detail. Here is my dropdownlist:
<asp:DropDownList ID="ddlFlightSelection" runat="server" CssClass="dropbtn" onclick="createTextForm()">
<asp:ListItem>PLEASE CHOOSE A FLIGHT</asp:ListItem>
<asp:ListItem>ONE-WAY</asp:ListItem>
<asp:ListItem>ROUND-TRIP</asp:ListItem>
<asp:ListItem>MULTI-CITY</asp:ListItem>
</asp:DropDownList>
As you can see, I have a function called createTextForm() in a separate javascript file that I'm trying to figure out.
function createTextForm(){
var input = document.createElement('input');
input.type = "text";
container.appendChild(input);
}
Edit: I appreciate the help everyone, but due to my poor understanding and description of the problem at hand I decided to go with a different solution to my problem. What I did instead was create textboxes that are hidden via CSS, and then just show them based on the selection of the dropdownlist.
So I understand the intent... but I am unfamiliar with asp and how to create another element in the body... which I could google... but anyways... what you are wanting to do is basically...
function createTextForm(){
var input = document.createElement('input');
var container = document.getElementsByTagName('body')[0];
//container could also be obtained with an element with id=my_container like so...
container = document.getElementById('my_container');
//or with a class... which returns an array of elements, so you have to select one
container = document.getElementByClassName('my_containers')[some number to select which element];
//if you have an element with id='dropDownListFlightSelection', you can use:
container = document.getElementById('dropDownListFlightSelection');
input.type = "text";
container.appendChild(input);
}
here is what you currently have, and it doesn't really make sense, because every change on the select will add an input ...
const container = document.getElementById('input_container')
, selector = document.getElementById('ddlFlightSelection')
;
let count = 0
;
selector.onchange = evt =>
{
let input = document.createElement('input');
input.type = "text";
input.placeholder = `${selector.value} - ${++count}`
container.appendChild(input);
}
<select ID="ddlFlightSelection" class="dropbtn">
<option>PLEASE CHOOSE A FLIGHT</option>
<option>ONE-WAY</option>
<option>ROUND-TRIP</option>
<option>MULTI-CITY</option>
</select>
<div id="input_container"></div>
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);
I have two buttons. On first buttons click, I needs to change input text type to select box & on second buttons click, change the select box to input text type through Javascript. Thanks.
Thanks a lot #JoshMein, #Bergi, #Rocket for your time & suggestions. It helped me a lot. I also tried in diff way as follow.
function changeToText() {
var obj = document.getElementById('disease1CurrentObject');
document.getElementById('divDisease1Current').removeChild(document.getElementById(obj));
var element = document.createElement('input');
element.setAttribute('type', 'text');
element.setAttribute('value', 'myVal');
element.setAttribute('id', 'myId');
document.getElementById('divDisease1Current').appendChild(element);
}
function changeToSelect() {
var obj = document.getElementById('disease1CurrentObject');
document.getElementById('divDisease1Current').removeChild(obj));
var element = document.createElement('select');
element.setAttribute('type', 'text');
element.setAttribute('value', 'myVal');
element.setAttribute('id', 'myId');
document.getElementById('divDisease1Current').appendChild(element);
}
& 1 more, setAttribute() is not supported by IE version less than 8 or 8.
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.
I was trying to create a checked radiobutton by using following code in IE7. But it doesn't work.
var x = document.createElement("input");
x.type="radio";
x.checked=true; //I also tried setAttribute here which doesn't work either.
var spn=document.createElement("span");
spn.appendChild(x);
document.body.appendChild(spn);
I found that I could put x.checked=true after appendChild statement to make it work. I also noticed that when I change "radio" to "checkbox", it can be checked without changing the order of statements.
I am really confused by these facts. Am I doing something wrong in the above code?
SOLUTION: Finally, I understand it's a IE bug. When appending the new radio button to its parent, the checked property will be cleared. So, I have to call "x.checked=true;" as the last statement.
It's a weird IE thing....you need to use innerHTML or IE's extended createElement because "expando" properties don't work right on radio buttons. http://cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-created.html
var x = document.createElement("input");
x.setAttribute('defaultChecked', 'defaultChecked');
x.type="radio";
var spn=document.createElement("span");
spn.appendChild(x);
document.body.appendChild(spn);
This should do the trick.
This isn't jQuery : you gotta build the properties yourself:
var x = document.createElement("input");
x.type = 'radio';
x.checked = true;
But if it were jQuery:
$(document).ready(function() {
var x = $("<input type='radio' checked='checked' value='value'/>");
$("body").append($("<span></span>").append(x));});
var input = document.createElement("input");
input.setAttribute("type", "radio");
input.setAttribute("checked", "checked");
var span = document.createElement("span");
span.appendChild(input);
document.body.appendChild(span);