Expandable web form

Axwell

Hey folks, i need to have a form where part of it is invisible and appears depending on wheather the user clicks an optional yes or no box. When they click yes i need extra questions to appear on the form which otherwise would be hidden unless this yes option is selected. Any ideas how i can do this?

Thanks

ianhobo

Have a look at events (for the yes no selection)
And triggering the isVisible member of the stuff you then want to show

Axwell

How do i initially make the section of the form invisible though?

dkell

There's an example of adding / removing form elements based on radio button selection at:

http://www.jsworkshop.com/dhtml/list18-1.html

Axwell

Excellent, cheers this should do the trick.

DJB

you can use http://script.aculo.us/ to do this. I've used it on http://www.blueskymortgages.ie/mortgage-calculators/ for the stamp duty calculator. Try selecting different options.

Axwell

Thanks for that Dave will give it a look. Really like your site by the way, have been keeping an eye on your blog the last while also. Keep up the good work!

DJB

No problem. Have been a bit busy lately so haven't been keeping the blog up to date unfortunately but hopefully I'll free up some time to get some new posts soon. Have some nice things in the pipeline so keep an eye on the RSS. Best of luck and don't hesitate to "borrow" a little code!

egan007

To make it very nice you could use ajax...

Ajax looks daunting at first but is really simple and looks great.
http://www.efree.ie/blog/?p=7

BRENSH

Sorry the devaite from the point.

DJB I must commend you on your website BLUESKYMORTGAGES.ie . Great job looks very professional. Are you one by the way. Did you use a framework for your site.

______________________________________________________________

Back to AXWELL
I would advise any newbe javascript users to be very carefull with using javascript. Learning a lot about it recently and it is a total pain to get right.

Its very error prone. Don't want to scare you or anything.

For example if you added a string type and an number type (in javascript always double) togeather you will end up with a string not a number.

i.e document.write("10" + 10); would yield 1010 not 20;

The most annoying thing about javascript is its inability to throw up mistakes. i.e declaring two identically named vars in the same scope

In my opinion you should be very aware on how to use javascript and you could be hours trying to fix the seemingly non existant (but very real) problems in the code.

Best of luck

Axwell

Cheers Brensh but i wouldnt consider myself a newbie in this area and was just looking for a way to deal with the particular problem. So dont fear, you havent scared me or anything i've had my days of pulling my hair out over java and other languages already and im sure ill have them again along the way!

Malice

Hey folks, i need to have a form where part of it is invisible and appears depending on wheather the user clicks an optional yes or no box. When they click yes i need extra questions to appear on the form which otherwise would be hidden unless this yes option is selected. Any ideas how i can do this?

You haven't mentioned what language you want to do this in. For what it's worth, I've used ASP.NET for this in the past. Basically I just put the controls to show/hide onto a Panel and then toggle the panel's visiblity attribute based on a checkbox or a radio button that automatically posts the form back.

Liam Byrne

Try jQuery - you can show and hide any element based on their CSS values.

Axwell

I havent written what language as i was open to suggestion for an easy way to do it, the site and pages are html with css so i was hoping for something easy enough along those lines just to allow me to make the extra areas of the form appear. Theres a few suggestions above which i will look at and try out early in next week when i get back to the project.

Cheers for the advice so far guys!

BRENSH

I would advise javascript

It is the most popular choice and its client sided so it would be faster than calling the server. Calling the server for something as small as that should be a no no. unless you need to implement dynamic questions which are on the servers db.

I am assuming they are static questions. Just create a script create an object in javascript called questions i.e

       
var Qobject = {
	
	myQuestionsBlock: 0,
	

	constructor: function(obj)  //myconstructor for object literal
	{
		this.myQuestionsBlock = obj;
		
		alert(obj.id);
	},
             
         
	
	showQuestions : function()
	{
		this.myQuestionsBlock.style.display = "block";
	},
	
	hideQuestions : function()
	{
		this.myQuestionsBlock.style.display = "none";
	}
		
	
}; 
       

put like <script src="ulrtoscript" ></script> in head

inside you body Create your objects i.e radio buttons which represent your content

i.e
[HTML]<form>
<p>Yes <input name="yes_no" type="radio" onclick="Qobject.showQuestions()"/>
No
<input type="radio" name="yes_no" onclick="Qobject.hideQuestions()"/></p>

<p id="Questions" style="display:none;">Hidden Questions: <input type="text" /> Q2 <input type="text" /> Q3 <input type="text" /></p>
</form>
[/HTML]

finally add your script tag underneath it because getElementById works by searching up through the text I believe.

i.e

<script>Qobject.constructor(document.getElementById("Questions"));</script>

Very easy

mewso

Just follow the adivce of one of the masters - http://www.quirksmode.org/dom/usableforms.html.

Axwell

Nice one musician thats exactly what im looking for. cheers