Html form Radio button set to checked by Default Based on PHP variable
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.
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() { ... });
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
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.
链接地址: http://www.djcxy.com/p/56054.html