Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2009
    Posts
    351
    Thanks
    75
    Thanked 0 Times in 0 Posts

    How to show a paragraph if a check box is ticked

    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 
    = [0]; radios.lengthi++)
        
    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

  • #2
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    Code:
    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

    Code:
    function clickRadio(){
    /* what ever yu want to do..*/
    }
    Last edited by yaseenyahya; 11-04-2012 at 12:45 PM.

  • Users who have thanked yaseenyahya for this post:

    kevinkhan (11-04-2012)

  • #3
    Regular Coder
    Join Date
    Jun 2009
    Posts
    351
    Thanks
    75
    Thanked 0 Times in 0 Posts
    Ok thanks for your help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •