How to create conditional logic link with drop-down field in html? - html

Question

How to create conditional logic link with drop-down field in html? eg drop down field= item1, item2 and suit button link based on item1=url1 or item2=url2.

Answer 1

Here's a very basic example showing how to redirect the browser to the url selected from a dropdown among a list of options, when the form gets submitted.
This demo adds a submit event listener to the #mainForm when the page has loaded, that will cancel the default behaviour with event.preventDefault() (mdn) and will visit the page at the url defined in the selected option (mdn).
Plus the dropdown itself listens for the change event printing on console the latest url selected and enabling the submit button as soon as a valid option was chosen.
Two ways to listen to events were showed here... both with addEventListener and with the onchange html attribute in the declarative way.
document.addEventListener('DOMContentLoaded', ()=>{
const mainForm = document.getElementById('mainForm');
mainForm.addEventListener('submit', (event)=>{
event.preventDefault();
const url = fetchSelectedUrl();
location.assign(url);
});
});
function fetchSelectedUrl(){
document.querySelector('#mainForm button[type=submit]').removeAttribute('disabled');
const url = document.getElementById('urls').value;
console.log(`Selected url: ${url}`);
return url;
}
label{
margin-right: 1rem;
font-size: 1rem;
}
#urls{
padding: 0.25rem;
}
form{
width: 50%;
}
.row{
display: flex;
margin-bottom: 1rem;
}
.row > *:nth-child(1){
flex: 25%;
}
.row > *:nth-child(2){
flex: 75%;
}
.submit{
text-align: right;
}
button[type=submit]{
padding: 0.25rem 0.75rem;
cursor: pointer;
font-weight: bold;
}
<form id="mainForm">
<div class="row">
<label for="urls">Select a page to visit:</label>
<select id="urls" onchange="fetchSelectedUrl();">
<option value="" disabled selected>Select an option</option>
<option value="https://google.com">Google (com)</option>
<option value="https://google.de/">Google (de)</option>
<option value="https://google.fr">Google (fr)</option>
</select>
</div>
<div class="submit">
<button type="submit" disabled>GO!</button>
</div>
</form>