javascript - Using javascript to check if a radio button is selected and return a specific answer based on the selection

Question

I am looking, in the cleanest way possible to be able to take a simple yes or no question and test for which answer has been chosen.

For instance in this case if a "yes" I want it to return a value of "Continue" into a specified area (a 3 column table which has a question in the first, the radio buttons in the second, and I want it to update and display the answer in the third).

My code for the JS stands thus far:

<script type="text/javascript">

var answer = 'place-holder';

var user_input;


function checkForm() 
{
    var substanceab = document.getElementById('Sub');
    for (i = 0; i < substanceab.length; i++)
    {
        if(substanceab.length[i].checked)
        {
            user_input = substanceab.length[i].value;
        }
    }

    if (user_input ="yes")
    {
        return answer = "Continue";
    }
    else if (user_input ="no")
    {
        return answer = "Provide Alternate Referral";
    }
    else
    {
        return;
    }   
};
function writeAns()
{
    document.getElementById('answerwrite').innerHTML = checkForm[user_input];
};

</script>

and the Body text (minus the actual question):

<table class="table table-bordered">
 <tr>
  <td width="58%"><center><strong>Required:</strong></center></td>
  <td width="19%"></td>
  <td width="23%"><center><u><strong>___________</strong></u></center></td>
  </tr>
  <tr>
   <td> <span class="sub depend"> <strong><i>_________</i> </strong></span></td>
   <td> <span class="sub depend ans">
     <form name="Substance">
      <label class="radio inline">
        <input type="radio" value="yes" name="substance" onclick="writeAns()">
          yes </label>
      <label class="radio inline">
        <input type="radio" value="no" name="substance" onclick="writeAns()">
          no </label> </form></span></td>
          <div id="answerwrite"></div>
      <script type="text/javascript">
document.write("<td>" + writeAns() + "</td>")
</script>

</tr></table>

Ok, fixed the 'funk' but like I said, more used to java than javascript, completely tougher syntax. I agree, I only used the ID thing to try and get this to work with a different method, but it never did. Now with some of the suggestions it is just giving me undefined everywhere. And while I agree this will eventually turn to jquery, I have NO clue how to work with it, hence figuring out this in javascript first.

Answer 1

A few things:

document.getElementByID() 

will always return the first element, as ID's are supposed to be unique. Instead, use:

document.getElementsByName('substance');

Next, in your loop, you are improperly referencing the array's members using the .length property. Try this instead:

    for (i = 0; i < substanceab.length; i++)
    {
        if(substanceab[i].checked)
        {
            user_input = substanceab[i].value;
        }
    }

Finally, in javascript, the '=' opertator is always an assignment statement. To do comparisons, always use '==':

    if (user_input == "yes")
    {
        return answer = "Continue";
    }
    else if (user_input =="no")
    {
        return answer = "Provide Alternate Referral";
    }
    else
    {
        return;
    }  

Also, try to avoid global variables whenever possible. Here is the working code, refactored a bit:

<input type="radio" value="no" id= "Sub" name="substance" onclick="writeAns()">

function checkForm() 
{
    var user_input;

    var substanceab = document.getElementsByName('substance');
    for (i = 0; i < substanceab.length; i++)
    {
        if(substanceab[i].checked)
        {
            user_input = substanceab[i].value;
        }
    }

    if (user_input == "yes")
    {
        return "Continue";
    }
    else if (user_input =="no")
    {
        return "Provide Alternate Referral";
    }
    else
    {
        return;
    }   
};
function writeAns()
{
    document.getElementById('answerwrite').innerHTML = checkForm();
};

Answer 2

Very easy if you are using JQuery.

Ensure your elements have the same "name" attribute and use:

var RadioGroupResult = $('input[name="MyRadioGroupNameHere"]:checked').val();

Nice and simple.