We Keep Coding

Need to use a Function on Multiple Div Box onClick

This is only for IE.
I have a function noted below it copies the content of the div when the div is clicked. It works fine. It used the getElementById.
I have 19 items I would like to use this for ... 'option1 - option19.
Instead of having to create 19 variables is there any other way of doing this...
I am totally a noob to this stuff....
function CopyToClip() {
var Cdiv = document.getElementById('option1');
Cdiv.contentEditable = 'true';
var controlRange;
if (document.body.createControlRange) {
controlRange = document.body.createControlRange();
controlRange.addElement(Cdiv);
controlRange.execCommand('Copy');
}
div.contentEditable = 'false';
}
I should mention that these id's are for Divs.
These divs are a show / hide based on a drop down selection.
The drop down has its on function to show the selected div.
The function is:
$(window).load(function () {
$(document).ready(function () {
$('.block').hide();
$('#option1').show();
$('#selectField').change(function () {
$('.block').hide();
$('#' + $(this).val()).fadeIn();
});
});
});
My HTML is:
<div class="col_1">
<h1>communication:</h1>
<div class="box">
<select id="selectField" style="padding-left: 20px;width:175px">
<option value="option1">Device Shipped to ASC</option>
<option value="option2">Device Received at ASC</option>
<option value="option3">ASC Shipped Device to Store</option>
<option value="option4">Device Pick-up Follow-up</option>
<option value="option5">Device Pick-up Final Reminder</option>
<option value="option6">Impress Phase Direct Feedback</option>
<option value="option7">Abandon Notice</option>
<option value="option8">Mailer Shipped to Client</option>
<option value="option9">Mailer Received by Client</option>
<option value="option10">Mailer Pick-up Notice</option>
<option value="option11">Mailer Final Pick-up Notice</option>
<option value="option12">Mailer Failed to Pick-up</option>
<option value="option13">Mailer Return Defective Device Notice</option>
<option value="option14">Mailer Final Return Defective Device Notice</option>
<option value="option15">Mailer Failed to Return Defective Device</option>
<option value="option16">Mailer Defective Device Received at ASC</option>
<option value="option17">Mailer Charges to Customer</option>
<option value="option18">Mailer Process Confirmation</option>
<option value="option19">Quote Un-replied</option>
</select>
<div id="option2" class="block" style="background-color:white" onClick="javascript:CopyToClip()"> blah </div>
Had I have 19 of this divs.
I don't know if this helps ... Sorry I am in way over my head on this one.

I had to hack things about a little, and your clipboard code will not work on all browsers:
JSFiddle: http://jsfiddle.net/THU5f/2/
function CopyToClip($div) {
var div = $div[0];
div.contentEditable = 'true';
var controlRange;
if (document.body.createControlRange) {
controlRange = document.body.createControlRange();
controlRange.addElement(div);
controlRange.execCommand('Copy');
alert("Copied: " + div.html());
}
div.contentEditable = 'false';
}
$(function () {
// Hide copy button
$('#copy').hide();
// Hide all content divs
$('.content').hide();
$('#selectField').change(function () {
// Show the copy button
$('#copy').show();
// Hide all content divs
$(".content").fadeOut();
// Show the select content div
$('#' + $(this).val()).fadeIn();
});
$('#copy').click(function(){
// Get the div the current selection points to
var $div = $('#' + $('#selectField').val());
// Copy the div to the clipboard
CopyToClip($div);
});
});
I added comments throughout. Hope this helps.

I've been working on similar thing lately. I was supposed to show/hide DIV depending on the selection. The HTML code is generated and there can be 1 to 8 selects generated, with each dependent div shown under the its select. I came up with this solution.
"Second half" of the code basically finds all select elements with given ID, loops trough them and depending on the selected value, shows or hides the div. I had to use this selectors: $('*[id*=delegate_form]') and $('*[id*=show_hidden_delegate'), because if I used $("#delegate_form") the code only affected the element with index 0. I have no idea why.
First half of the code handles the same situation on the read-only page.

What is the javascript if statement I could use to only display something AFTER a new option is chosen?

I have a select list:
Choose a Story:</br>
<select name="Book" id="book">
<option value="empty" selected disabled></option>
<option value="Book1">Book1</option>
<option value="Book2">Book2</option>
<option value="Book3">Book3</option>
<option value="Book4">Book4</option>
</select><br><br>
I got the script to work to display the chosen item onchange below the options thanks to some assistance from other stackoverflow users. But it only states what option is chosen instead of getting it to say "You chose _." after something other than the blank option is chosen.
<script>
$('#book').on('change', function() {
$('#result_element').text(this.value);
});
</script>
<script>
if ((document.getElementsByTagName("book")this.value) != empty)
{
document.write("You chose ")
}
</script>
<span id="result_element"></span>
Basically, I want it to show the "You chose __." after they select something.

