We Keep Coding

PHP dropdown if value is selected

I currently have a block of jQuery that I have included this seems to work fine on the comps I have tested OSX, XP however on mobile devices and another computers I have had people to test its still going to the old URL however I do suspect it could be a cache issue but is there a way to develop a PHP fall back?
What I would like to do if the prop2 value is selected I would like to change the form action url almost onclick like the jQuery does.
HTML:
<form action='bookingurl' method='get'>
<label for='channel_code' class="caption">Select property </label>
<select id='channel_code' name='id'>
<option value='prop1'>Prop 1</option>
<option value='prop2'>Prop 2</option>
</select>
</form>
jQuery:
jQuery(document).ready(function(){
jQuery('#channel_code').change(function(){
if(jQuery('#channel_code').val() == 'prop2'){
window.location.href = 'https://hotels.cloudbeds.com/reservation/url';
}
});
});

$(document).ready(function() {
$('#channel_code').change(function() {
if ($('#channel_code option:selected').val() == 'prop2') {
alert("go to")
//window.location.href = 'https://hotels.cloudbeds.com/reservation/url';
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='bookingurl' method='get'>
<label for='channel_code' class="caption">Select property</label>
<select id='channel_code' name='id'>
<option value='prop1'>Prop 1</option>
<option value='prop2'>Prop 2</option>
</select>
</form>
Specify the selector as:
$('#channel_code option:selected').val()//meaning option selected value

creating a variable with a value of a drop down selection input (javascript)

I've had a hard time finding a similar question for this, and its probably simple but just slipping my mind.
I've got a drop down menu, you make your selection and submit it, it jumps to 2ndpage.html?location=locationName
I'm trying to create a variable with a value of the "locationName" to use in a link that would use that value as a string like "www.locationName.com",
i've tried using something like
var locationName = getElementById("location").value;
and other similar ways but the variable seems to keep coming up undefined. And this seems to be the only thing stopping me from finishing my project, lol.
Thanks in advance.

You would find the value and text by accessing this.selectedIndex of the selection list. Use http:// for absolute link to a page.
<select id="locations">
<option value="http://www.google.com">Location 1</option>
<option value="http://www.loogle.com" selected="selected">Location 2</option>
<option value="http://www.foogle.com">Location 3</option>
</select>
var e = document.getElementById("locations");
e.addEventListener('change', function (){
var locationValue = this.options[this.selectedIndex].value;//www.loogle.com
var locationText = this.options[this.selectedIndex].text;//Location 2
window.location = locationValue;
});

Try this:
<p>Location: </p>
<select id="location">
<option value="location1">location 1</option>
<option value="location2">location 2</option>
<option value="location3">location 3</option>
</select>
<script>
var locationName = document.getElementById("location").value;
</script>
Or try this:
<p>Location: </p>
<select name="location">
<option value="location1">location 1</option>
<option value="location2">location 2</option>
<option value="location3">location 3</option>
</select>
<script>
var locationName = document.getElementsByName("location")[0].value;
</script>

Select option dropdown and Javascript

I have this script which I use to link to other sites, but I want to make another one of these, but if I copy all this, except the Javascript, the script breakes and the selects don't go to the given urls anymore.
How could I make this work, the best possible way, with multiple select forms?
<form name="event_type_selector" method="post" action="#">
<select name="url_list" class="event-type-selector-dropdown" onchange="gotosite()">
<option value="" selected="selected" disabled="disabled">Vælg venligst...</option>
<optgroup label="Selection 1:">
<option value="?value-now1">Value-Now 1</option>
</optgroup>
<optgroup label="Selection 2:">
<option value="?value-now2">Value-Now 2</option>
</optgroup>
</select>
<script language="javascript">
function gotosite() {
var URL = document.event_type_selector.url_list.options[document.event_type_selector.url_list.selectedIndex].value;
window.location.href = URL;
}
</script>

Just pass in a reference to the <select> in the onchange event. That way you don't need to reference the SELECT from the global scope:
<select ... onchange="gotosite(this)">
function gotosite(select) {
window.location.href = select.value;
}

Script dosen't work in IE

This works fine in all the other browsers except for IE. Even in IE10 it doesn't want to cooperate. Any help would be appreciated. I have a form with a drop down menu that when different a user makes a selection it brings up a div with a different form we have 10 forms in all that they can choose from. Right now it does nothing in IE, no console errors or anything.
Script
var sections = {
'second': 'section2',
'third': 'section3',
'forth': 'section4',
'fifth': 'section5',
'sixth': 'section6',
'seventh': 'section7',
'eigth': 'section8',
'ninth': 'section9',
'tenth': 'section10',
'eleventh': 'section11'
};
var selection = function (select)
{
for (i in sections)
document.getElementById(sections[i]).style.display = "none";
document.getElementById(sections[select.value]).style.display = "block";
}
$("#target option")
.removeAttr('selected')
.find(':first')
.attr('selected', 'selected');
The HTML
<select id="forms" onchange="selection(this);">
<option >Select an option</option>
<option value="tenth">General Inquiry</option>
<option value="second">Account Inquiry</option>
<option value="third">ARC Request</option>
<option value="forth">Contact Information Update</option>
<option value="fifth">Contact your Board</option>
<option value="sixth">Document Request</option>
<option value="seventh">Maintenance Issue Reporting</option>
<option value="eigth">Violations Reporting</option>
<option value="ninth">Closing Statement</option>
<option value="eleventh">Request for Proposal</option>
</select>
Then 11 divs
<div id="section10" style="display:none;">
<h2>General Inquiry</h2>
</div>

Your problems turns out to be that selection has special meaning inside IE.
For your code, IE produces following error
SCRIPT5002: Function expected
Which tells something about the issue.
A workaround to prevent this issue is to change your function name, like
var selectionFunc = function (select){...}
and in your markup,
<select id="forms" onchange="selectionFunc(this);">
....
</select>
I hope it helps

Using numeric values to select item from a dropdown box with JavaScript

I have a multitude of dropdown boxes within my web page. One of these dropdown boxes is used for a single selected value out of a list of options.
<SELECT id="Box0" name="">
<OPTION value="1920">my weird description</OPTION>
<OPTION value="1225">other weird description</OPTION>
<OPTION value="3112">some name dynamically fetched</OPTION>
</SELECT>
How can I add an event to this section, so when it is in focus, I could use numeric keys like 1,2.. to select an option instead of using the mouse or arrow keys for selecting an option? For clarification: if I press 1 on my keyboard, the selected value would become the first value from that list, with 2 the selected value becomes second value from that list.
I choose not to use a library/framework such as JQuery/Mootools.

You could put a 'rel' attribute on each option which would be the required key for selecting that option. So, for your example it could be:
<select id="Box0" name="">
<option value="0" rel="0">None</option>
<option value="1" rel="1">First</option>
<option value="2" rel="2">Second</option>
<option value="3" rel="x">Millionth</option>
</select>
You wouldn't be looking for the onfocus() event though, you would be looking for the onkeydown() (or similar) event on the select box, which could look something like this:
var MySelect = document.getElementById('Box0');
var MyOptions = MySelect.getElementsByTagName('option');
var KeyPressed = //detect which key has been pressed. I can't remember the
//specific code for this off the top of my head
for (i=0; i<MyOptions.length; ++i) {
if (MyOptions[i].rel == KeyPressed) {
MyOptions[i].selected = true;
} else {
MyOptions[i].selected = false;
}
}

If you have less than 10 options, simply add the number to the text:
<option value="0">0 none</option>
<option value="1">1 first</option>
<option value="2">2 second</option>
or perhaps easier to read:
<option value="0">0 none</option>
<option value="1">1st</option>
<option value="2">2nd</option>
No other coding necessary

I think this can solve your problem
<html>
<head>
<script type="text/javascript">
function selectvalue(e){
e = e || event;
var key = e.which || e.keyCode;
if(!e.shiftKey && key >= 48 && key <= 57){
var option = this.options[key - 48];
if(option){
option.selected = "selected";
}
}
}
</script>
</head>
<body>
<SELECT id="Box0" name="" onkeypress="selectvalue.apply(this, arguments)">
<OPTION value="1920">my weird description</OPTION>
<OPTION value="1225">other weird description</OPTION>
<OPTION value="3112">some name dynamically fetched</OPTION>
</SELECT>
</body>
</html>
The javascript looks little messy because it has to handle IE and all other browsers.
IE does not pass an event object to the handler function instead we have to use the global event object.
Same way the keycode also is stored in keyCode instead of which in IE.