Is it even possible to do select with links that when you click submit button it will move you to the selected website, for example
<form>
<select>
<option value="1"> test 1 </option>
<option value="http://www.google.com"> google.com </option>
<option value="http://www.youtube.com"> youtube.com </option>
<option value="http://www.facebook.com"> facebook.com </option>
</select>
<input type="submit">
//when submit clicked, and you choosed any option then you will be moved to this website
</form>
Yes, it possible to have a <select> element with links opening after clicking submit.
In order to do so, add the following JavaScript code:
const submitButton = document.querySelector("[type=submit]")
const select = document.querySelector("select")
submitButton.addEventListener("click", function (e) {
e.preventDefault()
window.location.href = select.value
})
Using a bit of javascript you could add a change handler to the select that navigates the user to the value of the selected option.
Note that this may not work within the stackoverflow demo frame, but should be fine on your site.
document.querySelector('select').addEventListener('change', (e) => {
document.location.href = e.target.value;
});
<select>
<option value="1" id="1"> test 1 </option>
<option value="https://www.google.com" id="http://www.google.com"> google.com </option>
<option value="https://www.youtube.com" id="http://www.youtube.com"> youtube.com </option>
<option value="https://www.facebook.com" id="http://www.facebook.com"> facebook.com </option>
</select>
Related
I have a drop-down list which POSTs to express and then redirects to same page.
Now, I want the one valid option to be selected before submitting, hence I added required property in <select> tag.
But, I also want a value to be Selected in the list when page renders
If first time render, then first option
If after submitting, the submitted option to be selected by default
Here is the skeleton code
<select required data-style="btn-info" name="selectpicker">
<optgroup label="Select Map">
<option name="table1" value="Station">Station</option>
<option name="table2" value="Station2">Station2</option>
</optgroup>
</select>
and the things I tried
<option value="" selected disabled>Select station</option>
<option name="table1" value="Station" selected>Station</option>
but none of them fulfills my requirements.
if you are using javascript for handling the form just add event.preventDefault() in your onsubmit function so when you submit it won't revert back to default
The problems were solved by
<form action="any" method="any" onSubmit="return fieldCheck();">
<select required id="collec" data-style="btn-info" name="selectpicker">
<option value="Select Station" selected disabled hidden>Select City</option>
<option name="table1" value="Vice City">Vice City</option>
<option name="table2" value="Delhi City">Delhi City</option>
and script
function fieldCheck() {
var collec = document.querySelector('#collec');
if(collec.value != "Select Station") {
return true;
}
else {
alert("Select a city first!!");
return false;
}
}
If I have
<select name="visibility">
<option value="private">private</option>
<option value="public">private</option>
<option value="hidden">private</option>
</select>
How would I make the hidden option the default?
I tried
<option value="hidden" selected>hidden</option>
But if I choose another option and then refresh, it gets replaced with that other value. How would I make it default, regardless of refresh?
your block should work fine on Chrome and IE.
however Firefox is saving your drop menu and its an old bug.
here how you fix it: add autocomplete="off" to your select tag
like this:
<select name="visibility" autocomplete="off">
<option value="private">1</option>
<option value="public">2</option>
<option value="hidden" selected>3</option>
</select>
You should use local storage to store the selected value and on reload your check for that item and add the selected attribute
http://jsfiddle.net/d948fL09/4/
if( typeof localStorage.visibility !== "undefined" ){
$('select').find($('option[value="' + localStorage.visibility + '"]').attr('selected', true))
}
$('select').on('change', function(){
localStorage.visibility=$(this).val();
console.log(localStorage.visibility)
})
Use the selected="selected" and autocomplete="off" attribute like so:
<select name="visibility" autocomplete="off">
<option value="private">private</option>
<option value="public">private</option>
<option value="hidden" selected="selected">private</option>
</select>
This works as you want it to, no matter how often you reload the page.
I have a <select> element, used for navigation. You click on it to choose a page to go to, and when clicked it goes to that page. Here is the code for it:
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="/item1" selected>Item 1</option>
<option value="/item2" selected>Item 2</option>
<option value="/item3" selected>Item 3</option>
</select>
When I use it, it goes to the page correctly, however when hitting the back button, the dropdown has the page I went to selected already. For example, if I'm on Item 1, and select Item 2, then go back to Item 1 through the browser's back button, Item 2 is selected in the list, which is kind of confusing.
How can I get it to switch back to the default value?
You can reset your selection box to the default value and then navigate to the new page. Here's an example of how to do that.
<script>
fix_ipad = function(evt){
go_to = document.getElementById('go_to');
go_to.selectedIndex = 0; // reset to default value before leaving current page
};
window.addEventListener("pagehide",fix_ipad,false);
goto_page_and_reset_default = function(){
go_to = document.getElementById('go_to');
go_to_page = go_to.value;
go_to.selectedIndex = 0; // reset to default value before leaving current page
window.open(go_to_page,"_top");
}
</script>
<select onchange="goto_page_and_reset_default()" id='go_to'>
<option value="/item1" selected>Item 1</option>
<option value="/item2" selected>Item 2</option>
<option value="/item3" selected>Item 3</option>
</select>
Possible duplicate https://stackoverflow.com/questions/8861181
Modern browsers implement something known as back-forward cache (BFCache). When you hit back/forward button the actual page is not reloaded (and the scripts are never re-run).
If you have to do something in case of user hitting back/forward keys -- listen for BFCache pageshow and pagehide events.
A pseudo jQuery example:
$(window).bind("pageshow", function() {
// update hidden input field
});
<select onchange="window.open(this.options[this.selectedIndex].value,'_top');this.value=''">
<option value="" selected>Default Value</option>
<option value="/item1">Item 1</option>
<option value="/item2">Item 2</option>
<option value="/item3">Item 3</option>
</select>
At the moment I am using this:
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
it redirect me on the location inside of the option value. But it doesn't work as expected .. mean that if I click on the first option of the select, then onChange action not running. I was thinking about javascript, but I think you'll have some better suggestions guys. So how can I make it work if I click on each option it'll redirect me to the it's value?
Because the first option is already selected, the change event is never fired. Add an empty value as the first one and check for empty in the location assignment.
Here's an example:
https://jsfiddle.net/bL5sq/
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Select...</option>
<option value="https://google.com">Google</option>
<option value="https://yahoo.com">Yahoo</option>
</select>
I'd strongly suggest moving away from inline JavaScript, to something like the following:
function redirect(goto){
var conf = confirm("Are you sure you want to go elswhere?");
if (conf && goto != '') {
window.location = goto;
}
}
var selectEl = document.getElementById('redirectSelect');
selectEl.onchange = function(){
var goto = this.value;
redirect(goto);
};
JS Fiddle demo (404 linkrot victim).
JS Fiddle demo via Wayback Machine.
Forked JS Fiddle for current users.
In the mark-up in the JS Fiddle the first option has no value assigned, so clicking it shouldn't trigger the function to do anything, and since it's the default value clicking the select and then selecting that first default option won't trigger the change event anyway.
Update:
The latest example's (2017-08-09) redirect URLs required swapping out due to errors regarding mixed content between JS Fiddle and both domains, as well as both domains requiring 'sameorigin' for framed content. - Albert
to make it as globally reuse function using jquery
HTML
<select class="select_location">
<option value="http://localhost.com/app/page1.html">Page 1</option>
<option value="http://localhost.com/app/page2.html">Page 2</option>
<option value="http://localhost.com/app/page3.html">Page 3</option>
</select>
Javascript using jquery
$('.select_location').on('change', function(){
window.location = $(this).val();
});
now you will able to reuse this function by adding .select_location class to any Select element class
For someone who doesn't want to use inline JS.
<select data-select-name>
<option value="">Select...</option>
<option value="http://google.com">Google</option>
<option value="http://yahoo.com">Yahoo</option>
</select>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('select[data-select-name]').onchange=changeEventHandler;
},false);
function changeEventHandler(event) {
window.location.href = this.options[this.selectedIndex].value;
}
</script>
This can be archived by adding code on the onchange event of the select control.
For Example:
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value=""></option>
<option value="http://google.com">Google</option>
<option value="http://gmail.com">Gmail</option>
<option value="http://youtube.com">Youtube</option>
</select>
{{-- dynamic select/dropdown --}}
<select class="form-control m-bot15" name="district_id"
onchange ="location = this.options[this.selectedIndex].value;"
>
<option value="">--Select--</option>
<option value="?">All</option>
#foreach($location as $district)
<option value="?district_id={{ $district->district_id }}" >
{{ $district->district }}
</option>
#endforeach
</select>
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Select...</option>
<option value="https://reactjs.org/">React Js</option>
<option value="https://angularjs.org/">Angular Js</option>
</select>
i need to create html code, in which if user selects an item from drop down list and click button then it will go to respective link.
<select name="myList">
<option value="Google" />Google
<option value="yahoo" />yahoo
<option value="Ask" />Ask
</select>
if user selects Google from drop down list and clicks button, then page should be redirected to www.google.com and if it selects yahoo and clicks button should go to www.yahoo.com
I would like to mention that I need The button in this scenario.
I don't want to go respective site on drop down selection.Only after clicking the button.
Thank you in advance.
HTML:
<select name="myList" id="ddlMyList">
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>
</select>
<input type="button" value="Go To Site!" onclick="NavigateToSite()" />
JavaScript:
function NavigateToSite(){
var ddl = document.getElementById("ddlMyList");
var selectedVal = ddl.options[ddl.selectedIndex].value;
window.location = selectedVal;
}
You could also open the site in a new window by doing this:
function NavigateToSite(){
var ddl = document.getElementById("ddlMyList");
var selectedVal = ddl.options[ddl.selectedIndex].value;
window.open(selectedVal)
}
As a side note, your option tags are not properly formatted. You should never use the <... /> shortcut when a tag contains content.
First, change the option values to the URL you want to target:
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>
Next, add an ID to the select so you can target it:
<select name="myList" id="myList">
Finally, add an onclick method to the select control to handle the redirect:
<input type="button" onclick="document.location.href=document.getElementById('myList').value">
<select name="myList">
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>
</select>
<input type="button" onclick="window.location=document.myList.value" />
Using JavaScript, you can attach an onclick event to the button. In the event handler, you can use an if statement to check which value was selected in the select list, and use window.location to redirect the user to the appropriate URL.
I would suggest changing the value of the option elements to be the required URL, and you can then simply grab the value and go to that URL, instead of having to check which option was selected.
onclick()="window.location.href='page.html'"