We Keep Coding

Creating a textbox from a dropdownlist in javascript

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>

changing text for a selected option only when its in selected mode

I am not sure if I confused everyone with the above title. My problem is as follows.
I am using standard javascript (no jQuery) and HTML for my code. The requirement is that for the <select>...</select> menu, I have a dynamic list of varying length.
Now if the length of the option[selectedIndex].text > 43 characters, I want to change the option[selectecIndex] to a new text.
I am able to do this by calling
this.options[this.selectedIndex].text = "changed text";
in the onChange event which works fine. The issue here is once the user decides to change the selection, the dropdownlist is showing the pervious-selected-text with changed text. This needs to show the original list.
I am stumped! is there a simpler way to do this?
Any help would be great.
Thanks

You can store previous text value in some data attribute and use it to reset text back when necessary:
document.getElementById('test').onchange = function() {
var option = this.options[this.selectedIndex];
option.setAttribute('data-text', option.text);
option.text = "changed text";
// Reset texts for all other options but current
for (var i = this.options.length; i--; ) {
if (i == this.selectedIndex) continue;
var text = this.options[i].getAttribute('data-text');
if (text) this.options[i].text = text;
}
};
http://jsfiddle.net/kb7CW/

You can do it pretty simply with jquery. Here is a working fiddle: http://jsfiddle.net/kb7CW/1/
Here is the script for it also:
//check if the changed text option exists, if so, hide it
$("select").on('click', function(){
if($('option#changed').length > 0)
{
$("#changed").hide()
}
});
//bind on change
$("select").on('change', function(){
var val = $(":selected").val(); //get the value of the selected item
var text = $(':selected').html(); //get the text inside the option tag
$(":selected").removeAttr('selected'); //remove the selected item from the selectedIndex
if($("#changed").length <1) //if the changed option doesn't exist, create a new option with the text you want it to have (perhaps substring 43 would be right
$(this).append('<option id="changed" value =' + val + ' selected="selected">Changed Text</option>');
else
$('#changed').val(val) //if it already exists, change its value
$(this).prop('selectedIndex', $("#changed").prop('index')); //set the changed text option to selected;
});

Shuffle selected text on <textarea> using JavaScript

When I select some texts on the <textarea> using my mouse, how can I shuffle/scramble it by clicking on a button?
I've searched for something similar to what I want here on SO, and I saw some who use substring, selectionStart, and selectionEnd.
What I want is: when I select some texts with my mouse, it will be shuffled/scrambled when I click on a button, and the rest of the texts on the <textarea> that are not selected should remain untouched/intact.
I just want to perform an action on the selected texts.
It's more similar to a rich text editor like when you select on some texts, then click on bold button, the selected texts will become bold.
P.S.
It should be shuffled by individual characters.
EDIT:
Got it! I just needed to separate the selection string. My code works now. This is very helpful - https://stackoverflow.com/a/9605191/1101391
Unfortunately, IE 9 and below does not support selectionStart and selectionEnd properties on <input> and <textarea>. Here's the solution that worked for me - https://stackoverflow.com/a/9276457/1101391

You have access to the full text and know the substring where the selection starts and ends. Try something like this:
var txtArea = document.getElementById("foo");
var before = txtArea.value.substr(0, txtArea.selectionStart);
var selection = txtArea.value.substr(txtArea.selectionStart, txtArea.selectionEnd + 1);
var after = txtArea.value.substr(txtArea.selectionEnd, txtArea.value.length);
txtArea.value = before + scrambleThisString(selection) + after;

Suppose you name the textarea with ID content:
var textarea = document.getElementById('content');
var content = textarea.value;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var before = content.slice(0, start);
var after = content.slice(end);
var selected = content.substring(start, end);
selected = shuffleStringByMagic(selected);
textarea.value = before + selected + after;

javascript created label inserted into wrong position

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/

How to use Javascript to create a checked radioButton in IE?

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