So I am trying to have a page on my site that contains 2 drop down boxes and a submit button. The submit button will point to a URL when clicked and then that will take them to a new page.
The URL will be based on whatever is selected in the drop down menus.
For example:
Drop down 1 has options A and B
Drop down 2 has options 1 and 2
Then there would be a different url for each combination
A1 points to URL-1
A2 points to URL-2
B1 points to URL-3
B2 points to URL-4
I really don't know much about coding and have been searching for a way to do this for the last 3 hours and I just don't even know how to google it. I really appreciate any help I can get at this point. Thank you in advance! :)
Here is the code from my drop boxes. I edited the options to match the example with the A, B, 1, and 2.
<html>
<body>
<form>
<select id="list1t">
<option>Select one</option>
<option>A</option>
<option>B</option>
</select>
</form>
<form>
<select id="list2">
<option>Select one</option>
<option>1</option>
<option>2</option>
</select>
</form>
</body>
</html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var url;
$(function(){
$('#link').click(function(){
var val1=$('#first').val();
var val2=$('#second').val();
if(val1=='A'){
if(val2=='1'){
url="URL1";
}
else{
url="URL2";
}
}else{
if(val2=='1'){
url="URL3";
}
else{
url="URL4";
}
}
window.location.href=url;
});
});
</script>
the html would be
<select id="first">
<option value="A" selected>A</option>
<option value="B">B</option>
</select>
<select id="second">
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
you can use a link for clicking . no need of form or submit button
BUTTON
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>
This question already has answers here:
Drop-down box dependent on the option selected in another drop-down box
(8 answers)
Closed 2 years ago.
I have a dropdown with values A and B. I need to get another dropdown with a set of values 1,2,3,4 only if I change any value in my dropdown ('mySelect'). I need not change the value based on the selection. I just need to display another dropdown ('newSelect').
Dropdown 1:
<select id="mySelect" title="" disabled="disabled">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
If I change the value of dropdown 1, I need to get another dropdown(dropdown 2)
Dropdown 2:
<select id="newSelect" title="" disabled="disabled">
<option value="">Select</option>
<option value="1">Open</option>
<option value="2">Closed</option>
<option value="3">Reopen</option>
<option value="4">InProgress</option>
</select>
Please advice me how to achieve this.
Start your newSelect as hidden:
<select id="newSelect" title="" disabled="disabled" style="display: none">
...
</select>
Tell mySelect to show newSelect whenever mySelect is changed:
$('#mySelect').on('change', function() {
$('#newSelect').show();
});
There are multiple options. I believe you just want to display another dropdown if user selects any value from the first menu.
You can use onChange function and display second menu. For testing purpose, i have removed disabled attribute.
const subMenu = document.getElementById("newSelect");
const mainMenu = document.getElementById("mySelect");
window.onload = function() {
subMenu.style.display = "none";
}
mainMenu.onchange = function () {
subMenu.style.display = "block";
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select id="mySelect" title="">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<select id="newSelect" title="" >
<option value="">Select</option>
<option value="1">Open</option>
<option value="2">Closed</option>
<option value="3">Reopen</option>
<option value="4">InProgress</option>
</select>
</body>
</html>
I think this is what you were hoping for, where the second dropdown is shown when the first is not left unselected (i.e. has a value of 'Select'). If you only want the second dropdown to be shown on a specific choice in the first dropdown then you can change the following line:
if ($("#mySelect option:selected").text() == "Select") {
To this (remember to replace YOUR_VALUE), here we would be checking if the value is not equal to YOUR_VALUE and therefore hide the second dropdown:
if ($("#mySelect option:selected").text() != "YOUR_VALUE") {
Let me know if you needed anything else.
Ollie
// Hide select on load
$("#newSelect").hide();
// Add event to change of first select
$("#mySelect").change(function() {
// Check if selected option is 'Select'
if ($("#mySelect option:selected").text() == "Select") {
// Hide the second dropdown if the first dropdown is 'Select'
$("#newSelect").hide();
} else {
// Show the second dropdown if the first is not equal to 'Select'
$("#newSelect").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select id="mySelect" title="">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
<div>
If I change the value of dropdown 1, I need to get another dropdown(dropdown 2) Dropdown 2:
</div>
<div>
<select id="newSelect" title="" disabled="disabled">
<option value="">Select</option>
<option value="1">Open</option>
<option value="2">Closed</option>
<option value="3">Reopen</option>
<option value="4">InProgress</option>
</select>
</div>
I have a HTML form in my script with some drop-down lists. For example:
<select name="1">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<select name="2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
As you can see, the options in the both lists are identical. What I should do, to stop the user selecting the same option? For example, if the user selects option "b" from list "1", and then tries to select option "b" from list "2", I want the selected option from list "1" to disappear, so the user can't submit the same values...
Sorry for my english. I hope I made myself clear...
You can validate the form to do this.
Tested Working Code:
<html>
<head>
<script>
//put this javascript function in the header. this validates the from one you click the submit button
function validateForm() {
var x = document.forms["myForm"]["box1"].value;//this is the selection of dropdown box 1
var y = document.forms["myForm"]["box2"].value;//this is the selection of dropdown box 2
if (x == y) {//use the if statement to check if the selection are the same
alert("Selection Cannot Be the Same");//error message
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action=""
onsubmit="return validateForm()" method="">
<!--onsubmit calls the function once the submit button is clicked-->
<select name="box1">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<select name="box2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<input type="submit" value="Submit">
</form>
</body>
</html>
You could submit the form when one list option is selected and redisplay with the reduced list of options.
<pre>
<td>
<select name="proses1" class="form-control">
<option value="0" selected>-------</option>
<option value="1">1-Itemset</option>
<option value="2">2-Itemset</option>
<option value="3">3-Itemset</option>
</select>
</td>
<td>
<select name="proses2" class="form-control">
<option value="0" selected>-------</option>
<option value="1">1-Itemset</option>
<option value="2">2-Itemset</option>
<option value="3">3-Itemset</option>
</select>
</td>
<td>
<select name="proses3" class="form-control">
<option value="0" selected>-------</option>
<option value="1">1-Itemset</option>
<option value="2">2-Itemset</option>
<option value="3">3-Itemset</option>
</select>
</td>
</pre>
i have tag html like above.. and i want for example i selected 1-itemset from proses1 and then i choose 1-itemset from proses2,
1-itemset from proses1 it get back to default(-------),
so the point is i want option just can selected one option.. how i can make it. thanks before
Although you havent said what type of process you want, i suggest you do it with jquery like
var selects = $("select[name=proses1],select[name=proses2],select[name=proses3]");
selects.on("change",function(evt){
selects.not("[name=" + evt.target.name + "]").val(0);
});
FIDDLE
EDIT
To use this, first you need to add jQuery library to your code then place this inside $(document).ready() method. As a summary, place the code below inside your head section.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var selects = $("select[name=proses1],select[name=proses2],select[name=proses3]");
selects.on("change",function(evt){
selects.not("[name=" + evt.target.name + "]").val(0);
});
});
</script>
What this does is to add an onChange event handler with .on("change") method to the select elements and in that handler all select elements values are being set to 0 which is the very first option except the current one.
Im working with just HTML at the moment and I would like to have a drop down menu option that opens more than one tab in the brower, I have been able to open one tab in the brower with one option but I was wondering if it is posible to open more than one with one option. I look forward to hearing from you, Thank you.
<form name="form" id="form">
<select name="Dropdown" id="Dropdown">
<option value="inidivual/Mindmap.pdf" selected="selected">Mind map</option>
<option value="inidivual/moneymatters.xlsx">Spreadsheet</option>
<option value="#">Identity design and documents</option>
<option value="#">Project review</option>
</select>
<input type="button" name="go_button" id= "go_button" value="Open" onClick="window.open(Dropdown.value,'newtab'+Dropdown.value)">
</form>
To select multiple options it should be set to multiple as this,
<form name="form" id="form" >
<select name="Dropdown" multiple id="Dropdown">
<option value="http://www.google.com" selected="selected">Mind map</option>
<option value="http://www.yahoo.com">Spreadsheet</option>
<option value="http://www.sdesigns.co.in">Identity design and documents</option>
<option value="http://www.bing.com">Project review</option>
</select>
<input type="button" name="go_button" id= "go_button" value="Open"">
</form>
and use the following jquery
$("#go_button").click(function(){
$("#Dropdown :selected").each(function(){
var newLink = $(this).val();
window.open(newLink);
});
});