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>

Create input labels from "for" attribute, without changing HTML

Having an issue learning JavaScript in a college course. This is my last project and the problem I am having with the HTML code is creating an input field for a label without an id, it has a "for" element though. It cannot be created with JQuery or JSON.
So the HTML looks something like this:
<"label for="car">What car do you have? <"span class="required"><"/span><"/label">
So I was thinking I could create the input text field and add it to the DOM:
// Create the input field
var firstCar = document.createElement("input");
// Create the type node and store what the field will be text
var newType = document.createTypeNode("text");
// Create a new ID of car and attach it to the input
var newID = document.createIdNode("car")
/* put the created Element within the HTML with ["this determines which label it will be under"]:*/
var position = document.getElementByTagName("label")[1];
// Insert the element into the position
position.appendChild(firstCar);
I ran this and it says that TypeNode is not a function in my browser.

That's not how you set the type and id. Try this
var firstCar = document.createElement("input");
firstCar.type = "text"; // set the type
firstCar.id = "car"; // set the ID
var position = document.getElementsByTagName("label")[1]; // it should be getElements... not getElement...
position.appendChild(firstCar);

Readonly view of an editable form with values as plain text

How to convert a form into readonly view by calling a function? I don't want to show the values in a disabled input field but as plain text.
i am using javascript for achieving it.

Fields doesn't have to be disabled, thay might be readonly as well, you would just need to iterate through all the input fields, apply readonly property and perhaps some css class that will make them look more like plain text rather than input field.
var inputs = document.querySelectorAll('input[type=text]'), i;
for (i = 0; i < inputs.length; ++i) {
inputs[i].classList.add('input-readonly');
inputs[i].setAttribute('readonly', true);
}
proof of concept:
https://jsfiddle.net/4rkn5qda/
PS: You will also have to take under consideration other type of fields.

try this using jQuery:
var myform = $('.myform')
myform.find('input').each(function() {
var currentEl = $(this),
currentVal = $(this).val();
myform.after(currentVal + '<br>');
});
myform.hide();

setAttribute not working

I am making a plugin for form validation as practice, but for some reason after I create a h2 element and try to set it's attribute, it is not working. Here is the code
var testing = function(regex, value, error_msg, error_msg_field_id){
var pattern = new RegExp(regex);
if (!pattern.test(value)){
var ele = document.createElement("H2");
var node = document.createTextNode(error_msg);
ele.setAttribute('style', 'color:white');
alert("hi");
jQuery(error_msg_field_id).append(node);
}
}
the text appears with no problem, but it is not in white color. This make no sense at all to me

You are using setAttribute correctly, but you are setting the property on your h2-element, which is never actually inserted in your DOM.
You can change and simplify the relevant section of your code to:
var ele = document.createElement("H2");
ele.textContent = error_msg;
ele.setAttribute('style', 'color:white');
jQuery(error_msg_field_id).append(ele);
The usage of jQuery here is also not necessary. You can simply use
document.querySelector("#" + error_msg_field_id).appendChild(ele);
which is equally simple.

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/