Develop Reference

Input type="text" with select functionality after clicking on Input type="text"

I have this piece of code:
input type="text" name="email" id="email" value="" placeholder="" class="txt"
This is a simple input.
What I need.
Click on this input type="text" -> a drop-down select menu with several options appears (but it is still possible to write something manually into this input type="text") -> click on any option -> one of the options is inserted into the input type="text" -> click again on the input type="text" -> the same drop-down select menu with several options appears.
Please help to do this.

This can't be done with the standard form controls alone, but you can make your own. See the comments below for explanation.
// Get references to elements used
var input = document.getElementById("selectedBrowser");
var list = document.getElementById("list");
// Get all the list items into an array
var listItems = Array.prototype.slice.call(document.querySelectorAll("#list > div"));
// Make the "drop down" list the same width as the input
list.style.width = getComputedStyle(input).width;
// Set up click handler on the input
input.addEventListener("click", function(){
list.classList.remove("hidden"); // Show the list
});
// Set up input event handler on input
input.addEventListener("input", function(){
list.classList.add("hidden"); // Hide the list
});
// Loop over the list items
listItems.forEach(function(item){
// Set up a click event handler
item.addEventListener("click", function(){
input.value = item.textContent; // Copy the value into the input
list.classList.add("hidden"); // Hide the list
});
// Set up a mouseover event handler
item.addEventListener("mouseover", function(){
item.classList.add("highlight"); // Hide the list
});
// Set up a mouseout event handler
item.addEventListener("mouseout", function(){
item.classList.remove("highlight"); // Hide the list
});
});
/* Applied to the drop down list by default to hide it and
removed when the list needs to be shown. */
.hidden {
display:none;
}
#container {
display:inline-block;
vertical-align:top;
}
/* Ensures that the input will be positioned at the top-left of its parent */
#selectedBrowser {
position:absolute;
}
#list {
position:absolute; /* Position at top-left of parent */
top:1.85em; /* But, then move down to be below the input */
border:1px solid #e0e0e0;
height:5em; /* Limit height of list */
overflow-y:scroll; /* Add vertical scroll bar when list won't fit in height */
}
#list > div {
cursor:pointer;
user-select:none;
margin:2px 0;
}
.highlight {
background-color:rgba(255, 255, 0, .5);
}
<label for="selectedBrowser">Choose a browser from this list:</label>
<div id="container">
<input id="selectedBrowser" name="browser">
<div id="list" class="hidden">
<div>Chrome</div>
<div>Firefox</div>
<div>Internet Explorer</div>
<div>Opera</div>
<div>Safari</div>
<div>Microsoft Edge</div>
</div>
</div>

HTML5 has a built-in input and a datalist that renders as a combo box. You add a list attribute to the input that matches the value of the id in the datalist. An example is shown below.
<input type="text" list="items" />
<datalist id="items">
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
<option>Item4</option>
</datalist>
An issue with this solution is that it is not supported by the Apple Safari browser. W3Schools has the latest compatibility info.
If compatibility is an issue, a number of jQuery or javascript solutions are out there that may solve the problem. Here is a link to a Javascript solution that may work for you.

Reloading of javascript function via JQuery .change adds variables from previous runs

