How to make a page redirect using JavaScript?

Question

I'm making a shopping mall website using a Yahoo solution. I have multiple options for items and some items have different price dependent on the options.

Yahoo doesn't support multiple price options, and therefore I try to find a solution for this problem. One of my ideas is to make multiple pages and redirect the page dependent on options. For example, if a customer chose model A, the page will stay in the page A which displays $1000. If a customer chose model B, the page will redirect to the page B which displays $500.

I have already made dynamic options with JavaScript, but I want to modify it to redirect a page. Here is the link of my page:

http://parseven.com/callaway_diabloedge_iron.html

In the page, there are options in the middle. If a customer chose his/her hand, it shows options, "#4 Thru AW," "Lob Wedge," and "Sand Wedge." If a customer chose either "Lob Wedge" or "Sand Wedge', the page has to redirect to a page which has a different price.

PS:

I'm using JavaScript to generate options dependent on the previous option. The code is:

<script type="text/javascript" language="javascript">
    <!--
    document.write('<select name="Iron(s)" onChange="javascript:     listboxchange     (this.options[this.selectedIndex].value);"><option value="">Select Iron(s)</option></select>')
    -->
</script>

Why is this marked as duplicate? yes, the questions are the same but the answers given in the popular "original" don't even answer the question.The user wants to know how to redirect to a different page on his/her app, not navigate to some website. — Ojonugwa Jude Ochalifu, May 12 '14 at 23:24

score 30 · Accepted Answer · edited Feb 06 '18 at 13:34

30

Use:

window.location = "http://my.url.here";

Here's some quick-n-dirty code that uses jQuery to do what you want. I highly recommend using jQuery. It'll make things a lot more easier for you, especially since you're new to JavaScript.

<select id = "pricingOptions" name = "pricingOptions">
    <option value = "500">Option A</option>
    <option value = "1000">Option B</option>
</select>

<script type = "text/javascript" language = "javascript">
    jQuery(document).ready(function() {
        jQuery("#pricingOptions").change(function() {
            if(this.options[this.selectedIndex].value == "500") {
                window.location = "http://example.com/foo.php?option=500";
            }
        });
    });
</script>

edited Feb 06 '18 at 13:34

Peter Mortensen

30,738
21
105
131

answered Feb 04 '10 at 16:58

Vivin Paliath

94,126
40
223
295

ok, it seems like it's not a difficult problem. Almost everybody suggest same solution. I'm a real novice to JS. So could you specify where I have to insert that code? – neko Feb 04 '10 at 17:14
I posted some sample code that uses an *onChange* event on a *select* to redirect you to the appropriate page. – Vivin Paliath Feb 04 '10 at 17:26
Hello Vivin Did you check my code? The options are dynamically generated by javascript. The code is: Could you tell me what to do in this case? – neko Feb 04 '10 at 17:32
You'll have to perform the redirect in the *listboxchange* function. Since you're passing in the value, you can check to see if it's "500". If it is, redirect. – Vivin Paliath Feb 04 '10 at 17:51
I'm really sorry but I don't really understand what you mean. If you don't mind, could you modify above code for me? – neko Feb 04 '10 at 18:01
In the source for your page, check out line 54. That's where the *listboxchange* function has been defined. In that function, you need to check the value of *p_index*. If it is the value that you want, you will set *window.location* to the new URL. – Vivin Paliath Feb 04 '10 at 19:06

score 6 · Answer 2 · edited Feb 06 '18 at 13:36

6

You can append the values in the query string for the next page to see and process. You can wrap them inside the link tags:

<a href="your_page.php?var1=value1&var2=value2">

You separate each of those values with the & sign.

Or you can create this on a button click like this:

<input type="button" onclick="document.location.href = 'your_page.php?var1=value1&var2=value2';">

edited Feb 06 '18 at 13:36

Peter Mortensen

30,738
21
105
131

answered Feb 04 '10 at 16:58

Sarfraz

377,238
77
533
578

-1 He wants to redirect using Javascript, not pass parameters into another page. – Vivin Paliath Feb 04 '10 at 17:00
@vivin: i have also shown that a bit below, please review again. Thanks – Sarfraz Feb 04 '10 at 17:02
Saw your change and tried to upvote, but says it's too old. – Vivin Paliath Feb 04 '10 at 17:27

score 4 · Answer 3 · edited Feb 06 '18 at 13:34

4

Use:

document.location.href = "http://yoursite.com" + document.getElementById('somefield');

That would get the value of some text field or hidden field, and add it to your site URL to get a new URL (href). You can modify this to suit your needs.

edited Feb 06 '18 at 13:34

Peter Mortensen

30,738
21
105
131

answered Feb 04 '10 at 16:58

Rohan

1,597
3
15
24

MDC advises to use `window.location` over `document.location` for best cross-browser compatibility. https://developer.mozilla.org/En/Document.location – Andy E Feb 04 '10 at 17:19
Could you specify where I have to insert the code above? I'm a real novie to JS. Thanks a lot – neko Feb 04 '10 at 17:26

score 3 · Answer 4 · edited Sep 29 '17 at 13:04

3

You can achieve this using the location object.

location.href = "http://someurl";

edited Sep 29 '17 at 13:04

Tamás Sengel

55,884
29
169
223

answered Feb 04 '10 at 16:58

Yuriy Zanichkovskyy

1,689
11
16

score 1 · Answer 5 · edited Feb 06 '18 at 13:37

1

You can call a JavaScript function and use window.location = 'url';:

http://www.pageresource.com/jscript/jredir.htm

edited Feb 06 '18 at 13:37

Peter Mortensen

30,738
21
105
131

answered Feb 04 '10 at 17:00

Ravi Vanapalli

9,805
3
33
43

How to make a page redirect using JavaScript?

5 Answers5

Linked

Related