How to show a paragraph if a check box is ticked

[kevinkhan]

Ok i have this code that makes paragraphs visable and invisable depending on which radio button is checked. This is fine when first coming to the page. When i fill in all form fields and save to the db this is fine. When i want to retrieve the data and display it in the webpage if checks the checkbox but the paragraph that is associated with the check box this it is clicked even tho it is already checked.

Here is the code i am working with

PHP Code:

window.onload=function() {

         document.getElementById('companyName').style.display = "none";
       document.getElementById('dateOfBirth').style.display = "none";


  // next, attach the click event handler to the radio buttons
  var radios = document.forms[0].elements["typeOfCustomer"];
  for (var i = [0]; i < radios.length; i++)
    radios[i].onclick=radioClicked;
}

function radioClicked() {
//alert(this.value);
  // find out which radio button was clicked and
  // disable/enable appropriate input elements
  switch(this.value) {
    case "Private" :
       document.getElementById('companyName').style.display = "none";
       document.getElementById('dateOfBirth').style.display = "none";
       break;
    case "Corporate" :
       document.getElementById('companyName').style.display = "block";
       document.getElementById('dateOfBirth').style.display = "none";
       break;
    case "DJ" :
       document.getElementById('companyName').style.display = "none";
       document.getElementById('dateOfBirth').style.display = "block";
       break;
  }

} 


PHP Code:

<label>Type of Customer:</label>
                    <input type="radio" id="typeOfCustomer" name="typeOfCustomer" value="Private" 
                    <?php if($typeOfCustomer == 'Private') echo "checked" ?>/>Private 
                    <input type="radio" id="typeOfCustomer" name="typeOfCustomer" value="Corporate" <?php if($typeOfCustomer == 'Corporate') echo "checked" ?>/>Corporate 
                    <input type="radio" id="typeOfCustomer" name="typeOfCustomer" value="DJ" <?php if($typeOfCustomer == 'DJ') echo "checked" ?> />DJ
                </p> 
  

                  <p id="companyName"> 
                    <label>Company Name:</label>
                    <input type="text" id="companyName" name="companyName" value="<?php htmlout($companyName); ?>"/>        
                </p> 


                  <p id="dateOfBirth"> 
                    <label>Date of Birth of DJ:</label>
                    <input type="text" id="dateOfBirth" name="dateOfBirth" value="<?php htmlout($dateOfBirth); ?>"/>        
                </p>

Any ideas on how i can solve this problem. I want to be able to load the page and if the checkbox value is corporate I want the p tag with an id of companyName to appear without having to check the ckeck box again

[yaseenyahya]

window.onload=function() { 
//hide on load.
         document.getElementById('companyName').style.display = "none"; 
       document.getElementById('dateOfBirth').style.display = "none"; 

//private radio.
document.getElementsByClassName("typeofCustomer")[0].onClick = function (){
document.getElementById('companyName').style.display = "none"; 
       document.getElementById('dateOfBirth').style.display = "none"; 
};
//corporate radio.
document.getElementsByClassName("typeofCustomer")[1].onClick = function (){
document.getElementById('companyName').style.display = "block"; 
       document.getElementById('dateOfBirth').style.display = "none"; 
};
//dj radio
document.getElementsByClassName("typeofCustomer")[2].onClick = function (){
document.getElementById('companyName').style.display = "none"; 
       document.getElementById('dateOfBirth').style.display = "block"; 
};

     }

yu can also manapulate the event on tag for example:


<input type="radio" onClick='clickRadio()'>
and on javascript

function clickRadio(){
/* what ever yu want to do..*/
}

[kevinkhan]

Ok thanks for your help