Javascript show / hide elements based on radiobutton value

garethtnash
garethtnash used Ask the Experts™
on
Hello,

Appreciate a little guidance with this please;

I have a HTML form with a radiogroup -

    <li>
      <label>
        <input type="radio" name="membertype" value="U" id="membertype_0" <%= dmxSetCheckbox("U",FormRequest("membertype")) %> <%= dmxSetRadio("U",FormRequest("membertype")) %> />
        UK</label>
      <label>
        <input type="radio" name="membertype" value="I" id="membertype_1" <%= dmxSetCheckbox("I",FormRequest("membertype")) %> <%= dmxSetRadio("I",FormRequest("membertype")) %> />
        Eire</label>
      <label>
        <input type="radio" name="membertype" value="E" id="membertype_2" <%= dmxSetCheckbox("E",FormRequest("membertype")) %> <%= dmxSetRadio("E",FormRequest("membertype")) %> />
        EU</label>
    </li>

Open in new window


And a number of elements held in different unordered lists.

initially I want the Unordered lists to be hidden (I can do this with CSS Display:none;)

but when the users selects an option from  membertype radiogroup, the associated unordered list is displayed;

So membertype 'U' results in Unordered List 1 displaying, whereas membertype 'I' OR 'E' result in Unordered List 2 displaying.

Does that make much sense?


How can i do this with JavaScript?

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Anuradha GoliSystems Development / Support Specialist

Commented:
select radio button and click button to view unordered lists

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
        function validate() {         
            var radios = document.getElementsByTagName('input');
            var value;
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].type === 'radio' && radios[i].checked) {
                    // get value, set checked flag or do whatever you need to
                    value = radios[i].value;
                    if (value == 'U') {
                        document.getElementById("ul1").style.display = "block";
                        document.getElementById("ul2").style.display = "none";
                    }
                    else {
                        document.getElementById("ul1").style.display = "none";
                        document.getElementById("ul2").style.display = "block";
                    }
                }
            }
        }            
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table>      
        <tr>
            <td>
                <ul>
                    <li>
                        <label>
                            <input type="radio" name="membertype" value="U" id="membertype_0" />
                            UK</label>
                        <label>
                            <input type="radio" name="membertype" value="I" id="membertype_1" />
                            Eire</label>
                        <label>
                            <input type="radio" name="membertype" value="E" id="membertype_2" />
                            EU</label>
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <ul id="ul1" style="display: none">
                    <li>data1</li></ul>
            </td>
        </tr>
        <tr>
            <td>
                <ul id="ul2" style="display: none">
                    <li>data2</li></ul>
                <input type="button" onclick="validate();" value="Button" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

Open in new window

check out the output below:

http://jsbin.com/ayukek/9

Source:

<html>
<head>
<title>Test</title>

<script type="text/javascript" language="javascript">

function doShow(memberType)
{
  if(memberType == "U")
  {
    document.getElementById('UnorderedList1').style.display = "block";
    document.getElementById('UnorderedList2').style.display = "none";
  }
  
  if(memberType == "I" || memberType == "E")
  {
    document.getElementById('UnorderedList1').style.display = "none";
    document.getElementById('UnorderedList2').style.display = "block";
  }
}

</script>

</head>
<body>
<li>
      <label>
        <input type="radio" name="membertype" value="U" id="membertype_0" onclick="doShow(this.value)" />
        UK</label>
      <label>
        <input type="radio" name="membertype" value="I" id="membertype_1" onclick="doShow(this.value)" />
        Eire</label>
      <label>
        <input type="radio" name="membertype" value="E" id="membertype_2" onclick="doShow(this.value)" />
        EU</label>
    </li>

<div id="UnorderedList1" style="display:none;">
  <ul><li>UnorderedList1</li></ul>
</div>

<div id="UnorderedList2" style="display:none;">
	<ul><li>UnorderedList2</li></ul>
</div>

</body>

</html>

