Form visibility

forms with drop down menu

Page 1 of 1

3 Replies - 13811 Views - Last Post: 04 April 2008 - 06:10 PM

#1 b_real  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 29-December 06

Form visibility

Posted 30 March 2008 - 08:03 AM

Not entirely sure what the terminology is for what Im trying to find out, but rough description is as follows:

On one page, I want a form that the user can use to fill in details of a product which gets sent to a database using a perl script. My query is about the form on the one page - I want to have it so that the user first chooses what type of product they want to enter (book, cd, car, bike etc) then based on what is selected from the drop down list, the form will change to reflect the attributes of the product (so if a book is chosen, he can then enter title, author etc, and if a car is chosen, his options change to colour, engine size etc.. ).

At the minute ive got a form for each product on the one page, but it looks terrible. Trying to condense it and make it a bit less cluttered.

Can this be done just using html? What should I be searching for?

Is This A Good Question/Topic? 0
  • +

Replies To: Form visibility

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4319
  • View blog
  • Posts: 12,101
  • Joined: 18-April 07

Re: Form visibility

Posted 30 March 2008 - 08:45 AM

Well this can't be done with just HTML alone, it is actually a combination of HTML, Javascript and CSS (cascading style sheets).

What you will want to search for are the CSS attributes "visibility" and "display". You will also want to research the Javascript method "getElementById()"

Here is an example you can try yourself below. Just cut and paste the code and save it as an HTML page on your desktop.

<html>
<head>
<title>Show/Hide Elements</title>
<script type="text/javascript">

function showhide() {
	// Get a reference to your form's id
	var form = document.getElementById("myform");

	// If it is hidden, show it, otherwise hide it.
	if (form.style.visibility == "hidden") {
		form.style.visibility = "visible";
	}
	else {
		form.style.visibility = "hidden";
	}
}

</script>
</head>

<body>

<form method="POST" action="" id="myform">
<textarea name="comments" rows="3" cols="45"></textarea>
</form>

<!-- Call the showhide() javascript function -->
<input type="button" name="showhide" value="Show/Hide" onclick="showhide()"/>

</body>
</html>



Clicking the button should hide and show the form above. The display attribute will tell the page if it should be included in the natural flow of the page or not. You can toggle this as "block" or "none".

So research what you see in this example and you should get an idea of what you need to do.

Enjoy!

"At DIC we be hiding and showing form code ninjas! Just some of our forms are too ugly to be seen in public." :snap:
Was This Post Helpful? 0
  • +
  • -

#3 spearfish  Icon User is offline

  • Monkey in Training
  • member icon

Reputation: 10
  • View blog
  • Posts: 746
  • Joined: 10-March 08

Re: Form visibility

Posted 31 March 2008 - 04:57 PM

Martyr strikes again!

How I would do this would be to set the sub-forms for all products to a hidden visibility, then do something very similar to Martyr's code.

An onchange handler would probably be the best here, where the visibility of the sub-forms is reevaluated each time the drop down list is changed, and then using a switch or if statements, check which sub-form should become visible. If that makes any sense.
Was This Post Helpful? 0
  • +
  • -

#4 polymath  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 670
  • Joined: 04-April 08

Re: Form visibility

Posted 04 April 2008 - 06:10 PM

Martyr is right!

Another approach is useing if...then statements to run the code you want in javascript.
Also, you may want to use a script that you can directly encode into your page that can also interact with a database (such as PHP) in the future.
Thats just personal preference, though.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1