CODEWITHSUNDEEP
html
NotAProSad
NotAProSad

Reputation: 3

HTML Select Box with multiple links and button

I have a select box and a button:

  <form target="_blank" action="document.getElementById('pages').value">

    <select class="aa" name="pages" id="pages">
      <option value="www.google.com" style="color:#d15347">Google</option>
      <option value="www.facebook.com" style="color:#d15347">Facebook</option>
      <option value="www.twitter.com" style="color:#d15347">Twitter</option>
    </select>

    <button type="submit" class="button2"><span> GO </span></button>
  </form>

Whenever I select one website and click on button GO, i want to go to the companie's page. How can i do this?

Upvotes: 0

Views: 479

Answers (1)

mplungjan
mplungjan

Reputation: 177975

Like this

Note the _blank will not work at SO due to sandbox - it generates a

Blocked opening 'https://www.google.com/' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.

but should work at your site

NOTE also you need to remove the name attribute to not pass the value of the select onto the site you open

Full page example

http://plungjan.name/SO/selectasite/index.html

<!doctype html>
<html>
<head>
  <title>Form links</title>
  <script>
    window.addEventListener("load", function() {
      document.getElementById("form1").addEventListener("submit", function(e) {
        this.action = document.getElementById("pages").value;
      })
    })
  </script>
</head>
<body>
  <form id="form1" target="_blank">
    <select class="aa" id="pages">
      <option value="https://www.google.com" style="color:#d15347">Google</option>
      <option value="https://www.facebook.com" style="color:#d15347">Facebook</option>
      <option value="https://www.twitter.com" style="color:#d15347">Twitter</option>
    </select>

    <button type="submit" id="go" class="button2"><span> GO </span></button>
  </form>
</body>
</html>

Upvotes: 1

Related Questions