Open in new window

Author

Commented:
HI Both,

Thanks,

But I must be missing something, I have tried both of these, but nothing changes when I click in the associated radio box?
Here's my code -

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#newpartner{
	width:762px;
	background-color:#F2F2F2;
}
#newpartner ul{
	list-style:none;
	padding:8PX;
	font-family:Arial, Helvetica, sans-serif;
	position:relative;
	float:left;
}
#newpartner li{
	margin:2px 0px;
	float:left;
}
#newpartner .membertypeli{
	width; 200px;
}
#newpartner .normalli{
	width:100%;
}
#newpartner .correctentry{
	border:solid 1px #D7D7D7;
}
#newpartner .wrongentry{
	border:none; background-color:#FFDDDD;
}
#newpartner .blocklabel{
	width:160px;
	float:left;
	display:block;
	font-size: 14px;
	font-weight: lighter;
}
#newpartner input#firstname, #newpartner input#lastname, #newpartner input#club, #newpartner input#email,#newpartner input#add1, #newpartner input#add2, #newpartner input#city, #newpartner input#county, #newpartner input#country, #newpartner input#euadd1, #newpartner input#euadd2, #newpartner input#eucity, #newpartner input#eucounty, #newpartner input#eucountry, #newpartner input#uname{
	font-size:12px;
	border:solid 1px #D7D7D7;
	margin:0px 2px 0px 0px;
	padding:4px 2px;
	width:240px;
}
#newpartner input#startdate, #newpartner input#enewsstart{
	font-size:12px;
	border:solid 1px #D7D7D7;
	margin:0px 2px 0px 0px;
	padding:4px 2px;
}
#newpartner input#postcode{
	font-size:12px;
	border:solid 1px #D7D7D7;
	margin:0px 2px 0px 0px;
	padding:4px 2px;
	width: 60px;
}
#newpartner input#pganumber, #newpartner input#exchequer, #newpartner input#pword{
	font-size:12px;
	border:solid 1px #D7D7D7;
	margin:0px 2px 0px 0px;
	padding:4px 2px;
	width: 120px;
}
#newpartner input#phone{
	font-size:12px;
	border:solid 1px #D7D7D7;
	margin:0px 2px 0px 0px;
	padding:4px 2px;
	width: 160px;
}
#newpartner select{
	font-size:12px;
	margin:0px 2px 0px 0px;
	padding:4px 2px;
	min-width:240px;}
</style>
<script type="text/javascript" language="javascript">
function doShow(memberType)
{
  if(memberType == "U")
  {
    document.getElementById('UKAdd').style.display = "block";
    document.getElementById('EUAdd').style.display = "none";
  }
  
  if(memberType == "I" || memberType == "E")
  {
    document.getElementById('UKAdd').style.display = "none";
    document.getElementById('EUAdd').style.display = "block";
  }
}
</script>

</head>

