<form name="txt" method="post">
<input type="text" name="select" id="select" onclick="return selectbox();">
</form>
Now through js or html can I change my textbox into a select or a list box. Is it possible by any way.
//js code
function selectbox()
{
var select=document.getElementById('select');
select.innerHTML="<select><option>1</option><option>2</option></select>";
}
Something like this should happen. In the place of the textbox the below code should appear
//new textbox
<select><option>1</option><option>2</option></select>
Yes, for example:
var select = document.createElement("select");
select.innerHTML = "<option value='1'>One</option>" +
"<option value='2'>Two</option>" +
"<option value='3'>Three</option>";
select.id = "select";
select.name = "select";
select.onclick = function(){return selectbox()};
var currentSelect = document.getElementById("select");
currentSelect.parentNode.replaceChild(select, currentSelect);
select.focus(); //Focus on the element
This code snippet creates a <select> element, and adds new options to it through .innerHTML. Then, the attributes are set. Finally. the script selects the current element with id="select" from the HTML document, and replaces the element by the newly created element.
Be more specific about what and how. You can try following
function selectbox(Sender){
var select = document.createElement('select');
//UPDATE
for(var i=1; i<=2; i++)
select.options[select.options.length] = new Option(i, i);
Sender.parentNode.appendChild(select);
Sender.parentNode.removeChild(Sender);
}
Related
I'm trying to append the defined select element to the document.
This answer, describes quite well about fixed arrays, but in my case I have a slice which is applied to the template by ExecuteTemplate method, so the value of <option> tags are defined by slice values.
Here is my code which does not work, as it should:
<html>
<input type="number" id="count">
<select id="select">
{{ range .Slice }}
<option value="{{ .Name }}">{{ .Name }}</option>
{{ end }}
</select>
<div class="test"></div>
<button onclick="generateSelects();">Test</button>
</html>
<script>
function generateSelects() {
var count = document.getElementById("count").value;
var i;
var select = document.getElementById("select");
var divClass = document.getElementsByClassName("test");
for (i = 0; i < Number(count); i++) {
divclass[0].appendChild(select);
)
}
</script>
What am I looking for is about generating select list based on the user's input. For example if the user enters 2, so two select menu going to appear on the screen.
How can I do this?
First of all make sure that generated selects all have different IDs, in your example they all have the same id which is "select".
Then instead of appending the "original" select element, try to clone it then add its clone to your div.
What I would do is :
function generateSelects() {
var count = document.getElementById("count").value;
var i;
var select = document.getElementById("select");
var divClass = document.getElementsByClassName("test");
for (i = 0; i < Number(count); i++) {
var clone = select.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "some_id";
divclass[0].appendChild(clone);
}
}
Hope it helps!
To append multiple select elements, first you have create a select element. You can not directly get an elementById and append different element as child.
<script>
function generateSelects() {
var count = document.getElementById("count").value;
var i;
var divClass = document.getElementsByClassName("test");
for (i = 0; i < Number(count); i++) {
var option = document.createElement("OPTION");
option.setAttribute("value", "optionvalue");
var select = document.createElement("SELECT");
select.appendChild(option);
divclass[0].appendChild(select);
)
}
</script>
function populateList(givenID)//givenID from the select tag
{
var select = document.getElementById("givenID"),
listData = ["1","2"];
for(var i = 0; i < listData.length; i++)
//Loops through array and creates a new DOM node and appends array contents to the object
{
var option = document.createElement("OPTION"),
txt = document.createTextNode(listData[i]);
option.appendChild(txt);
option.setAttribute("value",listData[i]);
select.insertBefore(option,select.lastChild);
}
}
<body >
<select id="slt" whenpageloads="populateList">
<!--When the page loads the select tag will be populated -->
<option>
default
</option>
</select>
</body>
You can call onload like Arun has mentioned on body load.
<body onload="populateList('slt')">
or
This will be better choice if you want to load more than one select boxes.
window.onload = function() {
populateList('slt');
};
Apart from that there was one more mistake in your code, as givenID is variable.
var select = document.getElementById(givenID);
instead of
var select = document.getElementById("givenID");
function populateList(givenID)//givenID from the select tag
{
var select = document.getElementById(givenID);
listData = ["1","2"];
for(var i = 0; i < listData.length; i++)
{
var option = document.createElement("OPTION"),
txt = document.createTextNode(listData[i]);
option.appendChild(txt);
option.setAttribute("value",listData[i]);
select.insertBefore(option, select.lastChild);
}
}
window.onload = function() {
populateList('slt');
};
<body>
<select id="slt">
<option>
default
</option>
</select>
</body>
I need to add the item in a combo box for a particular number of times.This is my code.
for(i=0;i<3;i++)
{
othercompaniesli.innerHTML= '<select onchange="document.location.href = this.options[this.selectedIndex].value;"><option VALUE="http://www.google.com">'+fStr1[0]+'</option> </select>';
}
Here I want to add the fStr1 string 3 times.But it adds only one time.That is the for loop is working but only item value is not appending.Only last value is added in the combo box. Can anyone help me how to append the items into combo box.
var tmpStr = '<select onchange="document.location.href = this.options[this.selectedIndex].value;">';
for(i=0;i<3;i++)
{
tmpStr+= '<option VALUE="http://www.google.com">'+fStr1[0]+'</option> ';
}
tmpStr = '</select>';
othercompaniesli.innerHTML = tmpStr;
try othercompaniesli.innerHTML +=.
Since you are using equal to =, it is re-assigning to the same element
Use append()
$('#othercompaniesli').append('<select onchange="document.location.href = this.options[this.selectedIndex].value;"><option VALUE="http://www.google.com">'+fStr1[0]+'</option> </select>');
Note that your select and option elements are repeating, you need to change it accordingly.
Place select tag out of loop
var selectTag = '<select onchange="document.location.href = this.options[this.selectedIndex].value;">';
for(i=0;i<3;i++) {
selectTag += '<option VALUE="http://www.google.com">'+fStr1[0]+'</option>';
}
selectTag +="</select>"
othercompaniesli.innerHTML = selectTag;
What you are doing is the inside the loop you are ending your select tag , so every element will have it own select opening and closing tag. and you are just updating your innerHTML with the newer element thats why its getting the last element.
var openingTag= '<select onchange="document.location.href = this.options[this.selectedIndex].value;">';
for(i=0;i<3;i++)
{
openingTag+= '<option VALUE="http://www.google.com">'+fStr1[0]+'</option> ';
}
openingTag= '</select>';
othercompaniesli.innerHTML = openingTag;
var select= $('mySelect');
var opt = new Option("OptionTitle", "123");
select.selectedIndex = InsertNewOption(opt, select[0]);
function InsertNewOption(opt, element)
{
var len = element.options.length;
element.options[optsLen] = opt;
return len;
}
I want to use the value of a HTML dropdown box and create that number of input boxes underneath. I'm hoping I can achieve this on the fly. Also if the value changes it should add or remove appropriately.
What programming language would I need to do this in? I'm using PHP for the overall website.
Here is an example that uses jQuery to achieve your goals:
Assume you have following html:
<div>
<select id="input_count">
<option value="1">1 input</option>
<option value="2">2 inputs</option>
<option value="3">3 inputs</option>
</select>
<div>
<div id="inputs"> </div>
And this is the js code for your task:
$('#input_count').change(function() {
var selectObj = $(this);
var selectedOption = selectObj.find(":selected");
var selectedValue = selectedOption.val();
var targetDiv = $("#inputs");
targetDiv.html("");
for(var i = 0; i < selectedValue; i++) {
targetDiv.append($("<input />"));
}
});
You can simplify this code as follows:
$('#input_count').change(function() {
var selectedValue = $(this).val();
var targetDiv = $("#inputs").html("");
for(var i = 0; i < selectedValue; i++) {
targetDiv.append($("<input />"));
}
});
Here is a working fiddle example: http://jsfiddle.net/melih/VnRBm/
You can read more about jQuery: http://jquery.com/
I would go for jQuery.
To start with look at change(), empty() and append()
http://api.jquery.com/change/
http://api.jquery.com/empty/
http://api.jquery.com/append/
Doing it in javascript is quite easy. Assuming you've got a number and an html element where to insert. You can obtain the parent html element by using document.getElementById or other similar methods. The method assumes the only children of the parentElement is going to be these input boxes. Here's some sample code:
function addInput = function( number, parentElement ) {
// clear all previous children
parentElement.innerHtml = "";
for (var i = 0; i < number; i++) {
var inputEl = document.createElement('input');
inputEl['type'] = 'text';
// set other styles here
parentElement.appendChild(inputEl);
}
}
for the select change event, look here: javascript select input event
you would most likely use javascript(which is what jquery is), here is an example to show you how it can be done to get you on your way
<select name="s" onchange="addTxtInputs(this)" onkeyup="addTxtInputs(this)">
<option value="0">Add</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="7">7</option>
</select>
<div id="inputPlaceHolder"></div>
javascript to dynamically create a selected number of inputs on the fly, based on Mutahhir answer
<script>
function addTxtInputs(o){
var n = o.value; // holds the value from the selected option (dropdown)
var p = document.getElementById("inputPlaceHolder"); // this is to get the placeholder element
p.innerHTML = ""; // clears the contents of the place holder each time the select option is chosen.
// loop to create the number of inputs based apon `n`(selected value)
for (var i=0; i < n; i++) {
var odiv = document.createElement("div"); //create a div so each input can have there own line
var inpt = document.createElement("input");
inpt['type'] = "text"; // the input type is text
inpt['id'] = "someInputId_" + i; // set a id for optional reference
inpt['name'] = "someInputName_" + i; // an unique name for each of the inputs
odiv.appendChild(inpt); // append the each input to a div
p.appendChild(odiv); // append the div and inputs to the placeholder (inputPlaceHolder)
}
}
</script>
Let's say that I have select list with 3 options inside:
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Now, I want to update one of these options, so i create textfield & button.
The option appear inside the textfield everytime i press on one of the options at the select list.
Can someone direct me what do i need to do?
thanks
Adding up to the first example that we had this morning jsfiddle
HTML:
<select id='myselect'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
<input type='text' value='1' name='mytext' id='mytext' />
<button value='add' id='addbtn' name='addbtn'>add</button>
<button value='edit' id='editbtn' name='editbtn'>edit</button>
<button value='delete' id='deletebtn' name='deletebtn'>delete</button>
JavaScript:
var myselect = document.getElementById('myselect');
function createOption() {
var currentText = document.getElementById('mytext').value;
var objOption = document.createElement("option");
objOption.text = currentText;
objOption.value = currentText;
//myselect.add(objOption);
myselect.options.add(objOption);
}
function editOption() {
myselect.options[myselect.selectedIndex].text = document.getElementById('mytext').value;
myselect.options[myselect.selectedIndex].value = document.getElementById('mytext').value;
}
function deleteOption() {
myselect.options[myselect.selectedIndex] = null;
if (myselect.options.length == 0) document.getElementById('mytext').value = '';
else document.getElementById('mytext').value = myselect.options[myselect.selectedIndex].text;
}
document.getElementById('addbtn').onclick = createOption;
document.getElementById('editbtn').onclick = editOption;
document.getElementById('deletebtn').onclick = deleteOption;
myselect.onchange = function() {
document.getElementById('mytext').value = myselect.value;
}
Basically i added an edit field that when clicked it'll edit the value and text of the currently selected option, and when you select a new option it'll propogate the textfield with the currently selected option so you can edit it. Additionally, i also added a delete function since i figure you might need it in the future.
Use jquery :selected selector and val() method.
$('select:selected').val($('input_textbox').val());
First of all always give an ID to your input tags. For eg in this case you can do something like: <select id='myDropDown'>
Once you have the ID's in place its simple matter of picking up the new value from textbox and inserting it into the dropdown:
Eg:
// Lets assume the textbox is called 'myTextBox'
// grab the value in the textbox
var textboxValue = document.getElementById('myTextBox').value;
// Create a new DOM element to be inserted into Select tag
var newOption = document.createElement('option');
newOption.text = textboxValue;
newOption.value = textboxValue;
// get handle to the dropdown
var dropDown = document.getElementById('myDropDown');
// insert the new option tag into the dropdown.
try {
dropDown.add(newOption, null); // standards compliant; doesn't work in some versions of IE
}
catch(ex) {
dropDown.add(newOption); // IE only
}
Below is a pure js example using your markup.
EDIT
After rereading your question Im not sure if you wanted the option to update when a user clicked the button or not.. To just put the option into an input you can do this.
var select = document.getElementsByTagName("select")[0],
input = document.getElementById("inputEl");
select.onchange = function(){
input.value = this[this.selectedIndex].text;
}
To update the option to what the user typed in is below.
http://jsfiddle.net/loktar/24cHN/6/
Markup
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<input type="text" id="inputEl"/>
<button id="button">Update</button>
Javascript
var select = document.getElementsByTagName("select")[0],
input = document.getElementById("inputEl"),
button = document.getElementById("button");
select.onchange = function(){
input.value = this[this.selectedIndex].text;
var selected = this,
selectedIndex = this.selectedIndex;
button.onclick = function(){
selected[selectedIndex].text = input.value;
}
}