...

View Full Version : onload check radio button status, hide/show fieldset



Opally
04-30-2007, 07:24 PM
Hi!

I have a radio button that controls the display of a payment field. Depending on the selection (credit card, purchase order, check) that field shows.

That part is working.

The form is then submitted (PHP process) to a review screen, and can then be reloaded with the session data for editing.

On reload, I'd like the selected payment field to display, but this isn't working:

<body onload showPayment()>


function showPayment(){
var radioGroup = document.forms[0].paymentMethod;
for (var i = 0; i < radioGroup.length; i++) {
if (radioGroup[i].checked) {
var sel = radioGroup[i];
hidePayment(sel);
} else {
break;
}
}
}


hidePayment calls the show/hide function:

function hidePayment(choice) {
if (choice.value == "Credit Card") {
document.getElementById('ccpaytable').style.display='inline';
document.getElementById('popaytable').style.display='none';
document.getElementById('checkpaytable').style.display='none';
} else if (choice.value == "Purchase Order") {
document.getElementById('ccpaytable').style.display='none';
document.getElementById('popaytable').style.display='inline';
document.getElementById('checkpaytable').style.display='none';
} else if (choice.value == "Check") {
document.getElementById('ccpaytable').style.display='none';
document.getElementById('popaytable').style.display='none';
document.getElementById('checkpaytable').style.display='inline';
} else {
document.getElementById('ccpaytable').style.display='inline';
document.getElementById('popaytable').style.display='inline';
document.getElementById('checkpaytable').style.display='inline';
}
return true;
}

On reloading the page with the session data, the correct radio button is checked, and there is no JS error, but the payment fieldset does not display.

The form is here:
https://www.coreknowledge.org/secure/html_forms/confregform.php

ideas?

thanks!!

---Opally

glenngv
04-30-2007, 08:42 PM
Remove the "else" and "break" block. What's happening is if the first radio button is not checked and the second radio button is, on the first iteration of the loop, it will go to "else" block and breaks out of the loop without checking the second radio button. Thus hidePayment() will never get executed.

You can put the break statement in the "if" block so that it won't loop anymore once the checked item is found. Although you're sure that only one item will ever be selected but that keeps the code from looping unnecessarily.


function showPayment(){
var radioGroup = document.forms[0].paymentMethod;
for (var i = 0; i < radioGroup.length; i++) {
if (radioGroup[i].checked) {
hidePayment(radioGroup[i]);
break;
}
}
}

Opally
04-30-2007, 10:04 PM
SUPER!!!! That works like a charm.

Thank you for your explanation, you made it very clear to me! I'm not much of a programmer, but I'm getting better, thanks to wonderful people like you, Glenn.

---Opally



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum