CODEWITHSUNDEEP
radio-button
John Doe
John Doe

Reputation: 2060

Getting Radio button selection

NO JQUERY! When the user selects Have a Baby or Military leave radio buttons pop up. I am having trouble getting the values of the selected buttons and changing the innerHTML with id="choice" to the value. Can someone please help??

http://jsfiddle.net/73Vq9/

<html>
<head>
<script>
//this function deals with changing the event
function changeMessage(oElement) {
    //have a baby
    if (oElement.value == "100") {
        document.getElementById("btn").style.display = "none";
        document.getElementById("radio").style.display = "inline-block";
        document.getElementById("rd1").innerHTML = "C-Section";
        document.getElementById("rd2").innerHTML = "Regular Birth";
        document.getElementById("rd1").value = "C-Section";
        document.getElementById("rd2").value = "Regular Birth";
    //military leave
    } else if (oElement.value == "15") {
        document.getElementById("btn").style.display = "none";
        document.getElementById("radio").style.display = "inline-block";
        document.getElementById("rd1").innerHTML = "Training";
        document.getElementById("rd2").innerHTML = "Active Duty";
        document.getElementById("rd1").value = "Training";
        document.getElementById("rd2").value = "Active Duty";
    //no value, the first, blanck value
    } else if (oElement.value == "0") {
        document.getElementById("btn").style.display = "none";
        document.getElementById("radio").style.display = "none";

    } else {
        document.getElementById("btn").style.display = "inline-block";
        document.getElementById("radio").style.display = "none";
    }
    return;
}
</script>
</head>
<body>


<div style="margin-left:250px;">
<select id="leave" onchange="changeMessage(this);">
  <option value="0"></option>
  <option value="5">Get Married</option>
  <option value="100">Have a Baby</option>
  <option value="90">Adopt a Child</option>
  <option value="35">Retire</option>
  <option value="15">Military Leave</option>
  <option value="25">Medical Leave</option>
</select>
 <button id="btn" style="display:none" onclick="getInfo()"type="button">Process</button>
</div>
<div id="radio" style="display:none">
    <div id="rd1"></div><input type="radio" name="sex" value="" />
    <div id="rd2"></div><input type="radio" name="sex" value=""/>
</div>
    <div id="choice">Radio Choice</div>

Upvotes: 0

Views: 2209

Answers (1)

andyb
andyb

Reputation: 43823

Your input values are never set so will always be null.

When you changed your code in your previous question https://stackoverflow.com/questions/12091968/javascript-function-not-changing-input-types you moved the id from the input to a <div> so your JavaScript is no longer setting the input's value.

You need to change the JavaScript to set the input correctly and then something like:

HTML

<input type="radio" name="sex" value="" onclick="showChoice(this)"/>

JavaScript

function showChoice(input) {
    document.getElementById('choice').innerHTML = "Radio Choice=" + input.value;
}

should append the selected input's value in the <div id="choice">

Upvotes: 2

Related Questions