JavaScript event handling in a radio button event handling for radio button in javascript,event handling on

I want to display a hidden field when I make a particular selection using the radio button. Currently I have wriiten the code with onClick. But somehow it doesnt seem to be working for me.

   <td height = 20 valign = middle align = right width = 40%>Is the account enrolled for any checking package?</td>
   <td height = 20 valign = middle align = left width = 60%><input type = "radio" class="text1" name ="accEnrol" id ="accEnrolY" value = "Yes" onClick="accEnrol();">Yes <input type ="radio" class ="text1" name ="accEnrol" id ="accEnrolN" value ="No" onClick="accEnrol();"></input></td>

function accEnrol()
{
  if(document.getElementById('accEnrolY').checked)
{
  document.getElementById('packages').style.visibility='visible';
}
else
{
  document.getElementById('packages').style.visibility='hidden';
}

The strangest part is I have a similar piece of code for another radio button in the same file and that seems to be working without a hitch whereas this is not displaying the desired result. I cant seem to find where I am making the mistake.

The full jsp code is as follows: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ``<html> ``<head> <title>E-Form </title> <script type="text/javascript">

</script> ``<SCRIPT language="JavaScript" src="/Eform/JS/common.js"></SCRIPT>

<link target='_blank' href='/Eform/CSS/common.css' rel="stylesheet" type="text/css">

<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> ``<META HTTP-EQUIV="Expires" CONTENT="-1"> ``</head> <body

> `` <form action="/Eform/SendMail" method="post" enctype="multipart/form-data" id='Eform' name='Eform'> <table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center" ``class="text1">
<tr> <td valign="middle"> <table width="100%" border="0" cellpadding="0" cellspacing="0" ``bgcolor="#FFFFFF" align="center" class="commonText1">

                `<tr>`
                    `<td height="20" valign="middle" ``align="right" width="40%">Account(Existing Customers) or Projected Monthly Balance(New Customers)``* :&nbsp;</td>`
                    `<td height="20" valign="middle" ``align="left" width="60%"> `
                        `<select tabindex="0" ``name="accOrBalType" id="accOrBalType" onchange="doClear();" class="text1">`
                            `<option selected` `value="">-- Select One & Enter a value in to text box below --</option>`
                            `<option ``value="1">Account(Existing Customers)</option>`
                            `<option ` `value="2">Projected Monthly Balance(New Customers)</option>`    
                        `</select>  `   
                    `</td>`
                `</tr>`
                `<tr id = "accountNumber" style = "visibility:hidden">`
                    `<td height="20" valign="middle" ``align="right" width="40%">Account Number* :</td>`
                    `<td height="20" valign="middle" ``align="left" width="60%"> <input type="text" class="text1" maxlength="20" name="accountNumber" size="20" ``onblur="selectFirst();" /></td> `
                `</tr>`
                `<tr id = "monthlyBalance" style `= "visibility:hidden">`
                    <td height="20" valign="middle"` `align="right" width="40%">Projected Monthly Balance* :</td>`
                    <td height="20" valign="middle" ``align="left" width="60%"> <input type="text" class="text1" maxlength="20" name="monthlyBalance"  size="20" ``onblur="selectFirst();" /></td> `
                `</tr>
                `<tr id = "accEnrol" style = "visibility:hidden">`
                    `<td height="20" valign="middle" ``align="right" width="40%">Is the account already enrolled in a checking package or program?* :&nbsp;</td>`
                    <`td height="20" valign="middle" ``align="left" width="60%"> <input type="radio" class="text1" name="accEnrol" id="accEnrolY" value="Yes" ``onclick="packageName();"> Yes &nbsp;&nbsp; <input type="radio" class="text1" name="enrol" id="accEnrolN" ``value="No" onclick="packageName();"> No</td> `
                `</tr>`
                `<tr id = "packages" style = "visibility:hidden">`
                    `<td height="20" valign="middle" ``align="right" width="40%">Package Name* :&nbsp;</td>`
                    `<td height="20" valign="middle" ``align="left" width="60%"><input type="text" maxlength="100" class="text1" name="packages" size="50"/></td>`
                `</tr>`
                `<tr>`
                    `<td height="20" valign="middle" ``align="right" width="40%">Enrolled in Business Online* :&nbsp;</td>`
                    <td height="20" valign="middle" ``align="left" width="60%"> <input type="radio" class="text1" name="enrol" value="Yes"> Yes &nbsp;&nbsp; `<input `type="radio" class="text1" name="enrol" value="No"> No</td> `
                `</tr>`
                                `<tr>`
                    `<td height="20" valign="middle" ``align="right" width="40%">Business Contact's First Name* :&nbsp;</td>`
                    `<td height="20" valign="middle" ``align="left" width="60%"><input type="text" maxlength="15" class="text1" name="fName" id="fName" ``size="20" /></td>`
                `</tr>`
                `<tr>`
                    `<td height="20" valign="middle" ``align="right" width="40%">Business Contact's Last Name* :&nbsp;</td>`
                    `<td height="20" valign="middle"` `align="left" width="60%"><input type="text" maxlength="15" class="text1" name="lName" id="lName"` `size="20"/></td>`
                `</tr>`
                                                                            `<tr>`
                    `<td height="20" valign="middle" ``align="right" width="40%">Telephone* :&nbsp;</td>`
                    <`td height="20" valign="middle"` `align="left" width="60%">`
                    `<input type="text" value=" +1-" size="1" ``readonly/>&nbsp;`
                        `<input type="text" ``maxlength="10" name="refTelephoneNo" id="refTelephoneNo" class="text1" size="11" />`
                    `</td>`
                `</tr>`
                `<tr>`
                    `<td height="20" valign="middle" ``align="right" width="40%">Branch* :&nbsp;</td>`
                    `<td height="20" valign="middle" ``align="left" width="60%"><input type="text" class="text1" maxlength="80" name="branch" id="branch" ``size="20" /></td>`
                `</tr>`
                `<!--tr>`
                    `<td height="20" valign="middle" ``align="right" width="40%">To mail Ids(semicolon separated)*</td>`
                    `<td height="20" valign="middle" ``align="left" width="60%"> <input type="text" class="text1" name="toList" id="toList" size="20" /></td>` 
                `</tr-->`
                `<tr>`
                    `<td height="10" align="center" ``width="40%"></td>`
                    <td height="10" align="center" `width="60%"></td> `
                `</tr>`
                `<tr>`
                    `<td align="right" width="40%">`
                        `<table border="0" ``cellspacing="0" cellpadding="0" width="100%">`
                            `<tr>`
                                `<td ``width="92%" height="5" align="right">`
                                    `<a target="_self" target='_blank' href="#" onclick="validateData('mail');" class="tryitbtn">Send Mail</a>`

                                `</td>`
                                `<td ``width="8%" height="5" align="left">`
                                    `<a target="_self" target='_blank' href="#" onclick="fnReset(document.forms[0]);" class="tryitbtn">Clear</a>`
                                `</td>`
                            <`/tr>`
                        `</table>`
                    `</td>`
                    `<td height="10" align="left" width="60%">`
                    `<a target="_self" target='_blank' href="#"` `onclick="validateData('preview');" class="tryitbtn">Preview</a>`
                    `</td> `
                `</tr>`
                `<tr>`
                    `<td height="10" align="center" ``width="40%"></td>`
                    `<td height="10" align="center" ``width="60%"></td> `
                `</tr>`

                `<tr>`
                    `<td height="10" align="center" width="40%">`
                        `<b>*</b> <FONT` `size="1">Indicates Mandatory Fields.</FONT></td>`
                    `<td height="10" align="center"` `width="60%"></td>` 
                `</tr>`
            `</table>`
        `</td>`
    `</tr>`
`</table>`
`</form>`

</body> </html>

Answer:1

Here is the slight modification of the OP's code.

<!--ADD THIS IN THE CODE-->
<div id='packages'>
enter your codes here
</div>

<td height = 20 valign = middle align = right width = 40%>
    Is the account enrolled for any checking package?
</td>
<td height = 20 valign = middle align = left width = 60%>
    <input type = "radio" class="text1" name ="accEnrol" id ="accEnrolY" value = "Yes" onClick="accEnrol();">Yes</input> 
    <input type ="radio" class ="text1" name ="accEnrol" id ="accEnrolN" value ="No" onClick="accEnrol();">No </input>
</td>
<script type="text/javascript">
function accEnrol(){
    if(document.getElementById('accEnrolY').checked){
        document.getElementById('packages').style.visibility='visible';
        alert ("checked");
    }
    else{
        document.getElementById('packages').style.visibility='hidden';
        alert ("unchecked");
    }
}    //This is the part you were missing.
</script>

I have added the alert messages to check if you are getting the desired output.

Here are the snap shots of the above codes
These are the codes in netbeans. Initial display when you get to the page
This is the initial display when you get to that page

Display when clicked on No

The alert appears when you clicked no and hides the contents of the container with id='packages' The alert with 'checked' message appears when you click on yes and the contents of the container with id='packages' are displayed again

I do not understand why it is not working for you. I would be helpful if you could post the actual codes where you have those id='packages' set up. The only reason I could think of is the issue of duplicate ids. If you have two ids with the same name under the same scope then the javascript will not recognize which one to pull from.

Answer:2

How do you automatically Login to OWA 2013 using HTML + JavaScript

We used to use Exchange 2007 and the HTML + JavaScript below to log into OWA 2007 automatically. But we've now upgraded to Exchange 2013 and the script no longer works. It displays 404 - File or ...

Some users can't connect to websocket

I am using socket.io.Some users sending message to me 'I can't send a message why ?'.I researched this problem,guess firewall or antivirus blocking websocket.If browser doesn't support the websocket,...

some users cannot access website
some users cannot access network share
some users cannot access dfs share
some users can't print
some users cannot access sharepoint site
some users cannot access owa
some users cannot rdp
some users cannot access internet
sharepoint some users cannot search
some users cannot print to network printer
exchange 2010 some users cannot connect
some users cannot connect to activesync
some tobacco users develop cancer
some users cannot log in

JavaScript listen for _gaq.push?

I've got a widget that injects javascript code into my users website. Now I would like to add the ability to listen for the Google Analytics _addTrans call. Example of the call to Google Analytics: &...

Using underscore.js “debounce” function with typescript

The basic idea is to prevent double clicks. I'm using html <button> to call a function when clicked, which makes an ajax call. Native <button> behaviour is prevented with event....

using underscore debounce