• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 206
  • Last Modified:

Javascript to load URL on Click

OK so I have some HTML with select options and want to fire the URLs on click - could a javascript guru kindly help me out with the code I need to do this?

					<form action="#">
						<fieldset>
							<select name="Combo1" id="Combo1" class="combo">
								<option value="">Report a</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 1</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 2</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 3</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 4</option>
							</select>
							<select name="Combo2" id="Combo2" class="combo">
								<option value="">Request a</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 1</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 2</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 3</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 4</option>
							</select>
							<select name="Combo3" id="Combo3" class="combo">
								<option value="">Find out about </option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 1</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 2</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 3</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 4</option>
							</select>
							<select name="Combo4" id="Combo4" class="combo">
								<option value="">Pay for my</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 1</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 2</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 3</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 4</option>
							</select>
							<select name="Combo5" id="Combo5" class="combo">
								<option value="">Apply for a</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 1</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 2</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 3</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 4</option>
							</select>
							<select name="Combo6" id="Combo6" class="combo">
								<option value="">Have my say</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 1</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 2</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 3</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 4</option>
							</select>
							<select name="Combo7" id="Combo7" class="combo">
								<option value="">See what's on</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 1</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 2</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 3</option>
								<option value="/page.asp?p=DOC-ABC-12-34-56">Option 4</option>
							</select>
						</fieldset>
					</form>

Open in new window

0
sonic1234
Asked:
sonic1234
4 Solutions
 
Gurvinder Pal SinghCommented:
use the onchange event for the select tag

<select onchange="alert('value selected is :  ' + this.value )">

0
 
pritamduttCommented:
I have given sample for one of the options

<form action="#">
	<fieldset>
		<select name="Combo1" id="Combo1" class="combo">
			<option value="">Report a</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 1</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 2</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 3</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 4</option>
		</select>
		<select name="Combo2" id="Combo2" class="combo">
			<option value="">Request a</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 1</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 2</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 3</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 4</option>
		</select>
		<select name="Combo3" id="Combo3" class="combo">
			<option value="">Find out about </option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 1</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 2</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 3</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 4</option>
		</select>
		<select name="Combo4" id="Combo4" class="combo">
			<option value="">Pay for my</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 1</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 2</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 3</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 4</option>
		</select>
		<select name="Combo5" id="Combo5" class="combo">
			<option value="">Apply for a</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 1</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 2</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 3</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 4</option>
		</select>
		<select name="Combo6" id="Combo6" class="combo">
			<option value="">Have my say</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 1</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 2</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 3</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 4</option>
		</select>
		<select name="Combo7" id="Combo7" class="combo">
			<option value="">See what's on</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 1</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 2</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 3</option>
			<option value="/page.asp?p=DOC-ABC-12-34-56">Option 4</option>
		</select>
	</fieldset>
</form>

<script type="text/javascript">

var selectmenu=document.getElementById("Combo1")
selectmenu.onchange=function(){ //run some code when "onchange" event fires
 var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
 if (chosenoption.value!="nothing"){
 alert(chosenoption.value);
  window.open(chosenoption.value, "", "") //open target site (based on option's value attr) in new window
 }
}

</script>

Open in new window


Hope this helps!
0
 
Gurvinder Pal SinghCommented:
you can fire URL like this

<select onchange="location.href=location.href + this.value">

this will open the URL which is the value of the selected option
0
 
sonawanekiranCommented:
Just paste this code in head tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $(".combo").change(function(){
  window.location.href=$(this).val();


});
  });
</script>

Open in new window

0
 
sonic1234Author Commented:
Thank you
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now