Html form Radio button set to checked by Default Based on PHP variable

Question

I'm trying to set a radio button to be checked (or NOT checked) based on the results of a PHP variable. I want this to be done when the page is loaded so that it requires zero interaction from a user. The problem I'm having is I cannot seem to get a radio button to the checked status.

Below is some extra info

the radio button has 2 pieces. member & non-member. Based on what the user selected when they registered, my PHP variable will contain either Member or non-Member. this the data I want to use to determine which 1 of my radio buttons should be checked when the page is loaded. (AKA is variable = Member, member radio button checked = true. etc.)

Note: I have tested the PHP variable and it is holding the proper data.

Here is my html form's code:

<form name="registration" action="accountSF.php" method="post">
            <div id="leftSideForm"> <!--  Left side of the Registration Form -->

                Are you a member of an attending clubs? <br /> 
                <input type="radio" name="clubMember" id="member" value="Member" onload="return isClubMember();" onMouseDown="this._chckd = this.checked" onclick="if (this._chckd) this.checked = false;  return validateClubInfo();" />Club Member
                <input type="radio" name="clubMember" id="nonMember" value="Non-Member"  onload="return isClubMember();" onMouseDown="this._chckd = this.checked" onclick="if (this._chckd) this.checked = false; return validateClubInfo();"/>Non Member<br /> <br />       

           <button type="submit" onclick="" style="width:100px;" >Save Changes</button> 
           </div> <!-- end of Left sideform -->

</form>

Here is my JavaScript function (contained below the form):

<script type="text/javascript">

function isClubMember()
{
var IsMember = "<?php echo $U_Club_Member; ?>";

if(IsMember == "Member")
{
    document.getElementById("member").checked = true;
    document.getElementById("nonMember").checked = false;
    return true;
}
else if(IsMember == "Non-Member")
{
    document.getElementById("member").checked = false;
    document.getElementById("nonMember").checked = true;
    return true;
}
else
{
    return false;
}
}

Any help in this matter would be greatly appreciated.

Answer 1

If you can pass the PHP variables into the form's view, the code can be simplified. Instead of:

<input type="radio" name="clubMember" id="member" value="Member" onload="return isClubMember();" onMouseDown="this._chckd = this.checked" onclick="if (this._chckd) this.checked = false;  return validateClubInfo();" />Club Member

... plus a ton of Javascript, just do something like:

<input type="radio" name="clubMember" id="member" value="Member" <?= $U_Club_Member == "Member" ? 'checked' : '' ?> ... /> Club Member

You should also look at simplifying your Js. Having a bunch of onclick/onMouseDown events directly in the HTML isn't very easily readable or editable!

Instead, if you're using jQuery, you can use the events:

$('#member').on('click', function() { ... });
$('#member').on('mousedown', function() { ... });

Answer 2

You can do the automatic checking and non cheking of checkboxes using php

<input type = "checkbox" <?php if($isMember == 'Member') { echo "checked; "} ?>>

Just add attribute checked in the input You may want to refer here

Answer 3

Remove return from your onload s, and from the if s in your code (you don't have to, but they aren't necessary):

<form name="registration" action="accountSF.php" method="post">
            <div id="leftSideForm"> <!--  Left side of the Registration Form -->

                Are you a member of an attending clubs? <br /> 
                <input type="radio" name="clubMember" id="member" value="Member" onload="isClubMember();" onMouseDown="this._chckd = this.checked" onclick="if (this._chckd) this.checked = false;  return validateClubInfo();" />Club Member
                <input type="radio" name="clubMember" id="nonMember" value="Non-Member"  onload="isClubMember();" onMouseDown="this._chckd = this.checked" onclick="if (this._chckd) this.checked = false; return validateClubInfo();"/>Non Member<br /> <br />       

           <button type="submit" onclick="" style="width:100px;" >Save Changes</button> 
           </div> <!-- end of Left sideform -->

</form>

would be your new html.