CODEWITHSUNDEEP
javascript
Joey Schwind
Joey Schwind

Reputation: 25

HTML page with Radio Buttons

I'm trying to figure out how to get my radio buttons to direct me to the webpage after you make your selection and hit submit. This is the code I have thus far. 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
  <h1>Radio Buttons</h1>
  </div>

  <div data-role="main" class="ui-content">
    <form method="post" action="demoform.asp">
      <fieldset data-role="controlgroup">
      <legend>Choose a Website:</legend>
        <label for="ESPN.com">ESPN.com</label>
        <input type="radio" name="website" id="ESPN.com" value="http://espn.go.com">
        <label for="Facebook.com">Facebook.com</label>
        <input type="radio" name="website" id="Facebook.com" value="https://www.facebook.com">
        <label for="Apple.com">Apple.com</label>
        <input type="radio" name="website" id="Apple.com" value="http://www.apple.com"> 
      </fieldset>
        <input type="submit" data-inline="true" value="Submit">
    </form>
  </div>
</div>

</body>
</html>

Upvotes: 1

Views: 61

Answers (3)

Joey Schwind
Joey Schwind

Reputation: 25

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function whichsite(form){
    var sites = form.elements.site, i = sites.length;
    while (--i > -1){
        if(sites[i].checked){
            return sites[i].value;
        }
    }
}
</script>
</head>
<body>
<form action="#" onsubmit="window.open(whichsite(this), '_blank'); return false;">
<b>Where do you need to go?:</b>
<p>
<label><input type="radio" name="site" value="http://yahoo.com/">Yahoo</label>
<label><input type="radio" name="site" value="http://google.com/">Google</label>
<label><input type="radio" name="site" value="http://amazon.com/">Amazon</label>
<label><input type="radio" name="site" value="http://cnn.com/" checked>CNN</label>
<p>
<input type="submit" value="Submit">
</form>
</body>
</html>

Upvotes: 0

mgranjao
mgranjao

Reputation: 104

You should add the event onclick = "document.location.href='somepage.htm'" inside your input radio tag

Upvotes: 1

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

You can use JQuery like this:

$('input:radio[name="website"]').change(
    function(){
        if ($(this).is(':checked') && $(this).val() == '1') {
            window.location = "http://espn.go.com";
        }
        else if ($(this).is(':checked') && $(this).val() == '2'){
            window.location = "https://www.facebook.com";
        }
        else if ($(this).is(':checked') && $(this).val() == '3'){
            window.location = "http://www.apple.com";
        }
    });

HTML Radio Buttons

<input type="radio" name="website" id="ESPN.com" value="1">
<label for="Facebook.com">Facebook.com</label>
<input type="radio" name="website" id="Facebook.com" value="2">
<label for="Apple.com">Apple.com</label>
<input type="radio" name="website" id="Apple.com" value="3">

Upvotes: 0

Related Questions