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
Related
I tried to set readonly attribute to second select2 based on value of first select2 option.
I have my script as below:
<select name="Name" id="Name" style='width:45%'>
<option value="1">disable</option>
<option value="2">enable</option>
</select>
<select name="Name2" id="Name2" style='width:45%'>
<option value="d">David</option>
<option value="b">Bob</option>
</select>
My JS script is to set it is like below:
$(document).ready(function(){
$('#Name,#Name2').select2();
$('#Name').change(function(){
var val = $(this).val();
if(val==1)
{
$('#Name2').attr('readonly','readonly');
}else
{
$('#Name2').removeAttr('readonly');
}
})
})
However, the script above won't be working for select2 option but for textbox is fine. (Fiddlejs)
I tried to search some sources here but it did not help.
Thanks.
The above answers are not going to work with the updated versions of select2,
follow the link for the hack
https://stackoverflow.com/a/55001516/9945426
use .prop() to set disabled or not based on the value
$(document).ready(function() {
$('#Name').change(function() {
var val = $(this).val();
$('#Name2').prop('disabled', val == 1);//prop disabled
}).change();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Name" id="Name" style='width:45%'>
<option value="1">disable</option>
<option value="2">enable</option>
</select>
<select name="Name2" id="Name2" style='width:45%'>
<option value="d">David</option>
<option value="b">Bob</option>
</select>
Use jQuery .prop() method like this
$('#Name2').prop("disabled", true) for disable and
$('#Name2').prop("disabled", false) for enabling select2.
Here is the (Fiddlejs)
This is my HTML:
<div id="hiddenDiv" style="display: none;">
<h1 id="welcomehowareyou">How are you today, ?</h1>
<select name="mood" id="mood">
<option value="" disabled selected>How are you?</option>
<option value="m1">I'm doing great, thanks!</option>
<option value="m2">I'm fine, but could be better.</option>
<option value="m3">I feel absolutely terrible today.</option>
<!--<input type="submit" value="Done!"/>-->
</select>
<p></p>
</div>
How do I make a different alert (doesn't matter if PHP or JavaScript; which ever is easiest) appear when they select an option?
Also, when they click ok to the option, how do I make that re-direct them to a different link?
See the fiddle
You'll have to use the onchange listener for the <select>..So, the <select> should be as follows
<select name="mood" id="mood" onchange="myFunction()">
<option value="" disabled selected>How are you?</option>
<option value="m1">I'm doing great, thanks!</option>
<option value="m2">I'm fine, but could be better.</option>
<option value="m3">I feel absolutely terrible today.</option>
<!--<input type="submit" value="Done!"/>-->
</select>
and the script that is used is as follows
function myFunction() {
var x = document.getElementById("mood").value;
alert(x);
}
This works with pure Javascript. No need for jQuery.
UPDATE
As #LyeFish mentioned in his comments you can code it like the one in this fiddle..
Here the <select> is as follows
<select name="mood" id="mood" onchange="myFunction(this.value)">
<option value="" disabled selected>How are you?</option>
<option value="m1">I'm doing great, thanks!</option>
<option value="m2">I'm fine, but could be better.</option>
<option value="m3">I feel absolutely terrible today.</option>
</select>
and the javascript for this will be
function myFunction(val) {
alert(val);
}
UPDATE 2
function myFunction(val) {
alert(val);
window.location.href = "http://google.co.in/";
}
You can call your JavaScript function in onchange evenet , as follows
<div id="hiddenDiv" >
<h1 id="welcomehowareyou">How are you today, ?</h1>
<select name="mood" id="mood" onchange="alert(this.value);window.location = 'http://www.google.com';">
<option value="" disabled selected>How are you?</option>
<option value="m1">I'm doing great, thanks!</option>
<option value="m2">I'm fine, but could be better.</option>
<option value="m3">I feel absolutely terrible today.</option>
</select>
</div>
<!--
You can write JS function to do as per your requirement and call the function in onchange event.
Here it is alerting the selected value and redirecting to http://google.com.
You can redirect to different website also using conditional statement.
-->
You need to detect the change event of the select, and then view the elected option.
Like that:
$('#mood').on('change', function() {
//alert( this.value ); // or $(this).val()
switch(this.value){
case "m1":
alert("option 1");
break;
case "m2":
alert("option 2");
break;
case "m3":
alert("option 3");
break;
}
});
https://jsfiddle.net/2qpwhz6h/
I'm new to Javascript and I'm trying to link two comboboxes ! In the first combo box I have the names of some states in greece and in the other the cities ! In the second I have all the cities in Greece and I want when I select a state from the first combo box only certain cities to appear on the second ! For example if I select Attikis , then I want to be shown in dropdown menu only Agias Paraskeuis and not Agias Varvaras and Agiou Dimitriou and vice versa !
My code is this :
<form action="?" method="get">
<div class="jtype">
<label for="nomos"> Νομός </label>
<form name="nomoi_poleis" action="">
<select id="combo_nomoi" name="combo_nomoi" onchange="cityChange()" >
<option value="attikis"> Attikis</option>
<option value="thessalonikis"> Thessalonikis</option>
</select>
<br></br>
<label for="poli">Πόλη</label>
<select id="poleis" name="poleis">
<option value="agias varvaras"> Agias Varvara</option>
<option value="agias paraskeuis">Agias Paraskeuis</option>
<option value="agiou dimitriou"> Agiou Dimitriou</option>
</select>
</form>
</div>
</form>
Ana my JS :
<script type="text/javascript">
function changeCity(){
var nomos = document.getElementById("combo_nomoi");
if (nomos.value == "attikis"){
document.getElementById("attikis");
}
else{
document.getElementById("thessalonikis");
}
}
</script>
0The easiest way is to have a set of <select> menus, all but one of which has its display property set to none, with the one you want to display set to inline. Then in your onchange handler you run through your list of selects in a loop, setting the display property accordingly. Note inline event handlers like that are not very good practice; better to set them up via JavaScript in your page initialisation code. It misght look something like:
(HTML)
<select id="states">
<option value="0" selected="selected">State 1</option>
<option value="1">State 2</option>
...
</select>
<select id="cities_0" style="display: inline;">
<option value="...">Name 1</option>
<option value="...">Name 2</option>
...
</select>
<select id="cities_1" style="display: none;">
<option value="...">Name 1</option>
<option value="...">Name 2</option>
...
</select>
JavaScript
function change_city(evt)
{
var states=document.getElementById('states'),whichstate;
whichstate=states.options[state.selectedIndex].value;
for(var i=0;i<states.options.length;i++)
document.getElementById('cities_'+i).style.display=(i==whichstate ? 'inline' : 'none');
}
The following is a crude example(using only JS) to get this working:
http://jsfiddle.net/FMZ2H/
HTML
<form action="?" method="get">
<div class="jtype">
<label for="nomos">Νομός</label>
<form name="nomoi_poleis" action="">
<select id="combo_nomoi" name="combo_nomoi">
<option value="attikis">Attikis</option>
<option value="thessalonikis">Thessalonikis</option>
</select>
<br></br>
<label for="poli">Πόλη</label>
<select id="poleis" name="poleis">
<option id="option1" value="agias varvaras">Agias Varvara</option>
<option id="option2" value="agias paraskeuis">Agias Paraskeuis</option>
<option id="option3" value="agiou dimitriou">Agiou Dimitriou</option>
</select>
</form>
Javascript:
document.getElementById("combo_nomoi").onchange = cityChange
function cityChange() {
var elem = document.getElementById("combo_nomoi");
if (elem.options[elem.selectedIndex].text == "Attikis") {
document.getElementById("option1").disabled = true;
document.getElementById("option2").disabled = false;
document.getElementById("option3").disabled = false;
}
if (elem.options[elem.selectedIndex].text == "Thessalonikis") {
document.getElementById("option1").disabled = false;
document.getElementById("option2").disabled = true;
document.getElementById("option3").disabled = true;
}
}
As shown above, you could disable the options you don't want your user to select. I'll leave it to you to do it an better way than selecting each option by their id.
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;
}
I'm trying to get the value of a drop-down menu selection. Here's my XHTML:
<form action="(EmptyReference!)" method="get" name="myForm" id="myForm" onsubmit="myValidation(this)">
<fieldset>
<select name="mySelect" id="mySelect">
<option value="o1" selected="selected">Option 1</option>
<option value="o2">Option 2</option>
<option value="o3">Option 3</option>
<option value="o4">Option 4</option>
</select>
And here's my JavaScript:
if (myForm.mySelect.options[myForm.mySelect.options.selectedIndex].value == 'o1')
[...];
else if (myForm.mySelect.options[myForm.mySelect.options.selectedIndex].value == 'o2')
[...];
else if (myForm.mySelect.options[myForm.mySelect.options.selectedIndex].value == 'o3')
[...];
else
[...];
It works perfectly in IE and Chrome. But when I press the submit button in Firefox, nothing happens. Firebug tells me myForm is not defined. What gives? Is there a workaround?
You should use getElementById() for best compatibility.
var mySelect = document.getElementById('mySelect');
if (mySelect.options[mySelect.options.selectedIndex].value == 'o1')
...
as far as i know you should be using document.myForm