<script type="text/javascript">
function jumpto(x)
{
if (document.form1.jumpmenu.value != "null") {
document.location.href = x
}
}
</script>
<body onLoad="startup()">
<form name="form1">
<select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)">
<option>Jump to...</option>
<option value="http://www.ecortes.brinkster.com/">Homepage</option>
<option value="htttp://www.google.com/">Aesop's Fables</option>
<option value="http://www.quackit.com/html/">HTML</option>
<option value="http://www.quackit.com/css/">CSS</option>
<option value="http://www.quackit.com/sql/tutorial">SQL</option>
<option value="http://www.quackit.com/database/tutorial">Database Tutorial</option>
<option value="http://www.xtechride.com">Web Hosting Tutorial</option>
</select>
</form>
So my javascript code is supposed to create a jump menu, but once I load the website the jump menu shows up but the links don't redirect me to the links I wrote. Any help figuring out what the error could be would be appreciated.
You can drastically simplify this by using some very slightly more modern HTML and JavaScript practices.
<script type="text/javascript">
function jumpto()
{
if (this.value) {
document.location.href = this.value;
}
}
</script>
<form>
<select onchange="jumpto()">
Related
I have tried to add multi language button to my site in the form of a select tag with options for each language which redirects to the home pages for each language.
However, this seems to work only on PC Browsers and not on Mobile browsers.
what is the problem?
Here is the my code:
<!--Changing language client side-->
<script type="text/javascript">
function Redirect_en(){
window.location="index.html";
}
function Redirect_fr(){
window.location="fr/fr-index.html";
}
function Redirect_es(){
window.location="es/es-index.html";
}
function Redirect_zh(){
window.location="zh/zh-index.html";
}
</script>
.
...
<span id="lang_header_form">
<form method="POST" id="lang_form">
<select name="language" id="lang_select">
<option value ="English" onclick="Redirect_en();" selected>English</option>
<option value = "French" onclick="Redirect_fr();">French</option>
<option value="Spanish" onclick="Redirect_es();">Spanish</option>
<option value="Chinese" onclick="Redirect_zh();">Chinese</option>
</select>
</form>
</span>
<select id="Lang" onchange="changeLang(this)">
<option value="en">English</option>
<option value="fr">French</option>
</select>
<script>
function changeLang(selectObject) {
switch(selectObject.value){
case 'en': window.location="/index.html"; break;
case 'fr': window.location="fr/fr-index.html"; break;
}
}
</script>
The above example gets you the selected language on OnChange event. which should work in mobile
Try this
function redirect(self){
window.location = self.value + 'index.html';
}
<select name="language" onchange="redirect(this);">
<option value="" selected>English</option>
<option value="fr/fr-">French</option>
<option value="es/es-">Spanish</option>
<option value="zh/zh-">Chinese</option>
</select>
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
I tried to find a solution with the stackoverflow search but I did not understand what I found.
Basically I want to have a List from which I can choose a value, which changes a link from the button. I think I need Javascript for it, so I want to ask you, how the code would look like?
EDIT:
So basically i want choose one option of the select, and every option has an own link to another html page. If i click on a button the html page of the chosen option opens. How do I do it with Java Script?
<form action="select.html">
<select name="Bundesländer" size="16">
<option selected>Baden-Würtemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
Just check it. Hope this is what you want.
function selectFunction() {
var x = document.getElementById("selectopt").value;
document.getElementById("mylink").innerHTML = x;
document.getElementById("mylink").href = "http://www." + x + ".com";
}
<form action="select.html">
<select id="selectopt" onchange="selectFunction(this);" name="Bundesländer" size="16">
<option selected>Baden-Würtemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
<a id="mylink" style="position:absolute;top:0;right:0;" href="http://google.com">Link</a>
You can use this code:
<script type="text/javascript">
function redirect(select) {
window.location = select.options[select.selectedIndex].getAttribute('data-link');
}
</script>
<form action="select.html">
<select name="Bundesländer" size="16" onChange="redirect(this)">
<option data-link="http://www.google.fr/" selected>Baden-Würtemberg</option>
<option data-link="http://www.google.com/">Bayern</option>
<option data-link="http://www.google.de/">Berlin</option>
<option data-link="http://www.google.it/">Brandenburg</option>
<option data-link="http://www.google.be/">Bremen</option>
<option data-link="http://www.google.be/">Hamburg</option>
<option data-link="http://www.google.be/">Hessen</option>
<option data-link="http://www.google.be/">Mecklenburg Vorpoomern</option>
<option data-link="http://www.google.be/">Niedersachsen</option>
<option data-link="http://www.google.be/">NRW</option>
<option data-link="http://www.google.be/">Rheinland</option>
<option data-link="http://www.google.be/">Saarland</option>
<option data-link="http://www.google.be/">Sachsen</option>
<option data-link="http://www.google.be/">Sachsen-Anhalt</option>
<option data-link="http://www.google.be/">Schleswig-Holstein</option>
<option data-link="http://www.google.be/">Thüringen</option>
</select>
</form>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('select').change(function () {
$('#btn').attr('url_value', $(this).val());
});
$('#btn').click(function () {
window.open($(this).attr('url_value'));
// alert($(this).attr('url_value'))
});
});
</script>
<body>
<form >
<input type="button" value="Open Selected" id="btn" url_value=""/>
<select name="Bundes" >
<option selected>Baden-</option>
<option>http://www.w3schools.com</option>
<option>http://www.gmail.com</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg </option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>test</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
</body>
</html>
I think you want to change the action in the form based on selected option.
Use the code bellow:
<!DOCTYPE html>
<html>
<body>
<form action="Bayern.html" id="form" name="form" accept-charset="UTF-8">
<input type="submit">
</form>
<select id="dropwdown" name="dropwdown" onchange="chgAction();">
<option selected>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
<script>
function chgAction()
{
var selectedOption = document.getElementById("dropwdown").value;
if(selectedOption == "Hessen" ) {
document.getElementById('form').action = "Hessen.html";
}
else if(selectedOption == "NRW" ) {
document.getElementById('form').action = "NRW.html";
}
//Apply the same logic for each option ...
}
</script>
</body>
</html>
My form is :
<div>
<form name="redirect">
<select name="selection">
<option value="">--------service--------</option>
<option value="plumber.jsp">PLUMBER</option>
<option value="electrician.jsp">ELECTRICIAN</option>
<option value="carpenter.jsp">CARPENTER</option>
</select>
<select name="locality">
<option value="">--------select--------</option>
<option value="KOMMADI">KOMMADI</option>
<option value="MVP">MVP</option>
<option value="RTC">RTC</option>
</select>
<input type=submit value="Go!" onClick="WinOpen();">
</form>
and the javascript is
<script language="javascript">
function WinOpen() {
var url = document.redirect.selection.value;
document.location.href = url;
response.sendRedirect(url);
}
</script>
The above code is not working for me. The page just refreshes instead of redirecting. I want to redirect to page based on the selection value and also send the locality parameter to the other page.
Change your javascript like this.It will assign value of selection to the action attribute of form.
<script language="javascript">
function WinOpen()
{
document.redirect.action = document.redirect.selection.value;
document.redirect.submit();
}
</script>
It should work.
One more thing,you can access your locality paramter on the destination jsp by
String locality=request.getParameter("locality");
i have this simple html code
<html>
<body>
<select name="country" id="country">
<option value="1">Falkland Islands (Malvinas)</option>
<option value="2">canada</option>
<option value="3">Finland</option>
<option value="4">France</option>
<option value="5">United Kingdom</option>
<option selected="selected" value="12">United States</option>
</select>
</body>
</html>
if this dropdown menu is in the bottom of a webpage, and whenever the user selects one of the options on the menu, the user automatically go to the top of the webpage without reloading, i know it's simple but i could't do it, hope you help me guys, thanks.
In the head of your file, place this little snippet:
<script type="text/javascript">
window.onload = function(){
document.getElementById("country").onchange = function(){
window.scrollTo(0, 0);
};
};
</script>
There's no need to load jQuery for a simple action such as this; it's pointless to include such a large file for something Vanilla JavaScript can handle with ease.
This should take care of it for you... Add this to your <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("select#country").change(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
});
</script>