The url redirection is not working. I need to let users to select a city and go to the url page. What am I doing wrong?
window.location.href = 'http://' + city + '.example.com';
Thank you.
<script type="text/javascript" src="/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
var cityChosen = getCookie('citychosen');
if(cityChosen!=null && cityChosen!=''){
var chosen = $('#choose option[value="'+cityChosen+'"]');
chosen.attr('selected',true);
}
$("#choose").change(function(){
var selected = $("#choose option:selected");
var output = "";
window.location.href = 'http://' + city + '.example.com';
if(selected.val() != 0){
setCookie('citychosen',selected.val(),365);
}
$("#output").removeClass().addClass(selected.val()).html(output);
});
});
function setCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function dropCookie(name) {
createCookie(name,"",-1);
}
//]]>
</script>
</head>
<body>
<select id="choose">
<option value="0">Select city</option>
<option value="amsterdam">Amsterdam</option>
<option value="newyork">New York</option>
<option value="london">London</option>
<option value="cardiff">Cardiff</option>
</select>
You seewindow.location.href here in this code is only a property that deals with the Url location. You need to set it to something in order to function.
The window.location.href is as same as var x="something" here.
So use the method window.open() which serves your purpose
window.open(window.location.href);
Note: There might be any mistake in spellings or syntax. i have just explained functionality. You can use varied parameters also. Have a look at this
First try to move window.location.href to the bottom of the $("#choose").change(function() {}); listener. Second, you are referencing a non-existent city variable, rename that to cityChosen.
Related
I want to make the customer choose a color and then when he go to other page, the color stay the same. this is the code for the choosing color on the first page:
<select id="color" style="width: 5%; height: 10%" size="5">
<option value="white">White</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<script>
document.getElementById("color").onchange = function () {
document.body.style.background = this.options[this.selectedIndex].value;
}
This seems like a good use case for localStorage:
document.querySelector('#color').addEventListener('change', function () {
document.body.style.background = this.value;
localStorage.setItem('appColor', this.value);
});
document.body.style.background= localStorage.getItem('appColor');
See this Fiddle. Each time you choose a color, it's remembered and will be the default color the next time you run it.
Side note: You can simplify this:
this.options[this.selectedIndex].value;
… to this:
this.value;
This should be your script:
<body onload="OnLoad()"> //onLoad: run the function OnLoad() when the body is being load
<select id="color" style="width: 5%; height: 10%" size="5">
<option value="white">White</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<script>
function OnLoad() {
document.getElementById("color").onchange = function () { //Getting the background color from the select
document.body.style.background = this.options[this.selectedIndex].value; //Setting the background color
document.cookie="WebBackgroundColor=" + this.options[this.selectedIndex].value; //Storing in a cookie named: WebBackgroundColor the color that was chosen
}
var color = getCookie("WebBackgroundColor"); //Getting the color stored on the cookie
document.body.style.background = color; //Setting the background color to the same color as stored in the cookie
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
</script>
</body>
To add this script to other pages you need to change the body from: <body> to <body onload="OnLoad()">
and you need to add all the script thing at the bottom of the page (or the header part):
<script>
function OnLoad() {
document.getElementById("color").onchange = function () { //Getting the background color from the select
document.body.style.background = this.options[this.selectedIndex].value; //Setting the background color
document.cookie="WebBackgroundColor=" + this.options[this.selectedIndex].value; //Storing in a cookie named: WebBackgroundColor the color that was chosen
}
var color = getCookie("WebBackgroundColor"); //Getting the color stored on the cookie
document.body.style.background = color; //Setting the background color to the same color as stored in the cookie
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
</script>
I'm having trouble with some code not working, and I'm not sure why. (I am a 1st year Computer Science student as don't know much about this)
<head>
<link rel="stylesheet" type="text/css" href="Task1.css" title="Normal">
<link rel="alternate stylesheet" type="text/css" href="Task1BaW.css" title="Other">
<script type="text/javascript" src="/scripts/styleswitcher.js">
</script>
</head>
<body>
<div id="header"> <!-- header -->
<button onclick="setActiveStyleSheet('Normal')">Change style to default</button>
<button onclick="setActiveStyleSheet('Other')">Change style to Easy view</button>
</div> <!-- end of header-->
Basically I want it to switch to the "Normal" Css when the 1st button is pressed, and switch to the "Other" Css when the 2nd button is pressed.
Thanks.
NB: I've changed the ‘’ to '(thanks for pointing that out, that was a stupid mistake) and not getting any errors that I'm aware of. Still doesn't seem to be working yet. I'm writing this is PSPad, if that helps at all. And trying it in the IE that PSPad opens and Chrome.
Also, changing the CSS should change the background and text size.
styleswitcher.js code:
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
If anyone has a simpler way of doing this instead of fixing this, and can explain it to me so I can understand why it works, I'd appreciate it too.
In javascript, you have to use ' or ".
Your quote ‘ and ’ isn't valid.
Since you did that, even StackOverflow's syntax highlighting failed!!
Try using this :
<div id="header"> <!-- header -->
<button onclick="setActiveStyleSheet('Normal')">Change style to default</button>
<button onclick="setActiveStyleSheet('Other')">Change style to Easy view</button>
</div> <!-- end of header-->
Just off the get go I am incredibly new to javascript, apologies for any silly comments or obvious mistakes in advance.
This is what I'm currently working with:
<div id="currency_select">
<form action="/Default.asp?" method="post" name="CurrencyChoice">
<select onchange="this.form.submit()" name="ER_ID">
<option value="3">EUR</option>
<option value="2">GBP</option>
</select>
<script type="text/javascript">
document.forms['CurrencyChoice'].elements['ER_ID'].value = '';
</script>
</form>
</div>
I want the value from the following cookie "ER%5fID" to be read and then inserted in the value=''field above.
To be completely honest I'm at abit of a loss as I'm not sure what the best way is to read the cookie's value and then have its value inserted where I want.
Once again apologies for any newbie mistakes. I'm having to learn javascript on the fly and I had to start a few days ago.
So I have spent a fair amount of time today trying to figure out what I need which I think is this:
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
However I'm still unsure as to how to have the appropriate result return within the value field?
Thanks in advance for any assistance.
I am sorry I just do not care to rewrite this, the W3Scools tutorial on cookies is quite comprihensive and even gives you fully completed functions for reading and writing cookies.
It's also a good resource for general JS learning so you should definitely check it out.
The code there is as follows:
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
And usage is:
function checkCookie()
{
var username=getCookie("username");
if (username!="")
{
alert("Welcome again " + username);
}
else
{
username = prompt("Please enter your name:","");
if (username!="" && username!=null)
{
setCookie("username",username,365);
}
}
}
But you can read more in W3Scools own website.
EDIT : So here is the promised fully functional sample in your specific case:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Cookie Example</title>
<script type="text/javascript">
//adds the [String].trim() method to the [String] object if missing
if(!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g,'');
};
}
var cookieName = "ER_ID";
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++){
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
function setOptionFromCookie() {
var select = document.getElementById('ER_ID'), index, value = getCookie(cookieName);
index = select.options.length;
while(index--) {
if(select.options[index].value == value) {
break;
}
}
if(index > -1) {
select.selectedIndex = index;
} else {
alert('no such value in selection');
}
}
function setValue() {
var value = document.getElementById('value').value;
setCookie(cookieName, value, 365);
}
</script>
</head>
<body>
The value that will go into the cookie "ER_ID": <input id="value" value="2" />
<br/>
<button onclick="setValue()">Set Cookie</button>
<button onclick="setOptionFromCookie()">Set Option from cookie</button>
<hr />
<div id="currency_select">
<form action="/Default.asp?" method="post" name="CurrencyChoice">
<select onchange="this.form.submit()" id="ER_ID" name="ER_ID">
<option value="1" selected="selected">Select Currency</option>
<option value="3">EUR</option>
<option value="2">GBP</option>
</select>
<script type="text/javascript">
</script>
</form>
</div>
</body>
</html>
Because I do not have such a cookie in my browser I also made a possibility for you to set the cookie. But it should be fairly easy to understand. Simply set the cookie first and then press "Set Option from cookie" to read the cookie and set the option based on the value.
I want to make a cookie to remember a radius that a user can choose. The problem is that the cookie works, but the value of the cookie is undefined. I don't know what I am doing wrong.
The function "opslaan" is linked with a button on the HTML page.
function opslaan()
{
createCookie('radius',document.getElementById("range").value,8);
alert("opgeslagen");
}
function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ')
c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0)
return c.substring(nameEQ.length,c.length);
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = ";expires=" + date.toGMTString();
}
else
var expires = "";
document.cookie = name + "=" + value + expires +";path=/";
}
This is the button and the range field where it need to get the value out:
<fieldset class="one-third column">
<label for="">Radius van de kaart (km)</label>
<input type="range"
min="5"
max="20"
value="5"
step="5"
onchange="showValue(this.value)" />
<span id="range">5</span>
<script type="text/javascript">
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
</script>
</fieldset>
<script>
alert(readCookie('radius'));
</script>
<div class="one-third column">
<a class="full-width button margin-top25"
href="home.html"
onclick="opslaan()">
Opslaan
</a>
</div>
It seems to be working without the range field and button.
In your case range is a span not an input element, so you need to use innerHTML property to read the contents of that element instead of using value.
use
document.getElementById("range").innerHTML
instead of
document.getElementById("range").value
Ex:
function opslaan()
{
createCookie('radius',document.getElementById("range").innerHTML,8);
}
Demo: Fiddle
document.getElementById("range").value is going to return undefined. Which is your problem here. Try using document.getElementById("range").innerHTML
I have a dropped down button and when chosen will be save to cookie.
I have to save in cookie so that I can redeem in the checkout page.
Have this so far but cant save them to the cookies:
function storeValues(form)
{
setCookie("product1",form.product1.value);
return true;
}
</script>
<ul>
<li><img src="images/1.jpg" alt="Product1" />
100% Pure Glutamine Powder</br>
Ultimate Recovery Fuel!*</br>
Supports Recovery From Workouts!*</br>
<form name="myform" action="checkout.html" method="POST">
<div align="center">
$12.99</br>
Select Quantity
<select name="product1" onchange="return storeValues(this);">>
<option value="1">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</li>
There is no setCookie function in js. You can either use the jQuery cookie library or create your own set cookie function.
Use something like this (taken from http://www.quirksmode.org/js/cookies.html)
function setCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}