a) You will need to do it in the event handler. Otherwise the code is executed when the page is loaded (and not again), instead of after the user has chosen an option
b) Do not use document.write!
<script>
$('#book').on('change', function() {
var output = "";
if (this.value != "empty") {
output = "You chose " + this.value;
}
$('#result_element').text(output);
});
</script>
<span id="result_element"></span>

jQuery select value failing

I have done some research on this and everything said / suggested so far has failed to work.
I am trying to capture the input from a select tag, however nothing comes through, not even null.
The code:
function validateForm()
{
var name = $('#txtName').val();
var email = $('#txtEmail').val();
var tel = $('#txtTel').val();
var look = $('#lookingFor').val();
var goals = $('#goals').val();
alert(name + " " + email + " " + tel + " " + look + " " + goals);
return false;
}
HTML:
<select class="fomForm select" style="color:#777;"
id="lookingFor" name="lookingFor">
<option value="">I'm looking for</option>
<option value="">CYCLING</option>
<option value="">RUNNING</option>
<option value="">TRIATHLONS</option>
<option value="">TRAINING CAMPS</option>
<option value="">PERFORMANCE TESTING</option>
<option value="">DIET & NUTRITION</option>
<option value="">WELLNESS</option>
</select>
I apologise for asking this as there are quite a few resources on the internet however they don't seem to help this case. The name, email etc all display fine in the alert but the select boxes do not.
I have no errors in the console.

It is not showing because all the values in your select options are empty.
Try putting some value:
<option value="TRIATHLONS">TRIATHLONS</option>

you have no value in your select box option...so the alert is empty
<option value="">I'm looking for</option>
<option value="">CYCLING</option>
replace the value with the value u want....
<option value="iamlookingfor">I'm looking for</option>
......

$(function(){$(".fomForm").change(function(){
alert($(".fomForm option:selected").text()); })});
Take a demo in this fiddle: http://jsfiddle.net/tAxDv/

Seems like you are missing the value for options. They all say option=""
Put the value in there, and it should start working with $('#lookingFor').val()
If you don't have control on the html, or can't add values for whatever reasons, this should give you the text displayed in the option
$('#lookingFor option:selected').text()

Manually type in a value in a "Select" / Drop-down HTML list?

In a Windows Forms application, a drop-down selector list also gives the user the option of typing an alternate value into that same field (assuming the developer has left this option enabled on the control.)
How does one accomplish this in HTML? It appears as if it is only possible to select values from the list.
If it's not possible to do this with straight HTML, is there a way to do this with Javascript?

It can be done now with HTML5
See this post here HTML select form with option to enter custom value
<input type="text" list="cars" />
<datalist id="cars">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</datalist>

I faced the same basic problem: trying to combine the functionality of a textbox and a select box which are fundamentally different things in the html spec.
The good news is that selectize.js does exactly this:
Selectize is the hybrid of a textbox and box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on.

The easiest way to do this is to use jQuery : jQuery UI combobox/autocomplete

ExtJS has a ComboBox control that can do this (and a whole host of other cool stuff!!)
EDIT: Browse all controls etc, here: http://www.sencha.com/products/js/

Another common solution is adding "Other.." option to the drop down and when selected show text box that is otherwise hidden. Then when submitting the form, assign hidden field value with either the drop down or textbox value and in the server side code check the hidden value.
Example: http://jsfiddle.net/c258Q/
HTML code:
Please select: <form onsubmit="FormSubmit(this);">
<input type="hidden" name="fruit" />
<select name="fruit_ddl" onchange="DropDownChanged(this);">
<option value="apple">Apple</option>
<option value="orange">Apricot </option>
<option value="melon">Peach</option>
<option value="">Other..</option>
</select> <input type="text" name="fruit_txt" style="display: none;" />
<button type="submit">Submit</button>
</form>
JavaScript:
function DropDownChanged(oDDL) {
var oTextbox = oDDL.form.elements["fruit_txt"];
if (oTextbox) {
oTextbox.style.display = (oDDL.value == "") ? "" : "none";
if (oDDL.value == "")
oTextbox.focus();
}
}
function FormSubmit(oForm) {
var oHidden = oForm.elements["fruit"];
var oDDL = oForm.elements["fruit_ddl"];
var oTextbox = oForm.elements["fruit_txt"];
if (oHidden && oDDL && oTextbox)
oHidden.value = (oDDL.value == "") ? oTextbox.value : oDDL.value;
}
And in the server side, read the value of "fruit" from the Request.