I would like to change fonts dynamically, But my code only behaves nicely the first time i change a font. It seems that my code remembers previous clicked buttons and adds those to be changed as well every time i select a new font for a button. My code is available at jsfiddle
function font(id,element){
$(id).bind('change',function(){
var fontTypeSelected = $(id).val();
$(element).css('font-family',fontTypeSelected);
});
}
$('#settings-ID').change(function(){
font('#font','#' + $('#settings-ID').val());
});
$('.list').on('click','.settings',function(){
// Set current row or box section ID
$('#settings-ID').val($(this).attr('id'));
$("#settings-ID").trigger("change");
});
.list div {
float:left;
padding:10px;
background-color:#CCC;
margin:10px 10px 0 0;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click on one of the buttons below to change font
<div class="list">
<div class="settings" id="1">Font one</div>
<div class="settings" id="2">Font two</div>
</div>
<br>Selected button ID: <input type="text" id="settings-ID" placeholder="None selected"><br>
<br>
<select class="form-control" id="font">
<option>Arial</option>
<option>Courier</option>
<option>Verdana</option>
<option>Times new roman</option>
</select>
I really hope someone can help me with this problem. I'm kind of stuck here.

You are defining multiple change events when you call the function
Use .unbind("change") to delete the change event before defining the next one.
function font(id,element){
$(id).unbind('change').bind('change',function(){
var fontTypeSelected = $(id).val();
$(element).css('font-family',fontTypeSelected);
});
}

focusout on a input form and div

I'm trying to make a dropdown suggestion box.
In that case I wish to hide the box whenever the input field AND dropdown box is no longer in focus.
This is my HTML code:
<input type="text" id="user_address">
<div id="user_address_sg">SUGGESTION</div>
<div id="another element">Pressing another element on the page should hide the suggestion box</div>
I have tried the following:
$('[id=user_address][id=user_address_sg]').focusout(function (){
$('#user_address_sg').hide();
});
How come the user_address_sg doesn't hide whenever I select another input field or other elements on the page?
Images (1st: When I write a name, 2nd: When I select another form while suggestions appear)
First image: suggestion box should be displayed and clickable
Second image: When doing this the suggestion box should disappear

UPDATED: CSS alternative:
function suggest(key) {
document.getElementById('user_address').value = document.getElementById(key).innerHTML;
}
#user_address_sg {
vertical-align: top;
text-decoration: none;
display: none;
color:black;
}
#user_address_sg:focus, #user_address_sg:active {
display: inline-block;
color:black;
}
#user_address:focus ~ #user_address_sg {
display: inline-block;
}
<input type="text" id="user_address">
<a href=# id="user_address_sg">
<span id=a1 onClick="suggest('a1')">SUGGESTION 1</span><br>
<span id=a2 onClick="suggest('a2')">SUGGESTION 2</span><br>
<span id=a3 onClick="suggest('a3')">SUGGESTION 3</span><br>
<span id=a4 onClick="suggest('a4')">SUGGESTION 4</span>
</a>

You may need blur and separate the selectors with commas, because one single element with two different ids doesn't exist, but two different elements with different ids yes. So separate them:
$('[id=user_address],[id=user_address_sg]').blur(function (){
$('#user_address_sg').hide();
});
Better with on() method
$('[id=user_address],[id=user_address_sg]').on('blur', function (){
$('#user_address_sg').hide();
});
blur event will fire when a focused element loses the focus. So I think that's what you need.

Append div or span to a dropdown list

I would like to "attach" a div to a dropdown list. Is that possible?
I require something like this:
To be clear, I don't need to add div into the proper dropdownlist controller. I just need to attach.
What I've tried so far and not working:
HTML:
<select id="platypusDropDown">
<option value="duckbill">duckbill</option>
<option value="duckbillPlatypus">duckbillPlatypus</option>
<option value="Platypus">Platypus</option>
<option value="Platypi">Platypi</option>
</select>
<div id="addCategory">
<input id="categoryInput" type="text" /> <br/>
<input id="categoryInputAddBtn" type="button" value="Add new" />
</div>
JS:
$('#platypusDropDown').click(function () {
var myDiv = document.getElementById('addCategory');
this.append(myDiv);
});
Any solution? Thanks in advance.

I don't think so, what you are trying to achieve is possible using select dropdown.What here, i will do is modify my HTML Code and use css style.
<style type="text/css">
ul{ list-style: none;
margin: 0;
padding: 0; }
</style>
Here is my HTML Code: Instead of dropdown, i am using here ul li listing element.
<div class="select-wrapper">
Select Dropdown
<ul id="platypusDropDown" style="display:none;">
<li rel="duckbill">duckbill</li>
<li rel="duckbillPlatypus">duckbillPlatypus</li>
<li rel="Platypus">Platypus</li>
<li rel="Platypi">Platypi</li>
</ul>
</div>
<div class="wrapper" style="display:none;">
<div id="addCategory">
<input id="categoryInput" type="text" /> <br/>
<input id="categoryInputAddBtn" type="button" value="Add new" />
</div>
</div>
Here is my JS code:
<script type="text/javascript">
$(document).ready(function(){
var flg = 0;
$('.select-wrapper').click(function(){
flg++;
if(flg == 1){
$this_html = jQuery('.wrapper').html();
$("#platypusDropDown").append("<li>"+$this_html+"</li>");
}
$("#platypusDropDown").slideToggle();
});
});
</script>

You can't add DIV to selectBlock. But you can add option into select:
$('#platypusDropDown').click(function () {
var myDiv = document.getElementById('addCategory');
$(this).after(myDiv);
});

