dynamic Drodown in html - javascript

I have to make a html page in which there should be TextBox and a add Button and if user add something via Textbox then it should be visible in Dropdown.
kindly help with code.
thanks in advance.

I'm not exactly sure what you need but based on your description, I was able to build this basic page:
const list = document.getElementById("lists");
const text = document.getElementById("myText");
function addEntry(){
var newOption = document.createElement("OPTION");
newOption.value = text.value;
newOption.innerHTML = text.value;
list.appendChild(newOption);
text.value = "";
text.focus();
}
<select id="lists">
<option selected disabled>-- SELECT ONE --</option>
</select>
<br><br>
<input type="text" id="myText" placeholder="Type here...">
<input type="button" onclick="addEntry()" value="+ ADD">
Basically, this uses a function that takes the value, creates an HTML <option> element, then inserts it into the dropdown menu.

Related

make diffrence between objects that created with clone() in java script

Good Day Friends. I have a problem... Thanks, if you help me
I have a couple of inputs into a div. I copied that div with Clone function in java script (by click a button) and right now, I have two divs. but my problem:
1- I don't know, How can I get the values of inputs correctly (the input's names are the same)?
2- and I have a select input in div, that some inputs add or remove by choose each option of select input. Now after copied div, choose one option in div2, create changes in div1... and I don't want it !!
<div class="levels">
<div class="add_senario_level">
<span>Level 1</span>
<form>
<select name="condition" onchange="show_div(this,'shop during');">
<option selected="selected" disabled="disabled">choose condition</option>
<option>shop after registration</option>
<option>shop during</option>
</select>
<div id="shop_during" style="display:none;">
<input type="number" id="shop_during_num" name="shop_during_num" placeholder="Enter number">
<select id="shop_during_time" name="shop_during_time">
<option selected="selected">hour after registeration</option>
<option>day after registeration</option>
<option>week after registeration</option>
<option>month after registeration</option>
</select>
</div>
<div>
<button type="button" class="newLevel"> Add New Level </button>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function()
{
$(".newLevel").click(function()
{
$(".add_senario_level").clone().appendTo(".levels");
});
});
function show_div(obj, id)
{
txt = obj.options[obj.selectedIndex].text;
if (txt.match(id))
{
document.getElementById("shop_during").style.display = 'block';
}
else
{
document.getElementById("shop_during").style.display = 'none';
}
}
</script>
You can use jQuery's find function to find a child element and the attr function to get and set attribute values. You will want to do this to change on the id and name attributes for the input and select like below:
HTML
<input type="number" id="shop_during_num0" name="shop_during_num0" class="shop_input" placeholder="Enter number">
JavaScript
$(".newLevel").click(function()
{
const count = $('.add_senario_level').length;
const clone = $(`#add_senario_level${count - 1}`).clone();
const input = clone.find(`#shop_during_num${count - 1}`);
const select = clone.find(`#shop_during_time${count - 1}`);
input.attr('name', `shop_during_num${count}`);
input.attr('id', `shop_during_num${count}`);
select.attr('name', `shop_during_time${count}`);
select.attr('id', `shop_during_time${count}`);
clone.appendTo(".levels");
});
In the show_div method, you can use $(obj) to reference the select that called the function and show or hide the correct element with
$(obj).parent().find('#shop_during').css('display', 'block');

Adding new option to select menu