<body>
<form id="newpartner" name="newpartner" method="post">
  <ul>
    <li class="membertypeli">
      <label class="blocklabel">Member Type</label>
    </li>
    <li>
      <label>
        <input type="radio" name="membertype" value="U" id="membertype_0"  />
        UK</label>
      <label>
        <input type="radio" name="membertype" value="I" id="membertype_1"  />
        Eire</label>
      <label>
        <input type="radio" name="membertype" value="E" id="membertype_2"  />
        EU</label>
    </li>
    <li class="normalli">
      <label class="blocklabel">Account Type</label>
      <select name="accounttype" id="accounttype">
        <option value="">Select</option>

        <option  value=""></option>

      </select>
    </li>
    </ul>
    Account Detail
    <ul>
    <li class="normalli">
      <label class="blocklabel">Firstname</label>
      <input name="firstname" type="text" class="textbox" id="firstname"  value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Lastname</label>
      <input name="lastname" type="text" id="lastname" value=""  />
    </li>
    <li class="normalli">
      <label class="blocklabel">Club</label>
      <input name="club" type="text" id="club"  value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Phone Number</label>
      <input name="phone" type="text" id="phone"  value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Email (TGI)</label>
      <input name="email" type="text" id="email" value=""  />
    </li>
    <li class="normalli">
      <label class="blocklabel">PGA Number</label>
      <input name="pganumber" type="text" id="pganumber"  value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Exchequer Number</label>
      <input name="exchequer" type="text" id="exchequer"  maxlength="10" value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Retail Consultant</label>
      <select name="retailconsultant" id="retailconsultant">
        <option value="">Select</option>

        <option  value=""></option>

      </select>
    </li>
    <li class="normalli">
      <label class="blocklabel">In Receipt of Profits</label>
      <input type="checkbox" name="profits" id="profits" />
    </li>
    <li class="normalli">
      <label class="blocklabel">VAT Liable</label>
      <input type="checkbox" name="vat" id="vat" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Complete Retainer Survey</label>
      <input type="checkbox" name="retainer" id="retainer" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Start Date</label>
      <input name="startdate" type="text" id="startdate"  value="" />
    </li>
  </ul>
  <ul>
    <li class="normalli">---Club Detail</li>
    <li class="normalli">
      <label class="blocklabel">Club Type</label>
      <select name="clubtype" id="clubtype">
        <option value="">Select</option>

        <option value=""></option>

      </select>
    </li>
    <li class="normalli">
      <label class="blocklabel">Tuition Available</label>
      <input type="checkbox" name="tuition" id="tuition" />
    </li>
  </ul>
  Address Details
  <ul id="UKAdd" style="display:none;">
    <li class="normalli">----UK Address</li>
    <li class="normalli">
      <label class="blocklabel">Postcode Lookup:</label>
      <input name="postcode" type="text" id="postcode" value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">&nbsp;</label>
      Span</li>
    <li class="normalli">
      <label class="blocklabel">Add1</label>
      <input name="add1" type="text" id="add1" value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Add2</label>
      <input name="add2" type="text" id="add2" value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">City</label>
      <input name="city" type="text" id="city" value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">County</label>
      <input name="county" type="text" id="county" value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Country</label>
      <input name="country" type="text" id="country" value="" />
    </li>
  </ul>
  <ul id="EUAdd" style="display:none;">
    <li class="normalli">--- EU Address</li>
    <li class="normalli">
      <label class="blocklabel">Add1</label>
      <input name="euadd1" type="text" id="euadd1" value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Add2</label>
      <input name="euadd2" type="text" id="euadd2" value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">City</label>
      <input name="eucity" type="text" id="eucity" value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">County</label>
      <input name="eucounty" type="text" id="eucounty" value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Country</label>
      <input name="eucountry" type="text" id="eucountry" value="" />
    </li>
  </ul>
  <ul>
    <li class="normalli">Access</li>
    <li class="normalli">
      <label class="blocklabel">Username</label>
      <input name="uname" type="text" id="uname" value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Password</label>
      <input name="pword" type="text" id="pword" value="" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Enews Access</label>
      <input type="checkbox" name="enews" id="enews" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Enews Account Type</label>
      <select name="enewsaccount" id="enewsaccount">
        <option value="">Select</option>

        <option value=""></option>

      </select>
    </li>
    <li class="normalli">
      <label class="blocklabel">Enews Start Date</label>
      <input name="enewsstart" type="text" id="enewsstart" value="" />
    </li>
    <li class="normalli">
      <input type="submit" name="button" id="button" value="Submit" />
      <br />
    </li>
  </ul>


</form>

</body>
</html>

Open in new window


Appreciate your thoughts --

Thank you
Expert of the Year 2008
Top Expert 2008

Commented:
try:
give each of the lists that you want to hide an:
id="RADIO_BUTTON_VALUE"

where RADIO_BUTTON_VALUE is the actual value of each of your radio buttons -ex:
<ul id="E" style="display:none;">
<ul id="I" style="display:none;">
<ul id="U" style="display:none;">