LEAVE jQuery Part . This is not possible by setting HTML static markup WITH select Containing DIV . SO IT IS NOT POSSIBLE . u may use markup but , still It wil hide in browser even though u can see in Firebug , div is attached to dropdown.
But if u r asking for : add Text as option in dropdown , then ,
Working FIDDLE
$('#categoryInputAddBtn').click(function () {
var myDiv = $('#categoryInput').val();
//this.append(myDiv);
var option = $('<option/>');
option.attr({ 'value': 'myValue' }).text(myDiv);
$('#platypusDropDown').append(option);
});

As far as I know this is not possible with standard HTML select/option tags. But there are several different libraries emulating dropdown functionality and giving additional functionalities. One of those is UI Kit which provides this among a lot of other features. You can add so called 'Grid' components to the dropdown which can in fact contain anything you want. See detail over here under the headline 'Grid'.

You can add input value to dropdown list.
var $platypusDropDown = $('#platypusDropDown');
$('#categoryInputAddBtn').on('click', function() {
// Value of div input
var $category = $('#categoryInput').val();
// Add to dropdown list
$platypusDropDown.append('<option value="' + $category + '">' + $category + '</option>');
});

Why you whant add div to Options? You could try like this:
$('#platypusDropDown').click(function () {
var dropHeight = $(this.options[0]).height() * this.options.length;
if($(this).data('open')) {
$(this).data('open', false);
$('#addCategory').css('padding-top', '0px')
return;
}
$('#addCategory').css('padding-top', dropHeight + 'px')
$(this).data('open', true);
});
JSFIDDLE DEMO

Hide an HTML form field when a button is clicked and replace it with a different field

I have an html form that has a field that needs to become hidden and replaced with another when a button is clicked. I can't get rid of this field altogether because its value still must be submitted. Here is some sample code for reference:
<select id="Id.0" onChange="changeTextBox();">
<input type="button" id="addButton" value="Add" onclick="addQual();"/>
Basically what needs to happen is when the addButton is clicked, Id.0 must disappear (but remain a member of the form) and be replaced by an identical field with id="Id.1" then upon clicking again id="Id.2" and so on.
Is there a way, using JavaScript or jQuery, to hide and replace this field upon clicking this button? Thanks!

This with jQuery might help.
elmCount = 0;
function addQual()
{
$("#Id." + elmCount).css('visibility', 'hidden');
$("#Id." + elmCount).css('height', '0px');
elmCount += 1;
}
Thanks to comments.

<div id="divAny">
<select id="Id.0" onChange="changeTextBox();">
</div>
<input type="button" id="addButton" value="Add" onclick="addQual();"/>
var index = 0;
function addQual(){
$("#divAny").hide();
$("#Id."+index).attr("id" , "Id."+ (++index));
}

As an alternative to #MahanGM's answer, I would minimise the use of jQuery here and do only the following in your addQual function:
addQual = function() {
$('select').toggleClass('hidden');
}
You then need a css class hidden to hide the required element. As others have said, you must not use display: none if you don't want to lose the value of the input.
.hidden {
visibility: hidden;
height: 0;
}
And you start out in your markup with both selects present, only the one you initially want hidden has the appropriate class:
<select id="Id.0">
<select id="Id.1" class="hidden">
<input type="button" id="addButton" value="Add" onclick="addQual();"/>
A basic example with spans: http://jsfiddle.net/5Dayf/1/

Cleanest solution in my eyes: see here jsFiddle
HTML, nothing special:
<select class="replaceableSelect" id="Id.0">
<option name="one" value="one">One</option>
</select>
<button id="addButton">Add</button>
Javascript using jQuery:
$(document).ready(function () {
var changeTextBox = function () {
/** Your code goes here */
};
// add the onchange event to all selects (for the current one and future ones)
$(document).on("click", "select.replaceableSelect", changeTextBox);
var currentId = 0,
currentSelect = $("#Id\\.0");
$("#addButton").on("click", function (e) {
// hide the old select
currentSelect.addClass("invisible");
// create the new select with increased id and add onchange event
currentSelect = $('<select class="replaceableSelect" id="Id.' + (++currentId) + '"><option name="two" value="two">Two</option></select>').insertAfter(currentSelect).bind("change", changeTextBox);
});
});
CSS:
.invisible{
visibility: hidden;
height: 0;
width: 0;
margin: 0;
padding: 0;
border: none;
}
Hint: To process the results of your form, please make sure, every select gets a unique name.