Expanding & Collapsing HTML Form
i like to make a form which expands as a user selects an option for eg.
Select Payment Method:
1. Credit Card
2. ABC
3. XYZ
so when the user clicks credit card the form expands asking him for details of his credit card.
or he may click ABC resulting in the same operation
can anybody help???????
KeithMcL posted this at 13:32 — 20th September 2004.
He has: 176 posts
Joined: Oct 1999
This requires the use of javascript.
Here's an article that should help you out:
http://www.trans4mind.com/personal_development/JavaScript/menuWrite.htm
pramodkhanna posted this at 08:01 — 21st September 2004.
He has: 6 posts
Joined: Sep 2004
no this is not what i wanted. anyway thanks.
openmind posted this at 08:17 — 21st September 2004.
He has: 945 posts
Joined: Aug 2001
You could do it server side to include a different template for each selection?
JeevesBond posted this at 08:40 — 21st September 2004.
He has: 3,956 posts
Joined: Jun 2002
It should be noted that this is bad practice. Using javascript to submit the form on a combo box event is not what a user expects, the form should only be submitted when the user presses a submit button.
Perhaps several pages could be used, with different templates as flipper suggested?
a Padded Cell our articles site!
pramodkhanna posted this at 13:20 — 21st September 2004.
He has: 6 posts
Joined: Sep 2004
using this style in a form is just an example.
i can use this style anywhere in the website.
the main question is can this be done.
if yes, then how??
KeithMcL posted this at 14:09 — 21st September 2004.
He has: 176 posts
Joined: Oct 1999
I'm still not sure what you're looking for. Are you looking to have certain fields hidden on the page until a user chooses an option from a drop down menu?
pramodkhanna posted this at 07:10 — 22nd September 2004.
He has: 6 posts
Joined: Sep 2004
yes, that's exactly what i m looking for.
some fields remain hidden, until a user selects and option from a drop down menu or selects it from a radio button group.
As soon as an option is selected, the hidden fields will become visible and when the option is unselected the fields will become hidden.
KeithMcL posted this at 15:01 — 22nd September 2004.
He has: 176 posts
Joined: Oct 1999
Ah ok, I get you now.
You still need to use javascript to achieve this effect. You use the onChange event like so:
<html>
<head>
<script type="text/javascript" language="javascript">
function checkIt(ref) {
if(ref.options[ref.selectedIndex].text == "creditcard") {
document.frmTest.ccnumber.style.visibility = "visible";
} else {
document.frmTest.ccnumber.style.visibility = "hidden";
}
}
</script>
</head>
<body>
<form name="frmTest">
<select name="selTest" onChange="checkIt(this)">
<option value="1">creditcard</option>
<option value="2">abc</option>
<option value="3">xyz</option>
<option value="4">other</option>
</select>
<p />
<input type="text" name="ccnumber" style="visibility: hidden" />
</form>
</body>
</html>
pramodkhanna posted this at 06:23 — 23rd September 2004.
He has: 6 posts
Joined: Sep 2004
thanks a lot, i just wanted this.
thanks again
KeithMcL posted this at 10:41 — 23rd September 2004.
He has: 176 posts
Joined: Oct 1999
Glad I could help. Basically all it does it change the style from visibility: hidden to visibility: visible. You should be able to modify the code above for other form elements easily enough
pramodkhanna posted this at 09:49 — 24th September 2004.
He has: 6 posts
Joined: Sep 2004
ya now i can modify the code and use it as per my requirement.
but i dont think it is a bad style, if i use it in forms too.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.