CODEWITHSUNDEEP
javascripthtmlhttp-redirect
de1337ed
de1337ed

Reputation: 3325

Trying to redirect with javascript

I'm very new to javascript and I'm trying to make different events occur depending on types of input. I have the following in my html header:

<script type="text/javascript">
    function validateForm(){
    var val=document.getElementsByName("destination");
    if (val == "deprecated"){
      window.location="http://website.com/";
    }
  }
</script>

Then in the body, I have the following:

<select name="destination">
<option value="current_builds">Current Builds</option>
<option value="deprecated">Deprecated Files</option>
<option value="mailing_list">Mailing List</option>
</select><br/>
<input type="button" value="next >" onClick="validateForm()" />

This however doesn't do anything. It just stays on the same page. I also tried wrapping it inside a form tag by saying:

<form name="my_form" onSubmit="validateForm()">
...
</form>

and then having matching javascript:

var val = document.forms["my_form"]["destination"].value

But this didn't work either.

Anyone see what the issue is? Thanks.

Upvotes: 0

Views: 160

Answers (7)

Tim Vermaelen
Tim Vermaelen

Reputation: 7069

Try it with id's instead of name, an id is a unique element. Javascript supports 

var destination = document.getElementById("destination");
if (destination.options[destination.selectedIndex].value == "deprecated"){
  window.location="http://website.com/";
}

HTML

<select id="destination">
    <option value="current_builds">Current Builds</option>
    <option value="deprecated">Deprecated Files</option>
    <option value="mailing_list">Mailing List</option>
</select>
<br />
<input type="button" value="next &gt;" onclick="javascript:validateForm();" />

Upvotes: 0

Federico Giust
Federico Giust

Reputation: 1793

Try this with a little bit of jquery

Redirect using drop down

<form name="my_form">
  <select id="destination">
    <option value="current_builds">Current Builds</option>
    <option value="deprecated">Deprecated Files</option>
    <option value="mailing_list">Mailing List</option>
  </select><br/>
  <input type="button" value="next >" id="submit">
</form>

​

$('#submit').click(
   function validateForm(){
   var e = document.getElementById("destination");
   var val = e.options[e.selectedIndex].value;

   if (val == "deprecated"){
     window.location="http://website.com/";
   }
});

Upvotes: 0

M Abbas
M Abbas

Reputation: 6479

I fixed your function and tested it:

function validateForm(){
    var val=document.getElementsByName("destination");
    var theSelectedOption = val[0].options[val[0].selectedIndex].value;
    if (theSelectedOption == "deprecated"){
      window.location="http://website.com/";
    }
  }

Upvotes: 4

codingbiz
codingbiz

Reputation: 26396

do the following

<select name="destination" id="destination">

Your JavaScript

val=document.getElementsById("destination").value;

Put an alert(val) in your if to see if ever evaluates to true

Upvotes: 0

Aaron Hill
Aaron Hill

Reputation: 1

You're missing the href attribute, you want to use:

window.location.href = 'URL';

Upvotes: 0

Hacknightly
Hacknightly

Reputation: 5164

You need to grab the value from the selected element. Since document.getElementsByName returns an array, try using this

var val = ​document.getElementsByName("destination")​​​​​[0].value

Upvotes: 3

ExceptionLimeCat
ExceptionLimeCat

Reputation: 6410

You need to get the value from the selected option. Like so:

var index = document.getElementsByName("destination").selectedIndex; 
var val=document.getElementsByName("destination").options[index].value;

That will retrieve the value of the selected option.

Upvotes: 0

Related Questions