...

View Full Version : How to show a paragraph if a check box is ticked



kevinkhan
11-04-2012, 12:28 PM
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


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;
}

}


<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
11-04-2012, 01:28 PM
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
11-04-2012, 06:22 PM
Ok thanks for your help



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum