How to select from list and click submit button then go to link "in HTML"-CodePudding

I found this code for my project. I want to change this to open website with click on submit button

<html>
<body>
<form action="/action_page.php" method="get">
  <label for="cars">Choose a Site:</label>
  <select id="site" name="site">
    <option value="Google">Google</option>
    <option value="Yahoo">Yahoo</option>
    <option value="MSN">MSN</option>
  </select>
  <input type="submit">
</form>
</body>
</html>

for example: when select "Google" from list, with click on "submit" button open "www.google.com" that exist on "action_page.php"

I dont have "action_page.php" code

CodePudding user response：

Firstly, I modified your html code:

<html>
<body>
<form method="get">
  <label for="cars">Choose a Site:</label>
  <select id="site" name="site">
    <option value="Google">Google</option>
    <option value="Yahoo">Yahoo</option>
    <option value="MSN">MSN</option>
  </select>
</form>
<button type="button" id="button" >Submit</button>

<script src="script1.js"></script>
</body>
</html>

Made a button outside of the form and referenced the external js file script1.js

Then I created the js file and added this code to it:

var select = document.getElementById('site');

document.getElementById("button").onclick = function(){
    var value = select.value
    if (value == "Google")
    {
        window.location.href = "https://www.google.com/";
    }
    else if (value == "Yahoo")
    {
        window.location.href = "https://www.yahoo.com/";
    }
    else if (value == "MSN")
    {
        window.location.href = "https://www.msn.com/";
    }
};

It finds the select tag and the button from the html script, checks if the button was pressed and redirects to the corresponding website based on the dropdown selection.

CodePudding user response：

01-I tried to use more than one "List" with changing names of getElementById("site") and getElementById("button") but it dosent work well.

HTML code:

<html>
<body>
<form method="get">
  <label for="Links01">Choose a Site:</label>
  <select id="site01" name="site01">
    <option value="Google">Google</option>
    <option value="Yahoo">Yahoo</option>
    <option value="MSN">MSN</option>
  </select>
</form>
<button type="button" id="button01" >Submit</button>
<script src="script1.js"></script>
<form method="get">
  <label for="Links02">Choose a Site:</label>
  <select id="site02" name="site02">
    <option value="Google">Google</option>
    <option value="Yahoo">Yahoo</option>
    <option value="MSN">MSN</option>
  </select>
</form>
<button type="button02" id="button02" >Submit</button>
<script src="script1.js"></script>
<form method="get">
  <label for="Links">Choose a Site:</label>
  <select id="site03" name="site03">
    <option value="Google">Google</option>
    <option value="Yahoo">Yahoo</option>
    <option value="MSN">MSN</option>
  </select>
</form>
<button type="button" id="button03" >Submit</button>
<script src="script1.js"></script>
</body>
</html>

script1.js code

var select = document.getElementById('site01');

document.getElementById("button01").onclick = function(){
    var value = select.value
    if (value == "Google")
    {
        window.open('https://tax.gov.ir/Pages/HomePage', '_blank');
    }
    else if (value == "Yahoo")
    {
        window.open('https://www.yahoo01.com', '_blank');
    }
    else if (value == "MSN")
    {
        window.open('https://www.msn01.com', '_blank');
    }
};

var select = document.getElementById('site02');

document.getElementById("button02").onclick = function(){
    var value = select.value
    if (value == "Google")
    {
        window.open('https://www.google02.com', '_blank');
    }
    else if (value == "Yahoo")
    {
        window.open('https://www.yahoo02.com', '_blank');
    }
    else if (value == "MSN")
    {
        window.open('https://www.msn02.com', '_blank');
    }
};

var select = document.getElementById('site03');

document.getElementById("button03").onclick = function(){
    var value = select.value
    if (value == "Google")
    {
        window.open('https://www.google03.com', '_blank');
    }
    else if (value == "Yahoo")
    {
        window.open('https://www.yahoo03.com', '_blank');
    }
    else if (value == "MSN")
    {
        window.open('https://www.msn03.com', '_blank');
    }
};

whats wrong ?

02- How can use the "submit button" in front of the "List" instead of bottom?

03- How to add picture for each lable ?

I have this code but cant use it

<img src="file:///C:/images/lable.png" width="25" height="25">Lable</div>