This is a very simple select bar. Why is it not working?
<html>
<form>
<label>
<select id="sel1">
<option> op1 </option>
<option> op2 </option>
<option> op3 </option>
</select>
<input onclick="s()" type="submit" value=" ok! ">
</label>
</form>
<script>
function s(){
document.getElementById("sel1").innerHTML += "<option> op4 </option>";
}
</script>
</html>
If I want people to add new option, I need to put some variable on it. How can I add php variable instead of op4, op5, etc?
Create an actual option element and append it to the select element.
var option = document.createElement("option");
option.value = "op4";
option.innerHTML = "op4";
var select = document.getElementById("sel1");
select.appendChild(option);
You should probably be using value attributes in your options too.
This is the next question. Then if i want people to add new option , i need to put some php variable on it. how can i add php variable instead of op4 , op5 and... options?
No, this has nothing to do with PHP.
<input id="option-name">
Using the example above, instead of using a fixed "op4", use the value from the input
var input = document.getElementById("option-name");
var option = document.createElement("option");
option.value = input.value;
option.innerHTML = input.value;
var select = document.getElementById("sel1");
select.appendChild(option);
Now the input value will be used as the name/value for the new option
Change this:
<input onclick="s()" type="submit" value=" ok! ">
To this:
<input onclick="s()" type="button" value=" ok! ">
Using type="submit" will result in your form being submitted and thus your page being reloaded. Using type="button" prevents this.
What happens is the form is submitted and as the form element doesn't have action attribute the current page is reloaded.
You should listen to submit event and prevent the default action of the event using preventDefault method of the event object.
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
var option = new Option('optionText', 'optionValue');
document.getElementById("sel1").add(option);
});
Another option is using a button element with type attribute of button instead of a submit input.
Try this:
<script>
function s(){
var o=new Option();
o.value="<?php echo $option; ?>";
o.text="<?php echo $option; ?>";
var os=document.getElementById("sel1").options;
os[os.length]=o;
}
</script>
I finally write completed Answer. In 2 ways; The first way is safer than another. first way is :
<html>
<form>
<label>
<input type="text" id="option-name">
<select id="sel1">
<option> Option1 </option>
<option> Option2 </option>
<option> Option3 </option>
</select>
<input onclick="s()" type="button" value=" Create ! "><br/><br/>
</label>
</form>
<script>
function s(){
var input = document.getElementById("option-name");
var option = document.createElement("option");
option.value = input.value;
option.innerHTML = input.value;
var select = document.getElementById("sel1");
select.appendChild(option);
}
</script>
</html>
That is other guys answer too. But the second way is easier and useful. not safer (I think innerhtml is not so safe for this purpose! but if I wrong , please tell me.)!
<html>
<form method="post" action="index.php">
<label>
<input type="text" name="txt1">
<select id="sel1">
<option> Option1 </option>
<option> Option2 </option>
<option> Option3 </option>
</select>
<input type="submit" value=" Create ! ">
</label>
</form>
<script>
document.getElementById("sel1").innerHTML += "<option><?php echo $_POST['txt1']; ?></option>";
</script>

how to add populated select field to form on button click

I have form where a user can select an option and then submit, i want to add a button that will add another select option to the form. so that the user can submit two or more options
<form action="#" method="get">
<button type="button" onclick="add_field()">Add another field</button>
<select>
{%for each in mechanic_list %}
<option name="Mechanic_" value={{each.id}}>{{each.DESCRIPTION}}</option>
{%endfor%}
</select>
<input type="submit" value="Submit">
</form>
<script>
function add_field()
{
var form = document.getElementsByTagName('form')[0],
input = document.createElement('select');
input.setAttribute('type', 'select');
input.setAttribute('name', 'pet');
form.appendChild(input);
};
</script>
the above code will populate a first select box and has a button that adds empty select fields (after the submit, for some reason)
two questions
1. how do i populate the added select field
2. how do i move the new field to the proper side of the submit button.
one thing to note, i am using the Django web Framework and have used a for loop to populate the select values.
this is a JSfiddle http://jsfiddle.net/5Jr8N/59/ (no for loop)
thanks
Edit/update
HTML script as coded
<script>
function add_field() {
var container = document.getElementById('selects'),
input = document.createElement('select');
var opt = document.createElement("option");
{% for each in mechanic_list %}
opt.value = "{{each.id}}";
opt.innerHTML = "{{each.DESCRIPTION}}";
{%endfor%}
input.appendChild(opt);
input.setAttribute('type', 'select');
input.setAttribute('name', 'pet');
container.appendChild(input);
};
</script>
html script as "rendered" (given to browser/from browser "view source")
<script>
function add_field() {
var container = document.getElementById('selects'),
input = document.createElement('select');
var opt = document.createElement("option");
opt.value = "dd";
opt.innerHTML = "dd";
opt.value = "TT";
opt.innerHTML = "Test for";
input.appendChild(opt);
input.setAttribute('type', 'select');
input.setAttribute('name', 'pet');
container.appendChild(input);
};
</script>
so this is working except that it only displays the last value not both/all values. this is so close i can taste it.
how do i get both/all the values not just the last one?
What do you mean by "populate the added select"?
To change position of new select field wrap existing <select> into <span> and append new selects to this <span>. To populate options from original <select> just copy innerHTML from it:
<form action="#" method="get">
<button type="button" onclick="add_field()">Add another field</button>
<span id="selects">
<select id="orig_select">
{% for each in mechanic_list %}
<option name="Mechanic_" value={{each.id}}>{{each.DESCRIPTION}}</option>
{%endfor%}
</select>
</span>
<input type="submit" value="Submit">
</form>
<script>
function add_field() {
var container = document.getElementById('selects'),
input = document.createElement('select');
input.innerHTML = document.getElementById('orig_select').innerHTML;
input.setAttribute('type', 'select');
input.setAttribute('name', 'pet');
container.appendChild(input);
};
</script>

