12 Replies - 6822 Views - Last Post: 07 July 2011 - 01:15 PM

#1 LilithX  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 15-July 10

drop-down list value redirect to a url of choice

Posted 06 July 2011 - 06:07 PM

Hi,

The code below is basically a form using radio buttons to populate results to a drop-down list depending on the radio button option that is chosen. I'm having trouble figuring out where and how to add the redirection url for each of the value choices in the drop down. I was told something about using window.location('http://url.here') and then to populate the location parameter with the array value but i'm not exactly sure how to alter my code to add that in.

Thanks in advance for any help I can get:


<!DOCTYPE html>
<html lang="en">
<head>

<script type="text/javascript">

var services = new Array();
services['Tutoring'] = ['Grady', 'Holy Innocents', 'North Springs', 'Paideia', 'Riverwood', 'School Not Listed?'];
services['Recording'] = ['John Doe'];


function changechoice(choice)
{
    var serviceList = services[choice];

    changeSelect('service', serviceList, serviceList);
    document.getElementById('service').disabled = false;
    document.getElementById('service').onchange();
}

function changeservice(serviceValue)
{
    document.getElementById('output').innerHTML = serviceValue;
    return;
}

function changeSelect(fieldID, newValues, newOptions)
{
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;

  if (newValues && newOptions)
  {
    for (i=0; i<newValues.length; i++)
    {
      selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
    }

  }
}

</script>
</head>

<body>

<table width="400" align="center" colspan="2" border="0" rowspan="2">
<tr>



<td width="200" align="left">
Pick an option:

</td>
</tr>

<td width="200">
<br>
<ul>
<input type="radio" name="choice" value="Tutoring" onclick="changechoice(this.value);"> Tutoring<br />
<input type="radio" name="choice" value="Recording" onclick="changechoice(this.value);"> Recording<br />
</ul>

</td>

<br>

<td width="200" align="center" valign="top">
<br>
<select name="service" id="service" onchange="changeservice(this.value);" disabled="disabled">
<option> -- Choose an Option -- </option>
</select>

</td>
</table>
</body>
</html>




Is This A Good Question/Topic? 0
  • +

Replies To: drop-down list value redirect to a url of choice

#2 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 117
  • View blog
  • Posts: 472
  • Joined: 27-June 10

Re: drop-down list value redirect to a url of choice

Posted 06 July 2011 - 06:20 PM

Simply create a function, such as redirect() that takes the parameter of the value of the dropdown box. (
onchange="javascript:redirect(this.value);"
)

The function should analyze the parameter's value to see which one to redirect it to via window.location:
function redirect(value) {
     if (value == "BLAH") {
          window.location = "URL"; // Choose the right URL for the value
     }
     //Continue as long as necessary.
}



If you think you'll expand and have too many links/options, you can switch to switch/case instead of a bunch of if's.
function redirect(value) {
     switch (value) {
          case "BLAH":
               window.location = "URL";
          //Continue as long as necessary.
     }
}


Was This Post Helpful? 1
  • +
  • -

#3 LilithX  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 15-July 10

Re: drop-down list value redirect to a url of choice

Posted 07 July 2011 - 08:52 AM

Hi,

Thanks for responding. I tried what you said but the moment I click on the radio button it instantly tries to go to a url. I apologize, i'm extremely new to javascript.


<!DOCTYPE html>
<html lang="en">
<head>

<script type="text/javascript">

var services = new Array();
services['Tutoring'] = ['Grady', 'Holy Innocents', 'North Springs', 'Paideia', 'Riverwood', 'School Not Listed?'];
services['Recording'] = ['John Doe'];







function changechoice(choice)
{
    var serviceList = services[choice];

    changeSelect('service', serviceList, serviceList);
    document.getElementById('service').disabled = false;
    document.getElementById('service').onchange();
}



function changeSelect(fieldID, newValues, newOptions)
{
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;

  if (newValues && newOptions)
  {
    for (i=0; i<newValues.length; i++)
    {
      selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
    }

  }
}

function redirect(value) {

     if (value == "Grady") {

          window.location = "www.yahoo.com"; // Choose the right URL for the value

     }

     //Continue as long as necessary.

}

</script>
</head>

<body>

<table width="400" align="center" colspan="2" border="0" rowspan="2">
<tr>



<td width="200" align="left">
Pick an option:

</td>
</tr>

<td width="200">
<br>
<ul>
<input type="radio" name="choice" value="Tutoring" onclick="changechoice(this.value);"> Tutoring<br />
<input type="radio" name="choice" value="Recording" onclick="changechoice(this.value);"> Recording<br />
</ul>