I love the Shadow Wizard answer, which accually answers the question pretty nicelly.
My jQuery twist on this which i use is here. http://jsfiddle.net/UJAe4/
After typing new value, the form is ready to send, just need to handle new values on the back end.
jQuery is:
(function ($)
{
$.fn.otherize = function (option_text, texts_placeholder_text) {
oSel = $(this);
option_id = oSel.attr('id') + '_other';
textbox_id = option_id + "_tb";
this.append("<option value='' id='" + option_id + "' class='otherize' >" + option_text + "</option>");
this.after("<input type='text' id='" + textbox_id + "' style='display: none; border-bottom: 1px solid black' placeholder='" + texts_placeholder_text + "'/>");
this.change(
function () {
oTbox = oSel.parent().children('#' + textbox_id);
oSel.children(':selected').hasClass('otherize') ? oTbox.show() : oTbox.hide();
});
$("#" + textbox_id).change(
function () {
$("#" + option_id).val($("#" + textbox_id).val());
});
};
}(jQuery));
So you apply this to the below html:
<form>
<select id="otherize_me">
<option value=1>option 1</option>
<option value=2>option 2</option>
<option value=3>option 3</option>
</select>
</form>
Just like this:
$(function () {
$("#otherize_me").otherize("other..", "put new option vallue here");
});

