CODEWITHSUNDEEP
javascript
N00bie-Sam
N00bie-Sam

Reputation: 15

the heck of me... I still can't get the value of radio button to display - Javascript dom

I still can't get the value of the radio button to display on the 2nd html summary page. I've researched and researched and changed the javascript function but have no even come close. What is the answer to make it work. I need someone to change my code and I can see where I went wrong :(

The form:

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form method="get" action="summary.html">

            <label for="firstname">First Name:</label><input id="firstname" name="firstname" type="text" autofocus placeholder="John" required="required" maxlength="15" />
            <br>
            <label for="surname">Surname:</label><input id="surname" name="surname" type="text" placeholder="Smith" required="required" maxlength="30" />
            <br>
            <br>           
            <input type="radio" name="gender" value="male" id="radio1"/><label for="male">Male</label>
            <input type="radio" name="gender" value="female" id="radio2" checked="checked"/><label for="female">Female</label>         
            <br>
            <input id="submit" type="submit" value="Register" />
            <br>    
        </form>
    </body>
    </html>

The Summary Answers;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="JavaScript.js"></script>
</head>
<body>
    <table>
        <tr>         
            <td id="firstname" /></td>
        </tr>
        <tr>
            <td id="surname" /></td>
        </tr>      
        <tr>
            <td id="gender" /></td>
        </tr>
    </table>
</body>
</html>

The js. 

    window.onload = function () {
   "use strict";

   var url = new URL(window.location.href);

   var firstname = url.searchParams.get("firstname"); document.getElementById("firstname").innerText = firstname;

    var surname = url.searchParams.get("surname"); document.getElementById("surname").innerText = surname;

    //var radios = document.getElementsByName('gender');
    //for (var i = 0, length = radios.length; i < length; i++) {
       // if (radios[i].checked) {
            //innerText = radios;               
          //  break;
      ///  }
    //}

};

added the last thing I tried as comments.

Upvotes: 0

Views: 21

Answers (1)

eheisler
eheisler

Reputation: 124

Your radio input follows the same pattern as your other inputs, so looks like you are just not collecting it.

  var gender = url.searchParams.get('gender');
  document.getElementById('gender').innerText = gender;

Upvotes: 1

Related Questions