CODEWITHSUNDEEP
javascripthtml
NateDM
NateDM

Reputation: 31

Javascript Radio Buttons Functionality bug

I'm try to do a couple things with some radio buttons from my form, and I'm having a lot trouble. there are two radio buttons right now, that work together. I want to have 3 scenarios for my form.

  1. neither of the radio buttons are checked, Hide or disable 2 other elements. (text box and dropdown list)
  2. The first radio button is checked, hide or disable 1 element.
  3. The second radio button is checked, hide or disable 1 element.

in all 3 scenarios I need my form to return values from the user, whether its nothing, or the radio button check and the element that is available with that radio button. Also please keep in mind the form will contain other radio buttons later on that will be separate from these. I would also Like to mention I want to keep this in plain JavaScript if possible.

Currently I'm trying to use .disable and .checked, with not luck. Could anyone please help me figure this out. Please include a explanation of your answer if possible so I can understand it.

Here is my forms code :

<input type="radio" name="clubMember" id="member" value="Member" />Club Member 
<input type="radio" name="clubMember" id="nonmember"value="nonMember" />Non Member <br /> <br />

Select your Club.
<select name="clubList">
<option value="clubA">Club A</option> 
<option value="clubB">Club H</option>
</select><br />

<!-- OR -->
Are you from another club, or a guest? <br />
<textarea rows="5" cols="25" name="nonClubInfo">Briefly explain here </textarea>

<button type="submit" onclick="return validateRegistrationForm()" >Register</button>

Here is the code for my script :

function validateClubInfo()
{
    if(document.getElementById("member").checked == false && document.getElementById("nonMember").checked == false)
    {
        document.getElementById("clubList").disabled = true;
        document.getElementById("nonClubInfo").disabled = true;
        alert("this is a test");
        return true;
    }
    else if(document.getElementById("member").checked == true)
    {
        document.getElementById("nonClubInfo").disabled = true;
        return true
    }
    else if(document.getElementById("nonMember").checked == true)
    {
        document.getElementById("clubList").disabled = true;
        return true;
    }
}

I should also note Validation gets checked through a second function, I left it out because it is a very long function and it has nothing to do with this problem.

At any rate any help on this matter would be greatly appreciated.

Upvotes: 0

Views: 398

Answers (2)

MG_Bautista
MG_Bautista

Reputation: 2653

Use this...

<input type="radio" name="clubMember" id="member" value="Member" />Club Member 
<input type="radio" name="clubMember" id="nonmember"value="nonMember" />Non Member <br /> <br />

Select your Club.
<select name="clubList" id="clubList">
<option value="clubA">Club A</option> 
<option value="clubB">Club H</option>
</select><br />

<!-- OR -->
Are you from another club, or a guest? <br />
<textarea rows="5" cols="25" name="nonClubInfo" id="nonClubInfo">Briefly explain here </textarea>

<input type="button" onclick="validateRegistrationForm();" value="Register"/>

An the js:

function validateRegistrationForm() {
    if(document.getElementById("member").checked == false && document.getElementById("nonmember").checked == false)
    {
        document.getElementById("clubList").disabled = true;
        document.getElementById("nonClubInfo").disabled = true;
        alert("this is a test");
        return true;
    }
    else if(document.getElementById("member").checked)
    {
        alert(document.getElementById("member").checked);
        document.getElementById("nonClubInfo").disabled = true;
        return true
    }
    else if(document.getElementById("nonmember").checked == true)
    {
        alert(document.getElementById("member").checked);
        document.getElementByName("clubList").disabled = true;
        return true;
    }
}

See this DEMO

Upvotes: 1

Brian Geihsler
Brian Geihsler

Reputation: 2087

It looks like the problem is you're using document.getElementById to find the select/textarea, but you haven't assigned ids to those elements. Try adding an id to those like this:

<select name="clubList" id="clubList>
    <option value="clubA">Club A</option> 
    <option value="clubB">Club H</option>
</select><br />

Upvotes: 2

Related Questions