</td>

<br>





<td width="200" align="center" valign="top">
<br>
<select name="service" id="service" onchange="javascript:redirect(this.value);" disabled="disabled">
<option> -- Choose an Option -- </option>





</select>

</td>
</table>
</body>
</html>





Was This Post Helpful? 0
  • +
  • -

#4 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 117
  • View blog
  • Posts: 472
  • Joined: 27-June 10

Re: drop-down list value redirect to a url of choice

Posted 07 July 2011 - 10:02 AM

Wait - aren't you trying to instantly have it redirect to the URL? What are you wanting to do? Sorry, I must have misunderstood.
Was This Post Helpful? 0
  • +
  • -

#5 LilithX  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 15-July 10

Re: drop-down list value redirect to a url of choice

Posted 07 July 2011 - 10:25 AM

I only want it to redirect after an option is specified in the drop-down list. So for instance I clicked the radio button tutoring then from the drop down list i selected Riverwood. After I select riverwood it should direct to the riverwood site. If i select North springs, it should redirect to North Springs website. There are different drop down options depending on the radio button choice. Hope this makes sense. Thanks.


View Postmaniacalsounds, on 07 July 2011 - 10:02 AM, said:

Wait - aren't you trying to instantly have it redirect to the URL? What are you wanting to do? Sorry, I must have misunderstood.

Was This Post Helpful? 0
  • +
  • -

#6 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 117
  • View blog
  • Posts: 472
  • Joined: 27-June 10

Re: drop-down list value redirect to a url of choice

Posted 07 July 2011 - 10:29 AM

Oh, I understand your problem. It's that when you select "tutoring," Grady is automatically selected, as it is on top. To prevent this, add a blank option tag, or one with a bunch of hyphens (this is what youtube does), and add the attribute selected="true"

<option value="" selected="selected">-----</option>



