PDA

View Full Version : How to hide form elements



Opally
Mar 19th, 2007, 08:56 PM
Hi.

I'm trying to develop a form which hides alternate payment fields depending on the user's selection. I want to use radio buttons so the users see their options at a glance, rather than a select menu.

What I have so far doesn't quite work. It only performs the Default action for the switch. I think I'm not passing the value for the radio button to the function.

What I have so far:


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


My radio buttons:


<input name="paymentMethod" type="radio"
value="Credit Card" onClick="hidePayment(this)">
Credit Card
<input name="paymentMethod" type="radio"
value="Purchase Order" onClick="hidePayment(this)">
Purchase Order
<input name="paymentMethod" type="radio"
value="Check" onClick="hidePayment(this)">
Check

The hide section IDs are attached to divs that contain tables.

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

Thanks!!! I hope some smart person will make sense of my stupid code. I've gotten expert help before at this forum, you guys rule.

My script source was this (http://www.webdeveloper.com/forum/showthread.php?t=67756).

---Opally

Mr J
Mar 20th, 2007, 03:17 PM
You are assigning a value instead of comparing

In your code where you have

if(choice.value =

this should be

if(choice.value ==


if (choice.value == "Credit Card") {

Opally
Mar 20th, 2007, 04:05 PM
Thank you very VERY much for sharing your wisdom.

of COURSE! (bonks self on head.)

You'll probably hear from me again as I work on the expanding form part of this, heh.

---Opally

Kor
Mar 20th, 2007, 04:38 PM
You must also disable/enable the elements. A "hidden" element still remains a form's element so that it's value will be sent onsubmit anyway even if its display is none!


if (choice.value == "Credit Card") {
document.getElementById('ccpaytable').style.display='inline';
document.getElementById('ccpaytable').disabled=false;
document.getElementById('popaytable').style.display='none';
document.getElementById('ccpaytable').disabled=true;
document.getElementById('checkpaytable').style.display='none';
document.getElementById('ccpaytable').disabled=true;
........
and so on

Opally
Mar 20th, 2007, 06:28 PM
thanks for the tip!!

follow-up: the display='none' and display='inline' is working in IE but not in FireFox.

hmm... maybe I have to apply the ID to a div instead of the table? going to experiment.

Kor
Mar 20th, 2007, 07:32 PM
Make sure elements have ids if you use getElementById() method

Opally
Mar 20th, 2007, 09:33 PM
The divs that contain the payment fields are indeed identified by IDs. First I had the ID applied to the table, then I applied it to a DIV. No difference in behavior between the browsers.

I also tried adding an ID to the radio button set, but that didn't make any difference; actually, each radio button would need a unique ID. But that's irrelevant to these scripts.

Here's my form: https://www.coreknowledge.org/secure/html_forms/confregform.htm
I've removed the style for display:none for the payment divs, for debugging purposes.

There's a clue here, although I don't know how to interpret it: in FF when the page loads the form displays only the Check payment field. Which seems to say that FF is executing the javascript to hide some fields onLoad, although it shouldn't execute that code until it gets an onClick event from the radio buttons.

So... I infer that something is making that code execute in FF, in an unexpected way.

Perhaps there is some kind of interaction between Javascript elements? I will try deconstructing the page to see if that's the problem, removing extraneous scripts.

Is there some difference of behavior between FF and IE about display='none' and display='inline'?

Opally
Mar 21st, 2007, 05:15 PM
SUCCESS!

And for anyone else experiencing this problem...

Although I believed I was following correct rules for HTML comments... it was the interspersed comment lines, put in so I could locate my divs easily, that caused me grief in implementing display='none' and display='inline' in Mozilla/FireFox.

I figured this out by monkeying around with a stripped down version of the form. I accidentally edited a comment line, started to see different behavior in FF, and figured it out.

YAY!

---Opally

Kor
Mar 21st, 2007, 05:19 PM
a common mistake is to add extra lines in a comment (over the 2 -- standard)

<!-------

Which will bring errors in some browsers driven by a strict Doctype

Opally
Mar 21st, 2007, 09:25 PM
aaaahhhhh.... that was the problem.

Thank you so much, I love to learn!

---Opally

Kor
Mar 21st, 2007, 09:42 PM
:thumbsup: That is why we are here for. We all were, on our time, beginners, and had the support of the most experienced here at the time. This is the reason for this kind of Forum lives. Learn and teach others what you have discovered/learned. At least I do believe so.