Send user to link by choosing a select option

Question

i got this piece of code from Bootstrap to get an interactive form in my website:

<select class="form-control">
  <option>Default select</option>
</select>'

what i want to do next is let the user visit a specific link based on what they click. i know that in order to do that, each option must get an id, so i did this:

<select class="form-control">
            <option>what are you interested in?</option>
            <option id="photos">photos</option>
            <option id="books">books</option>
            <option id="recipes">recipes</option>
</select>

this is where the part i'm confused about comes in; how can i let the user actually visit the link? i'm pretty sure that i can do that by a function but what exactly will i have to write in that function?

Answer 1

1. Setup:

First things first, use the value attribute to determine the currently selected value, rather than id to determine what is the currently selected value. This is better for a11y compatibility, but also common pattern for Event handling.

So your HTML should look something like this:

<select class="form-control" id="example">
  <option disabled>what are you interested in?</option>
  <option value="photos">photos</option>
  <option value="books">books</option>
  <option value="recipes">recipes</option>
</select>

2. Implementation

Unclear from your question, but depending on your implementation needs:

Approach 1: Redirect user immediately onChange

const handleChange = (event) => {
  const { value } = event.target // gets the currently selected value
  window.location.href = `https://yourURL.com/${value}`
  // or however is your routing setup ^
}

Approach 2: Redirect after form onSubmit:

let selectedURL = ''

const handleChange = (event) => {
  const { value } = event.target
  selectedURL = `https://yourURL.com/${value}` 
}

const handleSubmit = (_event) => {
  window.location.href = yourURL
}

3. Putting it all together

• Approach 1:

/* Approach 1 */
const select1 = document.getElementById('approach1')

const handleChange1 = (event) => {
 const { value } = event.target
 const redirectTo = `https://example-url.com/${value}`
 // window.location.href = redirectTo
 console.warn(`Suppressed redirection for example sake (${redirectTo}). Uncomment in your code`)
}

select1.addEventListener('change', handleChange1)

<div> 
  <!-- APPROACH 1 -->
  <h3>Approach 1</h3>
  <select id="approach1" class="form-control">
    <option disabled>what are you interested in?</option>
    <option value="photos">photos</option>
    <option value="books">books</option>
    <option value="recipes">recipes</option>
  </select>
</div>

• Approach 2:

/* Approach 2 */
const select = document.getElementById('approach2')
const submit = document.getElementById('submit')
let redirectTo = ''

const handleChange = (event) => {
  const { value } = event.target
  redirectTo = `https://example-url.com/${value}`
}

const handleSubmit = (_event) => {
  // window.locaiton.href = redirectTo
   console.warn(`Suppressed redirection for example sake (${redirectTo}). Uncomment in your code`)
}

select.addEventListener('change', handleChange)
submit.addEventListener('click', handleSubmit)

<div>
  <!-- APPROACH 2 -->
  <h3>Approach 2</h3>
  <select id="approach2" class="form-control">
    <option disabled>what are you interested in?</option>
    <option value="photos">photos</option>
    <option value="books">books</option>
    <option value="recipes">recipes</option>
  </select>
  <button id="submit">Submit</button>
</div>

Note, technically you can also use the <form> and use onSubmit rather than click, but this is unnecessary. I think @cssyphus made a great answer on this in its own right.

Answer 2

Since you're using Bootstrap you can use jQuery syntax (it's included with Bootstrap as a dependency).

Your <select> control is perhaps not configured optimally. First, the <option> elements should be like this:

<option value="photos">photos</option>  <==== value, not id

Also, your javascript/jQuery will be easiest if you give the select element an id:

<select id="mySel" class="form-control">

In your javascript file (or in a <script></script> block in your HTML head or body):

$('#mySel').change(function(){ <=== #mySel must match the id of the <select>
    sel = $(this).val();
    if (sel == 'photos'){
        window.location.href = 'http://example.com/photos.php';
    } else if (sel == 'books'){ {
        window.location.href = 'books.html';
    }
});

By the way, you don't need a "form" for what you are doing. Bootstrap uses the term form-control as a class name... that is confusing since the class has pretty much nothing to do with forms (Bootstrap devs probably named it such while they were making form input fields look pretty - but that class just makes input fields look pretty. It can be used anytime, whether in a form construct or not.)

Indeed, the only time you need a form is if you wish to collect data from users and then send that data to another page for processing. But in this day and age, there is no need to ever use forms since AJAX is just as easy and doesn't refresh or navigate away from the current page.

On the other hand... I assumed above that you want the user to visit the link immediately upon choose from the select control. IF, otoh, you want them to be sent there after submitting a form, here's how that would work.

The <form></form> structure surrounds a number of HTML elements that get turned into key/value pairs (i.e. variableName + userEnteredData). Here's how that works.

When the form is submitted, the receiving side gets these key/value pairs from: (a) the name="" attribute from each HTML element, and (b) the data the user entered into each element. They are paired-up, turned into VariableName + VariableContents (with the variableName being whatever was typed into the name="" attribute of that element.

The "receiving side" is defined by whatever gets typed into the action="" attribute on the <form> tag. E.g.:

<form action="otherside.php" method="post">

If there is no action="" attribute, then the form data is posted back to the same file it started from - so you typically need some PHP code at the top of this file (index.php?) to decide if there is data coming in or not.

Anyway, it is in the receiving side that you would receive the key/value pair of the <select> control matched with the value of what the user selected, and you would need code to read what that value is and then redirect the user to the desired location. In php, the command to use would be header().