Then try
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('input[name=membertype]').bind('click',function(){
		$('input[name=membertype]').each(function(){
			$('#'+this.value).hide(0);
		});
		$('#'+this.value).show(0);
	});
});
</script>

Open in new window

Author

Commented:
Thanks Hielo, great except both Radio Boxes E and I should allow the same unlordered list to be displayed.

Works fantastically for U though..

:)

Is there something else wrong with my code? Dreamweaver keeps lagging and dieing when opening this doc...

Thanks
Expert of the Year 2008
Top Expert 2008

Commented:
...except both Radio Boxes E and I should allow the same unordered list to be displayed.

In that case add a "class" attribute to your radio buttons that "match" the id of the lists you are targeting:
    <li>
      <label>
        <input type="radio" name="membertype" value="U" class="UKAdd" id="membertype_0"  />
        UK</label>
      <label>
        <input type="radio" name="membertype" value="I" class="EUAdd" id="membertype_1"  />
        Eire</label>
      <label>
        <input type="radio" name="membertype" value="E" class="EUAdd" id="membertype_2"  />
        EU</label>
    </li>

Open in new window


Then on the javascript I gave you instead of this.value (lines 6 and 8) use this.className

Author

Commented:
Hi Hielo,

Sorry thats not working for me, nothing changes when I click a radio box,..

