javascript redirect on a select option 3

[tyutghf]

I have a select list, if the user selects a certain option I need the page to immediately redirect (staying in same window).

I'm not great with javascript but thought this would work on the option

<option value='7' onSelect="window.location='[URL unfurl="true"]http://www.mysite.com'">7</option>[/URL]

but it doesn`t. All other values are to act just like a usual select element and be submitted when the form is submitted but if they select 7 I need an immediate redirect.

Thanks for any help

 

[jmeckley]

<script>
   function redirect() {
      var this = this.selectedIndex; 
      var value = this.options[index].value; 

      if (this.value != 7) return;

      window.location='[URL unfurl="true"]http://www.mysite.com';[/URL]
   }
</script>
<select id="foo" onchange="redirect(this);">
   ...
   <option value="7">7</option>
</select>

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[feherke]

Hi

May I have some minor observations ?
[ul]
[li]You forgot to [highlight #fcc]declare the parameter[/highlight] of redirect. And better make it [highlight #fcf]something else than [tt]this[/tt][/highlight].[/li]
[li]The variable storing the selectedIndex property should be [highlight #cfc]index[/highlight], as you use it later.[/li]
[li][tt]window.location[/tt] is an object, you should not assign a string to it. Although interpreters were forced to forgive it, better assign to [highlight #ccf]its [tt]href[/tt] property[/highlight].[/li]
[/ul]

   [b]function[/b] [COLOR=darkgoldenrod]redirect[/color][teal]([highlight #fcc]what[/highlight])[/teal] [teal]{[/teal]
      [b]var[/b] [highlight #cfc]index[/highlight] [teal]=[/teal] [highlight #fcf]what[/highlight][teal].[/teal]selectedIndex[teal];[/teal]
      [b]var[/b] value [teal]=[/teal] [highlight #fcf]what[/highlight][teal].[/teal]options[teal][[/teal]index[teal]].[/teal]value[teal];[/teal]

      [b]if[/b] [teal]([/teal][b]this[/b][teal].[/teal]value [teal]!=[/teal] [purple]7[/purple][teal])[/teal] [b]return[/b][teal];[/teal]

      window[teal].[/teal]location[highlight #ccf][teal].[/teal]href[/highlight][teal]=[/teal][green][i]'[URL unfurl="true"]http://www.mysite.com'[/URL][/i][/green][teal];[/teal]
   [teal]}[/teal]

Feherke.

http://free.rootshell.be/~feherke/

 

[jmeckley]

your right... I must not have been paying attention while typing

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[tyutghf]

Thanks for the help, I have put this in my page but nothing happens. I have checked the error console in FF but it is empty

I have

<script>
function redirect(what) {
var index = what.selectedIndex;
var value = what.options[index].value;

if (this.value != 7) return;

window.location.href='[URL unfurl="true"]http://www.mysite.com';[/URL]
   }
</script>

and

<select name='reason' onchange="redirect(this);">
<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>
<option value='6'>6</option>
<option value='7'>7</option>
</select>

thanks again

 

[feherke]

Hi

Oops, missed one : should check the value variable, not the property : [tt]if [teal]([/teal]value [teal]!=[/teal] [purple]7[/purple][teal])[/teal] return[teal];[/teal]
[/tt].

Feherke.

http://free.rootshell.be/~feherke/

 

[tyutghf]

aha that's it. Thanks guys.

 

[jmeckley]

lesson learned: don't code before coffee.

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[tyutghf]

Could I just ask another question, if I wanted to redirect another option to a different url, can I add another condition

i.e.

<script>
function redirect(what) {
var index = what.selectedIndex;
var value = what.options[index].value;

if (value != 7) return;

window.location.href='[URL unfurl="true"]http://www.mysite.com';[/URL]
						
if (value != 6) return;

window.location.href='[URL unfurl="true"]http://www.yoursite.com/';[/URL]
}
</script>

 

[feherke]

Hi

Wrong. The first [tt]return[/tt] will exit the function immediately if the value is not 7, so the test for value 6 will not be reached.

The quick rewrite would be this :

[b]function[/b] [COLOR=darkgoldenrod]redirect[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] index [teal]=[/teal] what[teal].[/teal]selectedIndex[teal];[/teal]
  [b]var[/b] value [teal]=[/teal] what[teal].[/teal]options[teal][[/teal]index[teal]].[/teal]value[teal];[/teal]

  [b]if[/b] [teal]([/teal]value [teal]==[/teal] [purple]7[/purple][teal])[/teal] window[teal].[/teal]location[teal].[/teal]href[teal]=[/teal][green][i]'[URL unfurl="true"]http://www.mysite.com'[/URL][/i][/green][teal];[/teal]
  [b]else[/b] [b]if[/b] [teal]([/teal]value [teal]==[/teal] [purple]6[/purple][teal])[/teal] window[teal].[/teal]location[teal].[/teal]href[teal]=[/teal][green][i]'[URL unfurl="true"]http://www.yoursite.com/'[/URL][/i][/green][teal];[/teal]
[teal]}[/teal]

The extensible version would be this :

[b]var[/b] redirurl[teal]=[/teal][teal]{[/teal]
  [green][i]'6'[/i][/green][teal]:[/teal][green][i]'[URL unfurl="true"]http://www.yoursite.com/'[/URL][/i][/green][teal],[/teal]
  [green][i]'7'[/i][/green][teal]:[/teal][green][i]'[URL unfurl="true"]http://www.mysite.com'[/URL][/i][/green][teal],[/teal]
[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]redirect[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] index [teal]=[/teal] what[teal].[/teal]selectedIndex[teal];[/teal]
  [b]var[/b] value [teal]=[/teal] what[teal].[/teal]options[teal][[/teal]index[teal]].[/teal]value[teal];[/teal]

  [b]if[/b] [teal]([/teal]value [b]in[/b] redirurl[teal])[/teal] window[teal].[/teal]location[teal].[/teal]href[teal]=[/teal]redirurl[teal][[/teal]value[teal]];[/teal]
[teal]}[/teal]

The HTML5 approach would be this :

[b]function[/b] [COLOR=darkgoldenrod]redirect[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] index [teal]=[/teal] what[teal].[/teal]selectedIndex[teal];[/teal]
  [b]var[/b] url [teal]=[/teal] what[teal].[/teal]options[teal][[/teal]index[teal]].[/teal][COLOR=darkgoldenrod]getAttribute[/color][teal]([/teal][green][i]'data-redirect'[/i][/green][teal]);[/teal]

  [b]if[/b] [teal](![/teal] url[teal])[/teal] [b]return[/b][teal];[/teal]

  window[teal].[/teal]location[teal].[/teal]href[teal]=[/teal]url[teal];[/teal]
[teal]}[/teal]

[b]<select[/b] [maroon]name[/maroon][teal]=[/teal][green][i]'reason'[/i][/green] [maroon]onchange[/maroon][teal]=[/teal][green][i]"redirect(this);"[/i][/green][b]>[/b]
[b]<option[/b] [maroon]value[/maroon][teal]=[/teal][green][i]'1'[/i][/green][b]>[/b]1[b]</option>[/b]
[b]<option[/b] [maroon]value[/maroon][teal]=[/teal][green][i]'2'[/i][/green][b]>[/b]2[b]</option>[/b]
[b]<option[/b] [maroon]value[/maroon][teal]=[/teal][green][i]'3'[/i][/green][b]>[/b]3[b]</option>[/b]
[b]<option[/b] [maroon]value[/maroon][teal]=[/teal][green][i]'4'[/i][/green][b]>[/b]4[b]</option>[/b]
[b]<option[/b] [maroon]value[/maroon][teal]=[/teal][green][i]'5'[/i][/green][b]>[/b]5[b]</option>[/b]
[b]<option[/b] [maroon]value[/maroon][teal]=[/teal][green][i]'6'[/i][/green] [maroon]data-redirect[/maroon][teal]=[/teal][green][i]"[URL unfurl="true"]http://www.yoursite.com/"[/URL][/i][/green][b]>[/b]6[b]</option>[/b]
[b]<option[/b] [maroon]value[/maroon][teal]=[/teal][green][i]'7'[/i][/green] [maroon]data-redirect[/maroon][teal]=[/teal][green][i]"[URL unfurl="true"]http://www.mysite.com"[/URL][/i][/green][b]>[/b]7[b]</option>[/b]
[b]</select>[/b]

Feherke.

http://free.rootshell.be/~feherke/

 

[tyutghf]

Oh wow thanks for the detailed explanation, I have bookmarked this thread.