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'"
Related
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>
I'm trying to append an option value to a form action, using method get. Submit sends the form request but isn't attaching the select option to the action?
So when the form is submitted it should use >
https://url.here.com?domain= users search here + selected option?
Thanks in advance.
<form action="https://url.here.com?domain=" method="get">
<div class="just-arrived-search">
www.<input type="search" name="domain" placeholder="Search" />
<select>
<option value="">All</option>
<option value=".bike">.bike</option>
<option value=".clothing">.clothing</option>
<option value=".guru">.guru</option>
<option value=".holding">.holdings</option>
<option value=".plumbing">.plumbing</option>
<option value=".singles">.singles</option>
<option value=".venture">.ventures</option>
</select>
<button class="btn-new" type="submit">Register Domain</button>
</div>
</form>
UPDATE: Since you edited your initial post to more clearly explain what you are attempting to achieve, here is a simple solution to your issue.
Use JavaScript to append the selected value to the domain before it submits. Change the button to have an onclick attribute as oppose to making it submit the form.
Add this JavaScript to your head section (or wherever you want, but convention is typically the HEAD section or bottom of the body):
<script type="text/javascript">
function submitForm() {
var ext = document.getElementById('ext');
var selected_opt = ext.options[ext.selectedIndex].value;
// Add own code to handle "All" here
var domain = document.getElementById('domain');
// Append selected option
domain.value = domain.value + selected_opt;
// Submit form
document.getElementById('myForm').submit();
}
</script>
And this is the updated HTML code to go along with it:
<form action="https://url.here.com" method="get" id="myForm">
<div class="just-arrived-search">
www.<input type="search" id="domain" name="domain" placeholder="Search" />
<select id="ext">
<option>All</option>
<option>.bike</option>
<option>.clothing</option>
<option>.guru</option>
<option>.holdings</option>
<option>.plumbing</option>
<option>.singles</option>
<option>.ventures</option>
</select>
<button class="btn-new" onclick="submitForm();">Register Domain</button>
</div>
</form>
How do I get the selected option from the HTML select option attribute to a POST request? So
<form method="post" action="new_choice/:pick_an_order/:pick_a_letter">
<select name="pick_an_order">
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
<select name="pick_a_letter">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
If the user selects, as an example, the first option from each, being "First" and "A". Right now I have:
post 'new_choice/:pick_an_order/:pick_a_letter' do
pick_an_order = params[:pick_an_order]
pick_a_letter = params[:pick_a_letter]
#your_choice = YourChoice.new(pick_an_order, pick_a_letter)
redirect '/to_a_page'
end
But for some reason it's not saving to #your_choice. How do I get the selected attribute directly to the POST request so that it can be saved to the #your_choice object? Thanks in advance!
You must make a choice. Either you modify the value of the action attribute in your form with the help of Javascript, or you change the route of your resource to post 'new_choice' do and have the values sent as POST parameters.
I'll pick the second one because it seems more logical at the moment:
<form method="post" action="/new_choice">
<select name="pick_an_order">
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
</select>
<select name="pick_a_letter">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
Please note that you must specify the value attribute for each option, that's the actual value sent (whatever text inside the tag is for the users). Then in Sinatra:
post '/new_choice' do
pick_an_order = params[:pick_an_order]
pick_a_letter = params[:pick_a_letter]
#your_choice = YourChoice.new(pick_an_order, pick_a_letter)
redirect '/to_a_page'
end
I would rather use javascript to submit the form because the code is so simple: $(function() {
$('#language').change(function() {
this.form.submit();
});
});
Assign an id to the select tag, in this case it is #language.
I have a problem with my site. I have a select menu and 3 options: images, video and audio. When I click one of the options it should display a button to pick out the image/video/audio to upload, but this doesn't display in Google Chrome. In Firefox there is no problem with this. Does anyone have a solution for this?
Thanks very much!
EDIT:
This is the code
<select name="service_id">
<option value="video" onClick="showSection('video',['image','audio']);" <?=count($videos)?'selected="selected"':''?>>Video</option>
<option value="image" onClick="showSection('image',['video','audio']);" <?=count($images)?'selected="selected"':''?>>Imagini</option>
<option value="audio" onClick="showSection('audio',['video','image']);" <?=count($audios)?'selected="selected"':''?>>Audio</option>
</select>
things i modified:
the second parameter is now a class name, each value separated by a "|"
used onChange() to trigger a selection (but does not trigger unless the value changes)
used this to pass a reference to the select rather than passing values (you can do more this way)
demo here
<select name="service_id" onChange="showSection(this)">
<option value="video" class='image|audio'>Video</option>
<option value="image" class='video|audio'>Imagini</option>
<option value="audio" class='video|image'>Audio</option>
</select>
<script type="text/javascript">
function showSection(el){
//modified to get the first and second parameters of showSection()
//get the value
var firstParam = el.value;
//get the class name of the selected element, and split it
var secondparam = el.options[el.selectedIndex].className.split('|');
console.log(firstParam);
console.log(secondparam);
}
</script>
Call the function on select not in options:
<select onClick='showSection(this.value,"a")'>
<option value="video" >Video</option>
<option value="image">Imagini</option>
<option value="audio">Audio</option>
</select>
i have tested this in chrome its working alright.
one suggestion is if you are using dropdown then use onchange event rather then using onClick
<?php
$videos=0;
$images=0;
$audios=0;
?>
<select name="service_id">
<option value="video" onClick="showSection('video',['image','audio']);" <?=count($videos)?'selected="selected"':''?>>Video</option>
<option value="image" onClick="showSection('image',['video','audio']);" <?=count($images)?'selected="selected"':''?>>Imagini</option>
<option value="audio" onClick="showSection('audio',['video','image']);" <?=count($audios)?'selected="selected"':''?>>Audio</option>
</select>
Here's a very basic HTML question for you:
<form method="get" action="#">
<select id="u" name="u">
<option value="nothing" title=""></option>
<option value="AdamT" title="AT">Adam Temple</option>
<option value="AlexP" title="AP">Alex Potts</option>
</select>
<INPUT TYPE="submit" />
</form>
After submitting the form, the URL ends ?u=AdamT. However, the list has reverted to the blank element.
Is there any way I could make the list be pre-selected with the correct option, without using JavaScript?
Add selected (its a boolean attribute) to the appropriate <option> element in whatever server side language you use to process the form.
Put your javascript at the end of html script or include the .js at the end of the body.
var val = location.href.match(/[?&]u=(.*?)(?:$|&)/)[1]; // get params "u" from URL
document.getElementById("you-selection-id").value = val; // u
Hope this will help:
Use selected for preselected values
<option value="AdamT" title="AT" selected>Adam Temple</option>