:(

my code is --

<!--#include virtual="/Connections/GolfConnection.asp" -->
<!--#include virtual="/ScriptLibrary/dmxValidator.asp" -->
<%
Dim MM_editAction
MM_editAction = CStr(Request.ServerVariables("SCRIPT_NAME"))
If (Request.QueryString <> "") Then
  MM_editAction = MM_editAction & "?" & Server.HTMLEncode(Request.QueryString)
End If

' boolean to abort record edit
Dim MM_abortEdit
MM_abortEdit = false
%>
<%
' Universal Form Validator ASP 1.5.6
dim newpartner, DMX_validateAction
set newpartner = new dmxValidator
newpartner.ScriptFolder = "/ScriptLibrary"
newpartner.CSValidateOnChange = true
newpartner.CSValidateOnSubmit = true
newpartner.ReenableJavascript = false
newpartner.UseBotCheck = false
newpartner.ReportType = 1
newpartner.ErrorFont =  "Arial"
newpartner.ErrorFontSize = 11
newpartner.ErrorColor = "#D20000"
newpartner.ErrorBgColor = "#ffffff"
newpartner.ErrorBold = false
newpartner.ErrorItalic = false
newpartner.ErrorImage = ""
newpartner.ErrorFixed = "/Styles/dmxValidator/Icons/error2.png"
newpartner.ErrorPadding = 20
newpartner.BorderSize = 0
newpartner.BorderStyle = "solid"
newpartner.BorderColor = "#333"
newpartner.ReportHeaderText = "Please correct the following errors and re-submit the form"
newpartner.ReportFooterText = ""
newpartner.ReportListStyle = 0
newpartner.CssHintFile = "validatorHint1"
newpartner.HintPreset = "blue.txt"
newpartner.HintTooltipPosition = "top"
newpartner.HintBorderColor = "#0099ff"
newpartner.HintBorderStyle = "solid"
newpartner.HintBgColor = "#003399"
newpartner.HintTextColor = "#ffffff"
newpartner.HintTextFont = "Arial"
newpartner.HintTextSize = 12
newpartner.HintTextBold = false
newpartner.HintTextItalic = false
newpartner.HintBoxWidth = 200
newpartner.HintImage = ""
newpartner.HintFixed = "/Styles/dmxValidator/Icons/info4.png"
newpartner.HintPadding = 26
newpartner.UseCustomFocusClass = "custom"
newpartner.CustomFocusClass = "correctentry"
newpartner.UseCustomValidClass = "custom"
newpartner.CustomValidClass = "correctentry"
newpartner.UseCustomInvalidClass = "custom"
newpartner.CustomInvalidClass = "wrongentry"
newpartner.AddRule "newpartner", "membertype", "allformats", ",,", "true", "", "", "", ""
newpartner.AddRule "newpartner", "firstname", "letterscond", "true,,", "true", "Firstname is required", "", "", ""
newpartner.AddRule "newpartner", "lastname", "letterscond", "true,,", "true", "", "", "", ""
newpartner.AddRule "newpartner", "club", "letterscond", "true,,", "true", "", "", "", ""
newpartner.AddRule "newpartner", "phone", "numbercond", ",,", "true", "", "", "", ""
newpartner.AddRule "newpartner", "email", "emailcond", ",,", "true", "", "", "", ""
newpartner.AddRule "newpartner", "pganumber", "allformats", ",membertype,== U", "false", "", "", "1", "pganumber"
newpartner.AddRule "newpartner", "postcode", "allformats", ",membertype,== U", "true", "", "", "1", "postcode"
newpartner.AddRule "newpartner", "add1", "allformats", ",membertype,== U", "true", "", "", "", ""
newpartner.AddRule "newpartner", "add2", "allformats", ",membertype,== U", "false", "", "", "0", ""
newpartner.AddRule "newpartner", "city", "allformats", ",membertype,== U", "true", "", "", "", ""
newpartner.AddRule "newpartner", "county", "allformats", ",membertype,== U", "true", "", "", "", ""
newpartner.AddRule "newpartner", "county", "allformats", ",membertype,== U", "true", "", "", "", ""
newpartner.AddRule "newpartner", "country", "allformats", ",membertype,== U", "true", "", "", "", ""
newpartner.AddRule "newpartner", "euadd1", "allformats", ",membertype,!= U", "true", "", "", "0", ""
newpartner.AddRule "newpartner", "euadd2", "allformats", ",membertype,!= U", "false", "", "", "0", ""
newpartner.AddRule "newpartner", "eucity", "allformats", ",membertype,!= U", "true", "", "", "0", ""
newpartner.AddRule "newpartner", "eucounty", "allformats", ",membertype,!= U", "true", "", "", "0", ""
newpartner.AddRule "newpartner", "eucountry", "allformats", ",membertype,!= U", "true", "", "", "0", ""
newpartner.AddRule "newpartner", "uname", "allformats", ",,", "true", "", "", "", ""
newpartner.AddRule "newpartner", "pword", "allformats", ",,", "true", "", "", "", ""
newpartner.AddRule "newpartner", "enewsstart", "datecond", ",enews,== Y", "true", "", "", "1", "enewsstart"
newpartner.AddRule "newpartner", "accounttype", "numbercond", ",,", "true", "", "", "", ""
newpartner.AddHint "newpartner", "firstname", "Please enter the first name of the Club Professional - Regardless of Account Type"
newpartner.AddHint "newpartner", "lastname", "Please enter the last name of the Club Professional - Regardless of Account Type"
newpartner.Validate
%>
<%
Dim RSAccountType
Dim RSAccountType_cmd
Dim RSAccountType_numRows

Set RSAccountType_cmd = Server.CreateObject ("ADODB.Command")
RSAccountType_cmd.ActiveConnection = MM_GolfConnection_STRING
RSAccountType_cmd.CommandText = "SELECT ID, Type FROM dbo.[Member-Account-Type] Where ID <> 8" 
RSAccountType_cmd.Prepared = true

Set RSAccountType = RSAccountType_cmd.Execute
RSAccountType_numRows = 0
%>
<%
Dim RSRetailCon
Dim RSRetailCon_cmd
Dim RSRetailCon_numRows

Set RSRetailCon_cmd = Server.CreateObject ("ADODB.Command")
RSRetailCon_cmd.ActiveConnection = MM_GolfConnection_STRING
RSRetailCon_cmd.CommandText = "select A.ID ID, M.FirstName + ' ' + M.LastName Name from dbo.admin A inner join dbo.Member M on A.MID = M.ID Where A.RDA = 'Y' Order By Name asc" 
RSRetailCon_cmd.Prepared = true

Set RSRetailCon = RSRetailCon_cmd.Execute
RSRetailCon_numRows = 0
%>
<%
Dim RSClubType
Dim RSClubType_cmd
Dim RSClubType_numRows

Set RSClubType_cmd = Server.CreateObject ("ADODB.Command")
RSClubType_cmd.ActiveConnection = MM_GolfConnection_STRING
RSClubType_cmd.CommandText = "SELECT [ID]       ,[Type-Short]   FROM [dbo].[Club-Course-Type]" 
RSClubType_cmd.Prepared = true

Set RSClubType = RSClubType_cmd.Execute
RSClubType_numRows = 0
%>
<%
Dim RSEnews
Dim RSEnews_cmd
Dim RSEnews_numRows

Set RSEnews_cmd = Server.CreateObject ("ADODB.Command")
RSEnews_cmd.ActiveConnection = MM_GolfConnection_STRING
RSEnews_cmd.CommandText = "SELECT [ID]       ,[Name]   FROM [dbo].[EnewsPackage]" 
RSEnews_cmd.Prepared = true

Set RSEnews = RSEnews_cmd.Execute
RSEnews_numRows = 0
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="/Styles/dmxValidator/validatorHint1.css" type="text/css" />
<link rel="stylesheet" href="/Styles/dmxValidator/validatorError1.css" type="text/css" />
<script type="text/javascript" src="/ScriptLibrary/jsvat.js"></script>
<script type="text/javascript" src="/ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="/ScriptLibrary/jquery.inputHintBox.js"></script>
<script type="text/javascript" src="/ScriptLibrary/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript" src="/ScriptLibrary/jquery.validate.min.js"></script>
<script type="text/javascript" src="/ScriptLibrary/dmx.jquery.validate.js"></script>
<script type="text/javascript" src="/ScriptLibrary/jquery.tooltip.min.js"></script>
<script type="text/javascript" src="/ScriptLibrary/jquery.hoverIntent.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('input[name=membertype]').bind('click',function(){
		$('input[name=membertype]').each(function(){
			$('#'+this.value).hide(0);
		});
		$('#'+this.value).show(0);
	});
});
</script>
<style type="text/css">
.UKAdd{
}
.EUAdd{
}
</style>
</head>
<% 
' dmxValidatorJSStart
newpartner.GenerateJavascriptAndCss
' dmxValidatorJSEnd
%>
<body>
<form id="newpartner" name="newpartner" method="post" action="">
  <ul>
    <li class="membertypeli">
      <label class="blocklabel">Member Type</label>
    </li>
    <li>
      <label>
        <input name="membertype" type="radio" class="UKAdd" id="membertype_0" value="U" <%= dmxSetCheckbox("U",FormRequest("membertype")) %> <%= dmxSetRadio("U",FormRequest("membertype")) %> />
        UK</label>
      <label>
        <input name="membertype" type="radio" class="EUAdd" id="membertype_1" value="I" <%= dmxSetCheckbox("I",FormRequest("membertype")) %> <%= dmxSetRadio("I",FormRequest("membertype")) %> />
        Eire</label>
      <label>
        <input name="membertype" type="radio" class="EUAdd" id="membertype_2" value="E" <%= dmxSetCheckbox("E",FormRequest("membertype")) %> <%= dmxSetRadio("E",FormRequest("membertype")) %> />
        EU</label>
    </li>
    <li class="normalli">
      <label class="blocklabel">Account Type</label>
      <select name="accounttype" id="accounttype">
        <option value="">Select</option>
        <%
