根据选择重定向到新网页

Question

I want to direct the user in to different websites based on its choices. I have troubles to find where to do code something else. As now, the HTML is dominant and it diects only to what it is written in action="...". I want my solution to be based on the choices made in selects and when the button is submitted to navigate the user to correct website.

function byttMeny(){

    var username = "<?php echo $navn; ?>";

    var kundeMeny = document.getElementById("kunder");
    var prosjektMeny = document.getElementById("prosjekt");

    for(i = 0; i < kundeMeny.options.length; i++){
        var menu = kundeMeny.options[i].text;

        document.getElementById(menu).style.display = "none";
    }

    var currentMeny = kundeMeny.options[kundeMeny.selectedIndex].text; // Gir deg prosjektmeny utifra hva som er valgt i kundemeny

    document.getElementById(currentMeny).style.display = "block";

    document.getElementById("verdi").value = document.getElementById(currentMeny).options[document.getElementById(currentMeny).selectedIndex].text; 

    if(currentMeny == "Hydro")
    {
        var dropMeny = document.getElementById("Hydro");
        var valg = dropMeny.options[dropMeny.selectedIndex].text;

        document.getElementById("Kunde").value = "Hydro";

        if(valg == "Karmøy"){
            document.getElementById("kundevalg").action = "norsokgrupper.php";
        } else if(valg == "Noe annet"){ 
      document.getElementById("skjema").action = "noeannet.php";
        }
    } 
    else if(currentMeny == "Statoil")
    {

        var dropMeny = document.getElementById("Statoil");
        var valg = dropMeny.options[dropMeny.selectedIndex].text;

        document.getElementById("Kunde").value = "Statoil";

        if(valg == "Sverdrup"){
            document.getElementById("kundevalg").action = "norsokgrupper.php";
        } else if (valg == "noennet"){ 
            document.getElementById("skjema").action = "piss.php";
        }
    }
    else if(currentMeny == "Yara")
    {

        var dropMeny = document.getElementById("Yara");
        var valg = dropMeny.options[dropMeny.selectedIndex].text;

        document.getElementById("Kunde").value = "Yara";

        if(valg == "Sokli"){
            document.getElementById("kundevalg").action = "tull.php";
        } else if (valg == "noennet"){ 
       document.getElementById("skjema").action = "piss.php";
        }
    }
}

<form method="post" id="kundevalg"> 
    <div id="fixed-box" class="skygge">

<table>

        <h4 id="colorh4">Velg kunde og prosjekt</h4>


        <select id="kunder" name="kunder" onchange="byttMeny()">
            <?php
            {
            $sql = "select kundenavn from kunde";
            $resultat = mysqli_query($db, $sql);
            while($rad=mysqli_fetch_object($resultat))
            {
            $kunde = $rad->kundenavn;
            ?>
            <option> <?=$kunde?> </option>";
            <?php   
            }               
            ?>
        </select>
        <p></p>


            <select id="Hydro" type="text" name="Hydro" onchange="byttMeny()">   
                <?php 

                $sql = "select navn, prosjektid from prosjekt where kunde = 'Hydro'"; 
                $resultat = mysqli_query($db, $sql);
                mysqli_set_charset($db, "utf8");

                while ($rad = mysqli_fetch_object($resultat))
                  {
                $prosjekt = $rad->navn;
                ?>
                <option value="<?= $rad->prosjektid; ?>"> <?=$prosjekt?> </option>";       
                <?php 
                }
                ?>              
            </select>

            <select id="Statoil" type="text" name="Statoil"  onchange="byttMeny()">
                <?php 
                if($navn == "Martynas")
                {
                $sql = "select navn, prosjektid from prosjekt where kunde = 'Statoil'";
                $resultat = mysqli_query($db, $sql);

                while ($rad = mysqli_fetch_object($resultat))
                  {
                $prosjekt = $rad->navn;
                ?>
                <option value="<?= $rad->prosjektid; ?>"> <?=$prosjekt?> </option>
                <?php
                }
                ?>   

            </select>
             <select id="Yara" type="text" name="Yara"  onchange="byttMeny()">
                <?php 
                $sql = "select navn, prosjektid from prosjekt where kunde = 'Yara'";
                $resultat = mysqli_query($db, $sql);

                while ($rad = mysqli_fetch_object($resultat))
                  {
                $prosjekt = $rad->navn;
                ?>
                <option value="<?= $rad->prosjektid; ?>"> <?=$prosjekt?> </option>
                <?php
                }
                ?>   
            </select>


        <input id="neste_kunde" type="submit" name="neste" value="neste"/> 
        <input type="hidden" id="verdi" name="verdi" />
    </div>
</form>
      <div id="mcbilde">
          <img src="multibly2.jpg" class="stretch"/>
      <img src="mctr.png" class="trekant"/>

</div>

Answer 1

For events you could use <a href="">Click me</a>

Or you can bind javascript events to button click like so

<div onclick="myFunction()">Click me</div>

A href click example Javascript onclick example

Answer 2

This should work:

<form method="post" id="kundevalg" onsubmit="redirect()"> 

JS:

function redirect(){
     document.getElementByTagId('kundevalg').action="http://newurl.com";
     return true;
}

Answer 3

This should do the trick

// Bind a change event to the select input 
$('#Hydro').change( function(evt) { 
     // then use javascript to redirect to the value of the selected input
     window.location.href =  $(this).val();

});

Answer 4

You can create a map with key value. and depending upon the you can decide the view while creating the view dynamically.