Is there a simple way to have a user go to a URL from a dropdown list on SUBMIT, rather than onChange.
I have this code:
<form name="cityselect">
<select name="menu" onChange="top.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.domain-one.com">London</option>
<option value="http://www.domain-two.com">Glasgow</option>
</select>
Tried changing onChange to onSubmit, but it doesn't work.
Try this instead.
Also: You'll want to keep your JavaScript separated from your HTML. Do not use onchange or similar HTML attributes. While it's technically not wrong, it's bad from a code quality/maintainability perspective.
var goBtn = document.getElementById("goBtn");
var menu = document.getElementById("menu");
goBtn.onclick = function() {
window.location = menu.value;
}
<select id="menu">
<option selected="selected">Select One</option>
<option value="http://www.domain-one.com">London</option>
<option value="http://www.domain-two.com">Glasgow</option>
</select>
<input type="button" id="goBtn" value="GO!">
Does this work for you?
You can use the onsubmit event on the <form> element, but you'll want to preventDefault on the event, and for the onsubmit event you need to use a return:
<form name="cityselect" onsubmit="return redirectTo(this)">
<select name="menu" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.domain-one.com">London</option>
<option value="http://www.domain-two.com">Glasgow</option>
</select>
</form>
<script>
function redirectTo(elem) {
event.preventDefault();
top.location.href = elem.firstElementChild.options[elem.firstElementChild.selectedIndex].value
}
</script>
Related
I want to do a form submit on a onChange event of a selectbox. The submit action should trigger a JQuery function. When I use a submit button instead of a onChange event function it works fine. However when I use the onChange event I can't trigger the function.
MY form:
<form id="zoekSchool" method="get">
<div class="form-group">
<label for="thema" class="desktop small">School</label>
<select class="form-control" name="school" id="school" onchange="this.form.submit()">
<option value="" disabled selected>Search</option>
<option value="1">item 1</option>
<option value="2">item 2</option>
...
</select>
</div>
</form>
My Javascript/Jquery:
function initMap(x) {
$('#zoekSchool').submit(function() { // bind function to submit event of form
var schoolID = $('#school').val();
...
return false; //prevent default action
});
}
<script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap"
async defer></script>
where ... stands for 'some code'.
Maybe important: I'm working with the googleMaps Api.
What could be the problem here?
you can try like this..
onchange="$(this).parents('form').submit()"
or
onchange="$('#zoekSchool').submit()"
instead of onchange="this.form.submit()"
<form id="zoekSchool" method="get">
<div class="form-group">
<label for="thema" class="desktop small">School</label>
<select class="form-control" name="school" id="school" onchange="$('#zoekSchool').submit()">
<option value="" disabled selected>Search</option>
<option value="1">item 1</option>
<option value="2">item 2</option>
...
</select>
</div>
</form>
Create Event handler in document Ready, use the following code
$(document).ready(function () {
$('#school').change(function () { //Event handler for drop down
var form = $(this).closest('form');
$(form).submit();// this fires submit event of form
});
});
Using jQuery/Javascript, when a user clicks submit I need to validate if at least one option has been chosen on a select form, and one hasn't been chosen, I need them all to be submitted.
So on a form like this:
<form action="http://example.com" method="get" id="carfare" name="mycarform">
<select name="car" id="carchoice" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input id="carsubmit" type="submit">
</form>
If the user clicks the submit button without choosing any options, I need it to return:
http://example.com/?car=volvo&car=saab&car=opel&car=audi
First, check if there are any items selected by doing
if(!$('#carchoice').val())
then, set them all selected by
$('#carchoice option').prop("selected", true);
$('form').submit(function(){
if(!$('#carchoice').val()){
$('#carchoice option').prop("selected", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="http://example.com" method="get" id="carfare" name="mycarform">
<select name="car" id="carchoice" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input id="carsubmit" type="submit">
</form>
On submit check if option is selected, if not select all.
$(document).ready( function () {
$('#carefare').submit( function () {
var choice = $('#carchoice').val();
if(!choice) {
$('#carchoice option').attr('selected','selected');
}
});
});
refer jsfiddle
check network tab for submitted values
I want menu to be in select control, like this
<form id="go">
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
<option value="">Select option</option>
<option onclick="openChangePassword()">Change password</option>
<option value="www.editpersonaldata.com">Edit personal data</option>
<option value="www.dashboard.com">Dashboard</option>
</select>
</form>
This is changing url not a problem, but i have problem with some option because values are calling function, onclick="openChangePassword() and it is not working this way, any solution.
On some option i need url redirect on other i need function call?
As A. Wolff points out in his comment, you should add an event listener to the <select> element instead. Like this:
<form id="go">
<select name="URL">
<option value="">Select option</option>
<option value="openChangePassword">Change password</option>
<option value="www.editpersonaldata.com">Edit personal data</option>
<option value="www.dashboard.com">Dashboard</option>
</select>
</form>
<script>
document.querySelector('select[name="URL"]').addEventListener('change', function(e){
var selection = this.options[this.selectedIndex].value;
if(selection == 'openChangePassword'){
openChangePassword();
} else {
window.location.href = selection;
}
});
</script>
Notice that I only use the value attribute of <option> and then decide what to do in the listener callback function.
i have a form like so:
<form>
<select onchange="this.form.submit()">
<option>Today</option>
<option>Last Week</option>
<option>Last Month</option>
<option>Lifetime</option>
</select>
</form>
I need to do some basic filtering of results and the aim is that when a user changes the drop down the user is sent to page/?date=THEIROPTION
I a using the javascript on change so i dont have to have a button.
Any help?
P.S i have tried having the option value as the URL but no luck.
This works.
ONCHANGE="location = this.options[this.selectedIndex].value;"
This too.
<form name="filter_form">
<select name="filter" onchange="document.forms.filter_form.submit();">
<option value=""></option>
<option value="today">Today</option>
<option value="yesterday">Yesterday</option>
</select>
</form>
You may try something like this
HTML:
<select onchange="loadPage(this.value)">
<option value="page?date=today">Today</option>
<option value="page?date=last_week">Last Week</option>
</select>
JS:
function loadPage(url)
{
location.href = url;
}
I am trying to make a drop down menu that takes me to various webpages. Right now it is set up so you make your selection and then you hit a "Go" button and then it takes you to the appropriate link. I am trying to figure out how to make it so when you make your selection it automatically goes and you don't need to push the "Go" button.
Here is what I have:
<p align="center">
<form name="jump" class="center">
<select name="menu">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
Any help or links to explanations would be great. Thank you!
Try the following:
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="http://www.apple.com/">Apple</option>
<option value="http://www.bbc.com">BBC</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
What you were looking for was 'onchange' instead of 'onsubmit'
Check out jQuery .change()
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>
Something like this might help - basically you just tie an onChange event to the select so that when a new option is selected it'll forward the location to the page.
<p align="center">
<form name="jump" class="center">
<select name="menu" onchange="gotoPage(this)">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
<script type="text/javascript">
function gotoPage(select){
window.location = select.value;
}
</script>
I would recommend that you start using the javascript framework jQuery as it really will make your life much easier when it comes to javascript.
When you have jQuery installed and setup in you web page you should be able to do something like this:
<script type="text/javascript">
$(document).ready(function() {
$("#selection").change(function() {
location = $("#selection option:selected").val();
});
});
</script>
<p align="center">
<form name="jump" class="center">
<select name="menu" id="selection>
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
</form>
</p>
Obviously super late to the party here, but since I was trying to figure out the same thing and was able to, I'll post how here.
The other answers have you load the link when you change your select element option, but you originally had asked to do it with a button, after making your selection. This worked for me:
<script type="text/javascript">
$(document).ready(function() {
var newUrl = "";
$("#picksite").change(function() {
$newUrl = $("#picksite option:selected").val();
});
$("#executelink").click(function() {
location = $newUrl ;
});
});
</script>
<select id="picksite">
<option value="">Pick A Website</option>
<option value="http://google.com">Google</option>
<option value="http://facebook.com">Facebook</option>
<option value="http://twitter.com">Twitter</option>
<option value="http://gmail.com">Gmail</option>
</select>
<button id="executelink">Go To Site</button>