<select id="drp" value="maindrp" name="maindrp">
<option>Select Categories</option>
<option id="vhc" value="mainvhc">Vehicles</option>
<option id="re" value="mainre">Real Estate</option>
<option id="pt" value="mainpt">Pets</option>
<option id="el" value="mainel">Electronics</option>
<option id="cl" value="maincl">Clothing&Jewerly</option>
<option id="co" value="mainco">Computers&Network</option>
</select>
<input type="text" placeholder="Search" id="msc">
<input type="submit" value="Go" id="go" onclick= "go();">
function go() {
if (document.getElementById("vhc")) {
window.location="vehicles.php";
}else if (document.getElementById("re")) {
window.location="realestate.php"; } }
I want to navigate from selected item from drop down via button on click function.
Can anyone help me please?
Try this, you need the value of <select> tag
function go(){
var sel = document.getElementById('drp').value; // get value of <select>
if(sel=='mainvhc')
window.location.href='vehicles.php';
...
}
Related
First question here so please go easy on me ! Trying to get this form select working but after hours still struggling. Code works fine when just one option has an id, but will not work with multiple id's. Have a feeling the right approach would be to assign each select option with a class but still can't figure it out.
Any assistance would be gratefully appreciated !
<form>
<p align="center">Size :
<input type="hidden" value="1" name="qty1" />
<select name="productpr1" id="getFname" onchange="showdiv(this);">
<option selected value="ERROR - Please select finish">please select</option>
<option id="show" value="product 1:5:0:105805">product 1</option>
<option id="" value="product 2:10:0:105205">product 2</option>
<option id="show" value="product 3:15:0:105605">product 3</option>
</select>
</p>
<div id="admDivCheck" style="display:none;text-align:center;">Choose delivery date</div>
<p><input type="submit" class="button" value="ADD TO BASKET" /></p>
</form>
<script>
function showdiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("show").value;
if(admOptionValue == nameSelect.value){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
</script>
Edit
Thanks for the assistance on here - the final version which works as I need :
<input type="hidden" value="1" name="qty1" />
<select name="productpr1" id="getFname" onchange="showdiv();">
<option selected value="ERROR - Please select finish">please select</option>
<option class="show" value="product 1:5:0:105805">product 1</option>
<option class="" value="product 2:10:0:105205">product 2</option>
<option class="show" value="product 3:15:0:105605">product 3</option>
</select>
<div id="admDivCheck" style="display:none">Choose delivery date</div>
<p><input type="submit" class="button" value="ADD TO BASKET" /></p>
<script>
function showdiv() {
var getFname= document.getElementById("getFname");
var askForDelivery = getFname.options[getFname.selectedIndex].classList;
if(askForDelivery.contains('show')){
document.getElementById('admDivCheck').style.display = 'block';
}
else{document.getElementById('admDivCheck').style.display = 'none';
}}
</script>
the id property is for the object document model and should be unique, just use 1,2,3 for it
In your script admOptionValue == nameSelect.value This value checking will always same, because selected option only the value of select tag.....
function showdiv(nameSelect)
{
console.log('choosed option',nameSelect.value);
if(nameSelect.value !="") document.getElementById("admDivCheck").style.display = "block";
else document.getElementById("admDivCheck").style.display = "none";
}
<form>
<p align="center">Size :
<input type="hidden" value="1" name="qty1" />
<select name="productpr1" id="getFname" onchange="showdiv(this);">
<option selected value="">please select</option>
<option value="product 1:5:0:105805">product 1</option>
<option value="product 2:10:0:105205">product 2</option>
<option value="product 3:15:0:105605">product 3</option>
</select>
</p>
<div id="admDivCheck" style="display:none;text-align:center;">Choose delivery date</div>
<p><input type="submit" class="button" value="ADD TO BASKET" /></p>
</form>
The reason that it is not working when having multiple id's is this line here:
admOptionValue = document.getElementById("show").value;
That is always going to return the first element with id show.
You should be able to get the selected value like this:
function showdiv() {
var getFname= document.getElementById("getFname");
var selectedValue = getFname.options[getFname.selectedIndex].value;
alert(selectedValue);
}
<select name="productpr1" id="getFname" onchange="showdiv();">
<option selected value="ERROR - Please select finish">please select</option>
<option value="product 1:5:0:105805">product 1</option>
<option value="product 2:10:0:105205">product 2</option>
<option value="product 3:15:0:105605">product 3</option>
</select>
So All I did was get the selectedIndex of the select box, rather than getting the individual option by id. All the options should have a unique id, and trying to get all of them would be a huge waste of time
EDIT
As mentioned earlier, you wanted to add a class to a specific item to determine if it should show or hide another div.
All you would do is check for classList instead of value to determine if it is true.
All you would have to do is get the classList of the selected item. If it contains the desired class, show your hidden div.
function showdiv() {
var getFname= document.getElementById("getFname");
var askForDelivery = getFname.options[getFname.selectedIndex].classList;
if(askForDelivery.contains('show')){
document.getElementById('admDivCheck').style.display = 'block';
}
}
I made a fiddle to demonstrate:
https://jsfiddle.net/k68nuams/
I want to validate the select method with submit type button. I have created a form and under that, I have created the select method and given some options. By submit type, the onClick should validate my submit type with the options in the select method. How can I assign the value of option
to var t based on select?
According to the select option my var t should be changed.
If the value is volvo then it should print val11, similarly Saab= val14, opel= val82, Audi= val34
<select name="carlist" class="temp>
<option value="10">Volvo</option>
<option value="20">Saab</option>
<option value="30">Opel</option>
<option value="45">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">
<script>
var t;
if () {
t=value;
} else if () {
t=value;
} else if () {
t=value;
}else {
t=value;
}
</script>
You can call a function on clicking the button. Inside the function get the text of the selected option:
function getValue(){
var el = document.querySelector('.temp');
var val = el.options[el.selectedIndex].text;
var t;
if(val == "Volvo")
t = 'val11';
else if(val == "Saab")
t = 'val14';
if(val == "Opel")
t = 'val82';
else if(val == "Audi")
t = 'val34';
alert(t);
}
<form>
<select name="carlist" class="temp">
<option value="10">Volvo</option>
<option value="20">Saab</option>
<option value="30">Opel</option>
<option value="45">Audi</option>
</select>
<input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>
You can also think of using data attribute which is more cleaner and simpler:
function getValue(){
var el = document.querySelector('.temp');
var t = el.options[el.selectedIndex].getAttribute('data-val');
alert(t);
}
<form>
<select name="carlist" class="temp">
<option value="10" data-val="val11">Volvo</option>
<option value="20" data-val="val14">Saab</option>
<option value="30" data-val="val82">Opel</option>
<option value="45" data-val="val34">Audi</option>
</select>
<input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>
You can do a few things, here's the simplest I could get away with.
function submitForm() {
const value = document.querySelector('[name="carlist"').value;
console.log(value);
return false; // to prevent it navigating away.
}
<form onsubmit="submitForm()">
<select name="carlist" class="temp">
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">
You can also have some validation running earlier, e.g. on change:
/**
* This function runs on form submit.
*/
function submitForm(event) {
const value = document.querySelector('[name="carlist"').value;
console.log(value);
// to prevent it navigating away.
event.preventDefault();
return false;
}
/**
* This function runs on selection change
*/
function validateCar(changeEvent) {
console.log('Change');
// do something with changeEvent
}
<form onsubmit="submitForm(event)">
<select name="carlist" class="temp" onchange="validateCar(event)">
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">
You can set an id attribute on the select element and then access it through a querySelector or getElementById.
<form id="carForm">
<select name="carlist" class="temp" id="car">
<option value="val11">Volvo</option>
<option value="val14">Saab</option>
<option value="val82">Opel</option>
<option value="val34">Audi</option>
</select>
</form>
let carForm = document.getElementById('carForm');
carForm.onsubmit = function(event) {
var t = document.getElementById('car');
...
}
See codepen example
I have a following html drop down menu with Go button, it is working fine for the first two option values selection first and then hitting Go button, but not working for other two option values, which are having onclick events, Please help me that how to work with onclick event in <option> tag so that I can execute respective alert messages. I need it should work in Google Chrome browser. Thanks in advance.
<html>
<head>
<script>
function third(){
alert("It is a third option event");
}
function fourth(){
alert("Fourth option value");
}
</script>
</head>
<form name="testform" id="testformid">
<select name="testdropdownmenu" >
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option onclick="third()">Third Option</option>
<option onclick="fourth()">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
</html>
Jquery
$(function(){
$('#testdropdownmenu').on('change', function(){
var val = $(this).val();
if(val === 'third') {
alert('third option')
}
else if(val === 'fourth') {
alert('fourth option')
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="testform" id="testformid">
<select name="testdropdownmenu" id="testdropdownmenu">
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option value="third">Third Option</option>
<option value="fourth">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
JavaScript
function checkval() {
var val = document.getElementById('testdropdownmenu').value
alert(val);
}
<form name="testform" id="testformid">
<select name="testdropdownmenu" id="testdropdownmenu"onchange="checkval()">
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option value="third">Third Option</option>
<option value="fourth">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
Use the onchange event on select and then compare its value.
You cannot trigger "onclick" event for option tag. Instead You can use "onchange" event of select tag.
The onclick attribute is not supported by the option tag. better use the onchange function on the 'select' tag
<html>
<head>
<script>
function changeValue() {
//get selected value
}
</script>
</head>
<form name="testform" id="testformid">
<select name="testdropdownmenu" onchange="changeValue();" >
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option >Third Option</option>
<option >Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
</html>
Just try to use onFocus, will trigger when user focus on the element
onclick is not the appropriate event to attach on select > option
Instead you should use onchange for your case. onchange fires whenever you change the the value of select box. And then in your function called on click you can check if its second/third then do something. check the code below:
In HTML:
<select id="testdropdownmenu" onchange="myFunction()">
And in Javascript:
function myFunction() {
var favValue = document.getElementById("testdropdownmenu").value;
// Do something your favourite value appears here
alert(favValue);
}
Hope this helps!!
this is my Form code
<form id="search_mini_form">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>
</select>
<button class="button" title="Search" type="submit">Search</button>
what trying to achieve on submit my from redirects according to what values are selected from drop down
like if on painting is selected it should redirect to mysite/paintings or if only style (abstract) selected it would redirect to mysite/artwork?abstract or if both selected it should be like mysite/painting?abstract
how can i achieve this ?
i have tried using Jquery
<script type="text/javascript">
$(".catvalue").change(function(){
$catvalue = $(".catvalue option:selected").val();
alert ("$catvalue")
});
$(".styvalue").change(function(){
$styvalue = $(".styvalue option:selected").val();
});
if ($catvalue)
{
$redirecturl = "mysite/"+$jqcatvalue;
}
else if ($styvalue)
{
$redirecturl = "mysite/artwork?"+$styvalue;
}
else if ($styvalue && $styvalue )
{
$redirecturl = "mysite/"+$jqcatvalue="?"+$jqstyvalue;
}
is it right approach ?? how could i pass it to form action ?
edit : using magento so have to get base url by <?php echo Mage::getBaseUrl() ?>
I think what you are looking for here is almost the basic drop down navigation schema, very common implementation similar to this example.
<FORM name="f1">
<SELECT name="s1">
<OPTION SELECTED value="http://www.java2s.com">Java2s.com
<OPTION value="http://www.google.com">Google
<OPTION value="http://www.msn.com">msn
<OPTION value="http://www.perl.com">Perl.com
<OPTION value="http://www.php.net">Php.net
</SELECT>
<INPUT type="button" name="go" value="Go!" onClick="window.location=document.f1.s1.options[document.f1.s1.selectedIndex].value">
</FORM>
Your select options should have the value of the page location to navigate and your onClick value simply calls window.location and uses the selected form data appropriately. No need to actual "submit" the form here to a form handler, use pure javascript like one of the commenters mentioned.
Using this example you could easily add the second portion of your select as a "?option" with an if statement. The onClick could be moved into a function instead of calling window.location directly to do the analysis.
UPDATE: Here is your code re-purposed with this method, it's quick and dirty, might have a couple errors I haven't had the time to check it yet.
<script>
function doSearch() {
var cat = document.search_mini_form.cat.options[document.search_mini_form.cat.selectedIndex].value;
var style = document.search_mini_form.style.options[document.search_mini_form.style.selectedIndex].value;
if ((cat) && (style)) {
alert(cat + "?" + style);
// send to page using variables
}
else if (cat) {
alert(cat);
// send to page using variables
}
else {
alert("nothing selected");
}
}
</script>
<form name="search_mini_form" id="search_mini_form">
<select name="cat" id="cat" class="input-text-select catvalue">
<option value="">All Mediums</option>
<option value="painting">Painting</option>
<option value="photo">Photography</option>
<option value="paper">Work on paper</option>
<option value="drawing">Drawing</option>
</select>
<select name="style" id="style" class="input-text-select styvalue">
<option value="">All Styles</option>
<option value="abstract">Abstract</option>
<option value="arch">Architectural</option>
</select>
<button class="button" title="Search" onClick="doSearch()">Search</button>
</form>
<form id="search_mini_form" action="">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>
</select>
<button class="button" title="Search" type="submit">Search</button>
$(".input-text-select styvalue").change(function(){
$("search_mini_form").attr("action","mysite/");
var thisvalue = $(this).find("option:selected").text();
$("search_mini_form").attr("action","mysite/"+thisvalue );
});
Please try the following code
<form id="search_mini_form">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>
</select>
<input class="button" title="Search" type="submit" value="Search"/>
</form>
Check the javascript code
$('#search_mini_form').submit(function(){
var mediums=$('#cat option:selected').text();
var styles=$('#style option:selected').text();
if(styles!="AllStyles" && mediums =="All Mediums")
{
$('#search_mini_form').attr("action",'mysite/artwork?'+styles+'=test');
}
else if(styles =="AllStyles" && mediums !="All Mediums")
{
$('#search_mini_form').attr("action",'mysite/'+mediums);
}
else
{
$('#search_mini_form').attr("action",'mysite/'+mediums+'?'+styles+'=test');
}
});
http://jsfiddle.net/zzyEY/18/
Got the following code:
<form action="./index.html" method="get">
<select class=" locationdropdown selectdropdown pull-right" id="prayerMethod">
<option value="ISNA">ISNA</option>
<option value="MWL">MWL</option>
<option value="Egypt">Egypt</option>
<option value="Makkah">Makkah</option>
<option value="Karachi">Karachi</option>
<option value="Tehran">Tehran</option>
<option value="Jafari">Jafari</option>
</select>
<input type="submit" value="SUBMIT" style="display:none;">
</form>
<script>
var mySelect = document.getElementById("prayerMethod");
$(mySelect).change(function(){
// $(this).parent('form').submit();
// alert(mySelect.options[mySelect.selectedIndex].value );
prayTimes.setMethod(mySelect.options[mySelect.selectedIndex].value );
});
</script>
I would like it to update the dom with the new value given by the select tag which is inputted into the prayTimes() method. How can I do that?