While (NOT RSAccountType.EOF)
%>
        <option <%= dmxSetSelectOption((RSAccountType.Fields.Item("ID").Value),FormRequest("accounttype"),false) %> value="<%=(RSAccountType.Fields.Item("ID").Value)%>"><%=(RSAccountType.Fields.Item("Type").Value)%></option>
        <%
  RSAccountType.MoveNext()
Wend
If (RSAccountType.CursorType > 0) Then
  RSAccountType.MoveFirst
Else
  RSAccountType.Requery
End If
%>
      </select>
    </li>
    </ul>
    <ul>
    <li class="normalli">
      <label class="blocklabel">Firstname</label>
      <input name="firstname" type="text" class="textbox" id="firstname" value="<%= dmxSetValue("", FormRequest("firstname")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Lastname</label>
      <input name="lastname" type="text" id="lastname" value="<%= dmxSetValue("", FormRequest("lastname")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Club</label>
      <input name="club" type="text" id="club" value="<%= dmxSetValue("", FormRequest("club")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Phone Number</label>
      <input name="phone" type="text" id="phone" value="<%= dmxSetValue("", FormRequest("phone")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Email (TGI)</label>
      <input name="email" type="text" id="email" value="<%= dmxSetValue("", FormRequest("email")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">PGA Number</label>
      <input name="pganumber" type="text" id="pganumber" value="<%= dmxSetValue("", FormRequest("pganumber")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Exchequer Number</label>
      <input name="exchequer" type="text" id="exchequer" value="<%= dmxSetValue("", FormRequest("exchequer")) %>" maxlength="10" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Retail Consultant</label>
      <select name="retailconsultant" id="retailconsultant">
        <option value="">Select</option>
        <%
