html - how to compose href based on selection menu

Question

How to compose web address based on selection menu?

The desired link should be composed of choosen values, for instance, "https://www.Opel_Volvo.com"

In the provided code, I need to change

  action="https://www.lipsum.com"

for a string composed of selected possibilities.

<html>
<body>
<h1>CAR</h1>
<form
  target="_blank"
  action="https://www.lipsum.com"
  method="get"
>

  <label for="car1">Choose a car 1:</label>
  <select id="car1" name="car1">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br><br>

  <label for="car2">Choose a car 2:</label>
  <select id="car2" name="car2">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br><br>


  <input type='submit' value='OK'>

</form>


</body>
</html>

After advice

Please show us what you have done so far. Also are you wanting this server side using something like PHP or client-side using javascript ? — Rohit Gupta, Sep 16 '22 at 05:47
I provided a code that opens a webpage after clicking on OK. My question is how to compose the string after action from selected options. I do not want to use something like PHP or client-side using javascript; just open a different web page based on selection. — Elena Greg, Sep 16 '22 at 05:53
If you want to manipulate Dom object you should use Javascript on client side or a language like php on server side. — Lety, Sep 16 '22 at 06:07
The select does not work that way. The closes you can come is in these two posts [Post1](https://stackoverflow.com/questions/2827038/how-to-anchor-with-option-tag-in-html) and [Post2](https://stackoverflow.com/questions/10309299/select-option-with-anchor) — Rohit Gupta, Sep 16 '22 at 06:19

score 2 · Accepted Answer · answered Sep 16 '22 at 06:12

2

You can use JavaScript to add input event listener to the select elements, and set the action attribute of form accordingly.

let sel1 = document.querySelector("#car1");
let sel2 = document.querySelector("#car2");
let form = document.querySelector("form");

[sel1, sel2].forEach(s =>{
  s.addEventListener("input", ()=>{
    let url = `https://www.${sel1.value}_${sel2.value}.com`;
    form.setAttribute("action", url)
    console.log(form.action)
  })
})

<html>
<body>
<h1>CAR</h1>
<form
  target="_blank"
  action="https://www.lipsum.com"
  method="get"
>

  <label for="car1">Choose a car 1:</label>
  <select id="car1" name="car1">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br><br>

  <label for="car2">Choose a car 2:</label>
  <select id="car2" name="car2">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br><br>

  <input type='submit' value='OK'>
</form>
</body>
</html>

answered Sep 16 '22 at 06:12

TechySharnav

4,869
2
11
29

Also the OP has said no PHP and no javascript – Rohit Gupta Sep 16 '22 at 06:21
@RohitGupta I do not mind. I am a beginner and I imagine this is easier than it really is. – Elena Greg Sep 16 '22 at 06:24
@TechySharnav The first part should be in another file? Or this is whole .HTML code? – Elena Greg Sep 16 '22 at 06:24
Note that in its current form, if neither of the `select` elements are interacted with, clicking the OK button will navigate to initial value of `action` (i.e. `https://www.lipsum.com`) instead of a URL based on the default values of the `select` elements (i.e. `https://www.volvo_volvo.com`). – chuckx Sep 16 '22 at 06:35
@ElenaGreg You can use a ` – TechySharnav Sep 16 '22 at 10:25

score 0 · Answer 2 · answered Sep 16 '22 at 06:18

There are several way to achieve this.

You could use Javascript to change the url of the form action. Something like:

<select id="car1" name="car1" onchange="document.forms[0].setAttribute('action','https://'+car1.value+'_'+car2.value+'.com'">
...

Or you could send the form data to a php script which redirects the user to the desired site.

Or you could use redirects in your .htaccess file:

Redirect 303 https://www.lipsum.com?car1=opel&car2=volvo https://www.Opel_Volvo.com

How is this different to the previous answer ? Also the OP has said no PHP and no javascript — Rohit Gupta, Sep 16 '22 at 06:20

html - how to compose href based on selection menu

2 Answers2