Select from multiple HTML fields then add total to another list

I have 3 HTML fields: a textbox and two select lists.
What I'm trying to do is let the user enter something in the text field and choose options from the other two lists and then click an "Add" button which adds his total selection to another list. This final list is the one to be submitted and received by the CGI script.
So for example a user types in "Toyota" and selects Sedan from one list and 2004 from a second list and clicks add. Then, "Toyota Sedan 2004" would be added to an empty list. The user can add multiple selections to the list or remove from the list. And this list is the one that is submitted when the form is submitted. It is preferable if I do this in Javascript only so no JQuery. Can anyone point me in the right direction?
What you need is, when the "add" button is clicked, a simple javascript function is called that retrieves: the text, selection1 & selection2 => build a new option with these information the append it to the result list.
Key javascript functions:
- document.getElementById
- document.createElement
- appendChild
In your html the form/submit button must be around your result list only.
Example (jsfiddle link):
<html>
<head>
<script>
function add() {
var txt = document.getElementById("txt").value;
var sel1 = document.getElementById("sel1").value;
var sel2 = document.getElementById("sel2").value;
var result = txt + " " + sel1 + " " + sel2;
var resultOption = document.createElement("option");
resultOption.value = result;
resultOption.text = result;
document.getElementById("selResult").appendChild(resultOption);
}
</script>
</head>
<body>
<input id="txt" type="text" />
<select id="sel1">
<option value="value11">value11</option>
<option value="value12">value12</option>
<option value="value13">value13</option>
</select>
<select id="sel2">
<option value="value21">value21</option>
<option value="value22">value22</option>
<option value="value23">value23</option>
</select>
<input type="button" value="add" onClick="javascript:add()"/>
<br/>
result:
<form action ="." method="post">
<select id="selResult"></select>
<input type="submit" value="submit"/>
</form>
</body>
</html>
Use need to user this jquery plugins:
Jquery Forms
Jquery Auto Tab
Jquery UI
And some jquery functions that can be useful for you:
.ajax()
prepend()
.on()

Display the selected value of a Drop down list in a text field (javascript)

For Example:
These are the items in a drop down list.
<select name="cmbitems" id="cmbitems">
<option value="price1">blue</option>
<option value="price2">green</option>
<option value="price3">red</option>
</select>
When the user selects blue, i want to display the value of price1 in a text field below:
<input type="text" name="txtprice" id="txtprice" onClick="checkPrice()">
Thank you for answering
All you need to do is set the value of the input to the value of the select, in a select.onchange event handler.
var select = document.getElementById('cmbitems');
var input = document.getElementById('txtprice');
select.onchange = function() {
input.value = select.value;
}
Here is a link to a jsFiddle demo
This is the brute force way to look up the currently selected option, check its value and use its display text to update your input. Like Daniele suggested, if you have jquery at your disposal, this gets much, much easier. But if you can't use a JS framework for any reason, this should get you what you need.
<select name="cmbitems" id="cmbitems" onchange="updateTextField()">
...
</select>
<input type="text" ..... />
<script type="text/javascript">
function updateTextField()
{
var select = document.getElementById("cmbitems");
var option = select.options[select.selectedIndex];
if (option.id == "price1")
{
document.getElementById("txtprice").value = option.text;
}
}
</script>
$.on('change', '#cmbitems', function() {
$('#txtprice').val($('#cmbitems option:selected').val());
});
If you are using jquery just go with
$('select.foo option:selected').val(); // get the value from a dropdown select
UPDATE ( I forgot to inlcude the <input> population)
First, inlcude jquery in your html file.
In the <header> you include it:
<header>
<script type="text/javascript" src="YOUR_PATH_TO_LIBRARY/jquery-1.7.1-min.js"></script>
</header>
Then
<input type="text" name="txtprice" id="txtprice" onClick="javascript:$('select.foo option:selected').val();">

Categories

Resources