Telerik also has a combo box control. Essentially, it's a textbox with images that when you click on them reveal a panel with a list of predefined options.
http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx
But this is AJAX, so it may have a larger footprint than you want on your website (since you say it's "HTML").

Javascript IE innerHTML of <select>

I'm trying to change the innerHTML of a element based on the value of the previous element.
I have the javascript correctly grabbing the current value and everything works correctly in Firefox, Safari, Chrome and Opera. IE is a pain.
sample code:
<form action="soap.php" method="post">
<select name="circuitproduct" id="circuitproduct" onchange="bandwidthfunction();">
<option>Dedicated Voice</option>
<option>Frame Relay</option>
<option>ATM</option>
<option>Dedicated Internet</option>
<option>IP Solutions Private Port</option>
<option>IP Solutions Enhanced Port</option>
<option>Private Line – Domestic</option>
<option>Int’l Private Line</option>
<option>Qwest Metro Private Line (QMPL)</option>
<option>Qwest Metro Ethernet Private Line (QMEPL)</option>
</select><br />
<select name="term" id="term">
<option value="1-Year">1-Year</option>
<option value="2-Year">2-Year</option>
<option value="3-Year">3-Year</option>
</select>
<select id="bandwidth">
</select>
<select id="sublooptype">
</select>
</form>
sample javascript:
function bandwidthfunction() {
var product = document.getElementById('circuitproduct').value;
if (product == 'Dedicated Voice') {
document.getElementById('bandwidth').innerHTML = ('<option value="DS-1">DS-1</option><option value="DS-3">DS-3</option><option value="OC-3">OC-3</option><option value="OC-12">OC-12</option>');
document.getElementById('sublooptype').innerHTML = ('<option value="Special Access">Special Access</option><option>CO MtPt - Special Access</option><option>CPA Special Access</option>');
}
else if (product == 'Frame Relay') {
document.getElementById('bandwidth').innerHTML = ('<option value="DS-1">DS-1</option><option value="DS-3">DS-3</option><option value="OC-3">OC-3</option><option value="OC-12">OC-12</option>');
document.getElementById('sublooptype').innerHTML = ('<option value="Special Access">Special Access</option><option>CO MtPt - Special Access</option><option>CPA Special Access</option>');
}

Well, first of all you have a closing tag for the select that you try to put inside the select element, which makes the code invalid.
Then there might be a problem with how the select element treats it's content. When the HTML code is parsed, the select element doesn't have any child elements, like a regular element does. Instead the options are items in it's options collection.
If you want to change the items in the select element, change the content of it's option collection. I.e. to add items, create option objects using the document.createElement method and add to the collection. Example:
var opt = document.createElement('OPTION');
opt.text = 'Choose me';
opt.value = 42;
document.getElementById('bandwidth').options.add(opt);

You have to remove the "select"-Element and the end of setting the innerHTML-Property. This is not a part of innerHTML. Its the end-tag of the element 'bandwith' itself.
document.getElementById('bandwidth').innerHTML = ('<option value="DS-1">DS-1</option><option value="DS-3">DS-3</option><option value="OC-3">OC-3</option><option value="OC-12">OC-12</option>');

Here's a handy hack I came across that works in both FF and IE as a workaround to the inability to change innerHTML on select elements.
document.getElementById('bandwidth').outerHTML = document.getElementById('bandwidth').outerHTML.replace( document.getElementById('bandwidth').innerHTML + '</select>' , '<option value="DS-1">DS-1</option><option value="DS-3">DS-3</option><option value="OC-3">OC-3</option><option value="OC-12">OC-12</option>' + '</select>' );
or as a function for readability:
function swapInnerHTML(objID,newHTML) {
var el=document.getElementById(objID);
el.outerHTML=el.outerHTML.replace(el.innerHTML+'</select>',newHTML+'</select>');
}

I recently came across this problem with IE. I came up with a turnkey solution that works with the following things in mind:
You don't want to use jQuery
Need it to work in IE < 9
You want to append ( not replace the existing options ) string options into an existing select element
The select must be a type of "select-one"
Must wrap selects in their own parent element
We have many landing pages requesting the same information (age, products, country, state etc... ) but with different select options. The implementation I use appends new select options. This was done to allow a custom default option per lading page. One page may have the first option as "select item" another may have "choose one" and so forth.
Select format:
<div> <!-- you MUST wrap the select in a tag without any siblings -->
<select name="age" id="form-age">
<option value="">Choose Age</option>
</select>
</div> <!-- you MUST wrap the select in a tag without any siblings -->
Here is the function to APPEND/ADD values:
function addOptions(el, options){
// checks to make sure element exists and is a select
if(el && el.type === "select-one"){
el.innerHTML = el.innerHTML + options;
el.parentNode.innerHTML = el.outerHTML; // needed for IE
}
}
Now to execute the function pass in the select object and string values:
addOptions(
document.getElementById("form-age"),
'<option value="1">18-25</option><option value="2">26-35</option><option value="3">36-45</option><option value="4">46-55</option><option value="5">56-65</option><option value="6">66-75</option><option value="7">76-85</option><option value="8">86+</option>'
);
This will generate a select with the options passed, even in IE!
<div> <!-- you MUST wrap the select in a tag without any siblings -->
<select name="age" id="form-age">
<option value="">Choose Age</option>
<option value="1">18-25</option><option value="2">26-35</option><option value="3">36-45</option><option value="4">46-55</option><option value="5">56-65</option><option value="6">66-75</option><option value="7">76-85</option><option value="8">86+</option>
</select>
</div> <!-- you MUST wrap the select in a tag without any siblings -->
If you needed the script to REPLACE the values use the following:
function replaceOptions(el, options){
if(el && el.type === "select-one"){
el.innerHTML = options;
el.parentNode.innerHTML = el.outerHTML; // needed for IE
}
}
I hope this helps someone else!

A quick search shows this has been a known bug in IE since at least IE5. You could try to use createElement and make options and append to the select object, or use a library like jQuery and append the html to the node (which must take care of the magic necessary to work in IE).

The real cause of the problem is that due to a DOM parsing/updating problem, IE will not insert child option elements into a select element. Even IE9 still has this problem (later versions not checked).
You have to put the select in a div or span and replace the whole select. Below you will find an example that shows that then IE will play ball as well. Because this innerHTML problem generally occurs when dynamically generating selects, I made an AJAX & PHP example.
The html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chain(ed) select with AJAX and PHP</title>
<style>
select {
min-width: 170px;
}
option.toSelect {
background: yellow;
}
</style>
</head>
<body>
<form action="whatever.php">
<span>
<select id="cities" onchange="getOptions(this.value,'airlinesContainer')">
<option value="">Select a city:</option>
<option value="boston_airlines">Boston</option>
<option value="chicago_airlines" class="toSelect">Chicago</option>
<option value="newyork_airlines">New York</option>
</select>
</span>
<span id="airlinesContainer">
<select>
</select>
</span>
<span id="classesContainer">
<select>
</select>
</span>
</form>
<script>
function getOptions(qValue,containerId) {
var ajaxRequest = new XMLHttpRequest();
if ((qValue == "") || (containerId == "")) {
alert('Invalid selection.');
return;
}
ajaxRequest.onreadystatechange = function() {
if ((ajaxRequest.readyState == 4) && (ajaxRequest.status == 200)) {
document.getElementById(containerId).innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET","getoptions.php?q="+qValue,true);
ajaxRequest.send();
}
</script>
</body>
</html>
.
And the php file, which should be named 'getoptions.php' and should be put in the same folder:
<?php
$q = $_GET['q'];
$chicago_airlines ='
<select id="airlines" onchange="getOptions(this.value,\'classesContainer\')">
<option value="">Select an airline:</option>
<option value="delta_classes">Delta</option>
<option value="klm_classes" class="toSelect">KLM</option>
<option value="united_classes">United Airlines</option>
</select>';
$klm_classes ='
<select id="classes">
<option value="business">World Business Class</option>
<option value="comfort">Economy Comfort</option>
<option value="economy">Economy</option>
</select>';
if ($q == 'chicago_airlines') {
echo $chicago_airlines;
}
elseif ($q == 'klm_classes') {
echo $klm_classes;
}
else {
echo '<select>
<option>Invalid selection</option>
</select>';
}
?>
.
Be sure to select only the options with a yellow background, in this demo.

use Jquery
$('#bandwidth').html('<option value="DS-1">DS-1</option><option value="DS-3">DS-3</option><option value="OC-3">OC-3</option><option value="OC-12">OC-12</option>');