CODEWITHSUNDEEP
javascripthtmlhttp-redirect
Hayley Hoffman
Hayley Hoffman

Reputation: 41

Redirecting to specific pages after radio button is selected

I would like to Redirect to one of two pages containing two separate basic math functions in Javascript. The pages should be linked to one of two radio buttons given and redirected upon the user clicking the "okay" button.

function myFunction() {
  var x = document.getElementById("x");
  var y = document.getElementById("y")

  if (x.checked = true); {
    //* redirect link when Okay button is click 
  } else(y.checked = true); {
    //* redirect link when Okay button is clicked
  }
}
<!DOCTYPE html>
<html>

<body>

  <p>What would you like to convert?</p>

  <form action="/action_page.php">
    <input type="radio" name="converter" value="grams" id="x">Grams to ounces
    <br>
    <input type="radio" name="converter" value="ounces" id="y">Ounces to grams
    <br>
    <br>
    <input type="button" onclick="myFunction()" value="Okay!">
    <br>
  </form>


</body>

</html>

Upvotes: 4

Views: 836

Answers (3)

axel axel
axel axel

Reputation: 253

You should use a select box it'll be easier for you

<select id="myChoice">
  <option value="grams">grams</option>
  <option value="ounces">ounces</option>
</select>

and in your JS

function myFunction() {
    var theChoice = document.getElementById("myChoice")

    switch (theChoice.value){
      case 'grams':
         //redirect;
         break;
      case 'ounces':
         //redirect
         break;
}

Upvotes: 3

Sam
Sam

Reputation: 1851

The following will check if the checkbox is ticked and then redirect you to the url you define. I have used else if as else would have redirected you to location y if neither checkbox was selected in your example. 

<form action="/action_page.php">
    <input type="radio" name="converter" value="grams" id="x">Grams to
    ounces<br>
    <input type="radio" name="converter" value="ounces" id="y">Ounces to
    grams<br>
    <br>
    <input type="button" onclick="myFunction()" value="Okay!">
    <br>
</form>

<script>
  function myFunction() {
  var x = document.getElementById("x");
  var y = document.getElementById("y")

  if (x.checked)
  {
     window.location.replace("url");
  }
  else if (y.checked)
  {
     window.location.replace("url");
  }
  }
  </script>

Upvotes: 0

Lucas
Lucas

Reputation: 301

it's simple just create an element of type a, put the attributes and simulate a click() to redirect

here's the pen example: https://codepen.io/lucassoomago/pen/YbKwJx

the following example does not redirect because the stack overflow does not allow, if you want to see redirecting use the link above

      function myFunction() {
        var x = document.getElementById("x");
        var y = document.getElementById("y")

        var a = document.createElement("a");

        if (x.checked == true)
        {
          a.setAttribute('href', 'https://www.google.com');
          a.setAttribute('target', 'blank');
        }else if (y.checked == true)
        {
          a.setAttribute('href', 'https://www.youtube.com');
          a.setAttribute('target', 'blank');
        }
      
        a.click()
      }
     <p>What would you like to convert?</p>

    <form action="/action_page.php">
       <input type="radio" name="converter" value="grams" id="x">Grams to 
        ounces<br>
       <input type="radio" name="converter" value="ounces" id="y">Ounces to 
        grams<br>
       <br>
       <input type="button" onclick="myFunction()" value="Okay!">
       <br>
       </form>

Upvotes: 1

Related Questions