While (NOT RSRetailCon.EOF)
%>
        <option <%= dmxSetSelectOption((RSRetailCon.Fields.Item("ID").Value),FormRequest("retailconsultant"),false) %> value="<%=(RSRetailCon.Fields.Item("ID").Value)%>"><%=(RSRetailCon.Fields.Item("Name").Value)%></option>
<%
  RSRetailCon.MoveNext()
Wend
If (RSRetailCon.CursorType > 0) Then
  RSRetailCon.MoveFirst
Else
  RSRetailCon.Requery
End If
%>
      </select>
    </li>
    <li class="normalli">
      <label class="blocklabel">In Receipt of Profits</label>
      <input type="checkbox" name="profits" id="profits" />
    </li>
    <li class="normalli">
      <label class="blocklabel">VAT Liable</label>
      <input type="checkbox" name="vat" id="vat" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Complete Retainer Survey</label>
      <input type="checkbox" name="retainer" id="retainer" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Start Date</label>
      <input name="startdate" type="text" id="startdate" value="<%= dmxSetValue("", FormRequest("startdate")) %>" />
    </li>
  </ul>
  <ul>
    <li class="normalli">---Club Detail</li>
    <li class="normalli">
      <label class="blocklabel">Club Type</label>
      <select name="clubtype" id="clubtype">
        <option value="">Select</option>
        <%
While (NOT RSClubType.EOF)
%>
        <option <%= dmxSetSelectOption((RSClubType.Fields.Item("ID").Value),FormRequest("clubtype"),false) %> value="<%=(RSClubType.Fields.Item("ID").Value)%>"><%=(RSClubType.Fields.Item("Type-Short").Value)%></option>
<%
  RSClubType.MoveNext()
Wend
If (RSClubType.CursorType > 0) Then
  RSClubType.MoveFirst
Else
  RSClubType.Requery