That way, it'll automatically be selected instead of Grady. Just make sure you don't ever set that one to redirect somewhere (which I don't see why you would).
Was This Post Helpful? 0
  • +
  • -

#7 LilithX  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 15-July 10

Re: drop-down list value redirect to a url of choice

Posted 07 July 2011 - 10:51 AM

Hi,

I tried that and it still does the same thing. The top option is actually set to this already:

<option> -- Choose an Option -- </option>

Was This Post Helpful? 0
  • +
  • -

#8 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 117
  • View blog
  • Posts: 472
  • Joined: 27-June 10

Re: drop-down list value redirect to a url of choice

Posted 07 July 2011 - 10:56 AM

Sorry, you have it dynamically adding options via Javascript (which isn't a good choice if this is for production, as some users have Javascript disabled, otherwise it's fine).

Since you have it creat options via an array, you need to insert that into the array so it'll have that as the first choice when it changes.

services['Tutoring'] = ['-- Choose an Option --','Grady', 'Holy Innocents', 'North Springs', 'Paideia', 'Riverwood', 'School Not Listed?'];
services['Recording'] = ['-- Choose an Option --','John Doe'];



I tested it, and it works fine. Hope this helped!
Was This Post Helpful? 1
  • +
  • -

#9 LilithX  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 15-July 10

Re: drop-down list value redirect to a url of choice

Posted 07 July 2011 - 11:12 AM

Thank you so much! That worked perfectly!

You mentioned that some people may have javascript disabled... I didn't think about that. Do you have time to show me a better way to code this?
Was This Post Helpful? 0
  • +
  • -

#10 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 117
  • View blog
  • Posts: 472
  • Joined: 27-June 10

Re: drop-down list value redirect to a url of choice

Posted 07 July 2011 - 11:17 AM

good, I'm glad it worked. :)

I'm sorry I didn't mention it before, I though this was just for practice. If this is just for personal use and practice, I wish I'dve thought of this practice exercise, you combined many aspects of Javascript into one project, :P

If you want another approach, you would need to "hard-code" the option buttons (actually write out the HTML), and use Javascript to control their "disabled" attribute.

However, hardly anyone has Javascript disabled (whether because they don't know what it is, or because they don't know how to disable it. :P). Your goal isn't to get rid of Javascript altogether, it's to make Javascript an "added bonus" for people that have it enabled. In other words, make the site work for people who don't have Javascript enabled, but work "better" for people who do have it enabled. :)
Was This Post Helpful? 1
  • +
  • -

#11 LilithX  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 15-July 10

Re: drop-down list value redirect to a url of choice

Posted 07 July 2011 - 11:27 AM

Gotcha. Well, thank you so much. I'll look into it more to see what I can do to cover both options just in case some do have it disabled and I'm not sure if all phones support javascript either, so i'll just research it some more. Thanks again!
Was This Post Helpful? 0
  • +
  • -

#12 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 117
  • View blog
  • Posts: 472
  • Joined: 27-June 10

Re: drop-down list value redirect to a url of choice

Posted 07 July 2011 - 11:34 AM

Glad to have helped.

And to save you a little time: most smartphones include Javascript, although it's just like the web, there's a fraction that doesn't.
Was This Post Helpful? 0
  • +
  • -

#13 baavgai  Icon User is online

  • Dreaming Coder
  • member icon

Reputation: 5826
  • View blog
  • Posts: 12,680
  • Joined: 16-October 07

Re: drop-down list value redirect to a url of choice

Posted 07 July 2011 - 01:15 PM

I was going to point out the misuse of Array. However, you also have an astounding number of markup errors, I'm afraid.

<!DOCTYPE html>
<html lang="en">
<head>

<script type="text/javascript">

// an array doesn't quite work like you think it does.
// var services = new Array();
// be honest; it's just an object
var services = {
	'Tutoring' : ['Grady', 'Holy Innocents', 'North Springs', 'Paideia', 'Riverwood', 'School Not Listed?'],
	'Recording' : ['John Doe'],
}


function changeSelect(fieldID, newValues, newOptions) {
	selectField = document.getElementById(fieldID);
	selectField.options.length = 0;

	if (newValues && newOptions) {
		for (i=0; i<newValues.length; i++) {
			selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
		}
	}
}

function changechoice(choice) {
	var serviceEle = document.getElementById('service');
	var serviceList = services[choice];

	changeSelect('service', serviceList, serviceList);
	serviceEle.disabled = false;
	serviceEle.onchange(); // why bother calling this directly?
}

function redirect(value) {
	if (value == "Grady") {
		window.location = "www.yahoo.com"; // Choose the right URL for the value
	}
	//Continue as long as necessary.
}

</script>
</head>

<body>
	<table width="400" align="center" colspan="2" border="0" rowspan="2">
		<tr>
			<td width="200" align="left">Pick an option:</td>
		</tr>
		<!-- tr missing -->
			<td width="200">
				<br>
				<ul><!-- there are no li tags after this ??? -->
					
					<!-- you usually want a form defined before a form tag is used -->
					<input type="radio" name="choice" value="Tutoring" onclick="changechoice(this.value);"> Tutoring<br />
					<input type="radio" name="choice" value="Recording" onclick="changechoice(this.value);"> Recording<br />
				</ul>
			</td>
			<br><!-- this br is between td tags and should be ignored -->
			<td width="200" align="center" valign="top">
				<br><!-- another ignored br, also should be br/ -->
				<select name="service" id="service" onchange="javascript:redirect(this.value);" disabled="disabled">
					<option> -- Choose an Option -- </option>
				</select>
			</td>
		<!-- tr end missing -->
	</table>
</body>
</html>




There's a lot of code you don't need, don't really use, and can clear out. This should work about the same:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var services = {
	'Tutoring' : ['Grady', 'Holy Innocents', 'North Springs', 'Paideia', 'Riverwood', 'School Not Listed?'],
	'Recording' : ['John Doe'],
};

function changechoice(choice) {
	var selectField = document.getElementById('service');
	var serviceList = services[choice];
	var dummyField = ' -- Choose an Option -- ';

	selectField.options.length = 0;
	selectField.options[selectField.length] = new Option(dummyField, dummyField);
	for (var i=0; i<serviceList.length; i++) {
		selectField.options[selectField.length] = new Option(serviceList[i], serviceList[i]);
	}
}

function redirect(value) {
	if (value == "Grady") {
		window.location = "www.yahoo.com"; // Choose the right URL for the value
	}
}

</script>
</head>

<body onload="changechoice('Tutoring')">
	<table width="400" align="center" colspan="2" border="0" rowspan="2">
		<tr>
			<td width="200" align="left">Pick an option:</td>
		</tr>
		<tr>
			<td width="200">
				<input type="radio" name="choice" value="Tutoring" onclick="changechoice(this.value);" />Tutoring
				<br />
				<input type="radio" name="choice" value="Recording" onclick="changechoice(this.value);" />Recording
			</td>
			<td width="200" align="center" valign="top">
				<select name="service" id="service" onchange="javascript:redirect(this.value);">
				</select>
			</td>
		<tr>
	</table>
</body>
</html>



Hope this helps.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1