End If
%>
      </select>
    </li>
    <li class="normalli">
      <label class="blocklabel">Tuition Available</label>
      <input type="checkbox" name="tuition" id="tuition" />
    </li>
  </ul>
  <ul id="UKAdd" style="display:none;">
    <li class="normalli">----UK Address</li>
    <li class="normalli">
      <label class="blocklabel">Postcode Lookup:</label>
      <input name="postcode" type="text" id="postcode" value="<%= dmxSetValue("", FormRequest("postcode")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">&nbsp;</label>
      Span</li>
    <li class="normalli">
      <label class="blocklabel">Add1</label>
      <input name="add1" type="text" id="add1" value="<%= dmxSetValue("", FormRequest("add1")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Add2</label>
      <input name="add2" type="text" id="add2" value="<%= dmxSetValue("", FormRequest("add2")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">City</label>
      <input name="city" type="text" id="city" value="<%= dmxSetValue("", FormRequest("city")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">County</label>
      <input name="county" type="text" id="county" value="<%= dmxSetValue("", FormRequest("county")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Country</label>
      <input name="country" type="text" id="country" value="<%= dmxSetValue("", FormRequest("country")) %>" />
    </li>
  </ul>
  <ul id="EUAdd" style="display:none;">
    <li class="normalli">--- EU Address</li>
    <li class="normalli">
      <label class="blocklabel">Add1</label>
      <input name="euadd1" type="text" id="euadd1" value="<%= dmxSetValue("", FormRequest("euadd1")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Add2</label>
      <input name="euadd2" type="text" id="euadd2" value="<%= dmxSetValue("", FormRequest("euadd2")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">City</label>
      <input name="eucity" type="text" id="eucity" value="<%= dmxSetValue("", FormRequest("eucity")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">County</label>
      <input name="eucounty" type="text" id="eucounty" value="<%= dmxSetValue("", FormRequest("eucounty")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Country</label>
      <input name="eucountry" type="text" id="eucountry" value="<%= dmxSetValue("", FormRequest("eucountry")) %>" />
    </li>
  </ul>
  <ul>
    <li class="normalli">MYTGI Access</li>
    <li class="normalli">
      <label class="blocklabel">Username</label>
      <input name="uname" type="text" id="uname" value="<%= dmxSetValue("", FormRequest("uname")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Password</label>
      <input name="pword" type="text" id="pword" value="<%= dmxSetValue("", FormRequest("pword")) %>" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Enews Access</label>
      <input type="checkbox" name="enews" id="enews" />
    </li>
    <li class="normalli">
      <label class="blocklabel">Enews Account Type</label>
      <select name="enewsaccount" id="enewsaccount">
        <option value="">Select</option>
        <%
While (NOT RSEnews.EOF)
%>
        <option <%= dmxSetSelectOption((RSEnews.Fields.Item("ID").Value),FormRequest("enewsaccount"),false) %> value="<%=(RSEnews.Fields.Item("ID").Value)%>"><%=(RSEnews.Fields.Item("Name").Value)%></option>
<%
  RSEnews.MoveNext()
Wend
If (RSEnews.CursorType > 0) Then
  RSEnews.MoveFirst
Else
  RSEnews.Requery
End If
%>
      </select>
    </li>
    <li class="normalli">
      <label class="blocklabel">Enews Start Date</label>
      <input name="enewsstart" type="text" id="enewsstart" value="<%= dmxSetValue("", FormRequest("enewsstart")) %>" />
    </li>
    <li class="normalli">
      <input type="submit" name="button" id="button" value="Submit" />
      <br />
    </li>
  </ul>
  <% newpartner.ShowBotCheckError() %>
</form>
<%= newpartner.ErrorReport("newpartner") %>
</body>
</html>
<%
RSAccountType.Close()
Set RSAccountType = Nothing
%>
<%
RSRetailCon.Close()
Set RSRetailCon = Nothing
%>
<%
RSClubType.Close()
Set RSClubType = Nothing
%>
<%
RSEnews.Close()
Set RSEnews = Nothing
%>

Open in new window


Thank you
Expert of the Year 2008
Top Expert 2008
Commented:
On your code:
a.)  get rid of line 54 - you are already "importing" the jquery library on line 147.
b.) as I indicated earlier, you need to change this.value to this.className (on lines  159 and 161).

Author

Commented:
Thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial