Programming Help

Web Development



What's Here?

  • Members: 136,583
  • Replies: 479,716
  • Topics: 74,764
  • Snippets: 2,567
  • Tutorials: 677
  • Total Online: 1,927
  • Members: 81
  • Guests: 1,846

Welcome to Dream.In.Code
Getting Help is Easy!

Join 136,583 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,927 people online right now. Registration is fast and FREE... Join Now!




Making forms invisible THEN visible

 
 Reply to this topicStart new topic

Making forms invisible THEN visible
hawk23
2 Oct, 2008 - 01:05 PM
Post #1

New D.I.C Head
*

Joined: 2 Oct, 2008
Posts: 11
I want to have a form become visible and invisible by the click of a button (hyper link)....

so for example my hyperlink will say:

"Click here if you plan on registering for a foreign language class"

then once you click that blue hyperlink I want the following form to appear


If someone could enter in the correct HTML for me so I could just copy and paste it into my source I would be appreciative... I'm a beginner


CODE
<FORM name=ForeignLanguage><SELECT
style="FONT-SIZE: 12px; WIDTH: 613px; COLOR: #000000; FONT-FAMILY: verdana; BACKGROUND-COLOR: #ff8000"
name=menu> <OPTION
  value="java script:popup('http://two.xthost.info/DanielDiambri/ForeignLanguage1.html','pagename','660','240','center','front');"
  selected>Select a Foreign Language Class...</OPTION>
  <OPTION
  value="java script:popup('http://two.xthost.info/DanielDiambri/FirstYearLanguage.html','pagename','420','200','center','front');"
  >SEMESTER 1: French I (FOR111)
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SEMESTER 2: French
  I (FOR112)</OPTION> <OPTION
  value="java script:popup('http://two.xthost.info/DanielDiambri/FirstYearLanguage.html','pagename','420','200','center','front');"
  >SEMESTER 1: German I (FOR211)
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SEMESTER 2: German I
  (FOR212)</OPTION> <OPTION
  value="java script:popup('http://two.xthost.info/DanielDiambri/FirstYearLanguage.html','pagename','420','200','center','front');"
  >SEMESTER 1: Spanish I (FOR311)
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SEMESTER 2: Spanish I
  (FOR312)</OPTION> <OPTION
  value="java script:popup('http://two.xthost.info/DanielDiambri/SecondYearLanguage.html','pagename','420','200','center','front');"
  >SEMESTER 1: French II (FOR131)
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SEMESTER 2: French II
  (FOR132)</OPTION> <OPTION
  value="java script:popup('http://two.xthost.info/DanielDiambri/SecondYearLanguage.html','pagename','420','200','center','front');"
  >SEMESTER 1: German II (FOR231)
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SEMESTER 2: German II
  (FOR232)</OPTION> <OPTION
  value="java script:popup('http://two.xthost.info/DanielDiambri/SecondYearLanguage.html','pagename','420','200','center','front');"
  >SEMESTER 1: Spanish II (FOR331)
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SEMESTER 2: Spanish II
  (FOR332)</OPTION><OPTION
  value="java script:popup('http://two.xthost.info/DanielDiambri/Elective.html','pagename','525','75','center','front');"
  >Elective (Foreign Language Not Required) Talk to your
  counselor about other options</OPTION></SELECT><EM> </EM><INPUT style="FONT-WEIGHT: bold; FONT-SIZE: 12px; WIDTH: 95px; COLOR: #000000; FONT-FAMILY: verdana; HEIGHT: 21px; BACKGROUND-COLOR: #ff8000" onclick=location=document.ForeignLanguage.menu.options[document.ForeignLanguage.menu.selectedIndex].value; type=button size=13 value="Class Details"><EM> </EM></FORM>

User is offlineProfile CardPM
+Quote Post

William_Wilson
RE: Making Forms Invisible THEN Visible
2 Oct, 2008 - 01:30 PM
Post #2

lost in compilation
Group Icon

Joined: 23 Dec, 2005
Posts: 3,995



Thanked: 16 times
Dream Kudos: 3275
Expert In: Java, C, Javascript

My Contributions
you can use css and javascript to accomplish this. The display css attribute needs to be block for visible and none for invisible, then just swap these values with javascript.

CODE

<span onClick="document.getElementById('test').style.display = 'block';">show div</span>
<div style="display:none;" id="test" name="test">
hidden
</div>


this of course is not the best way to write the code, but it's the fastest to write on the fly tongue.gif

This post has been edited by William_Wilson: 2 Oct, 2008 - 01:31 PM
User is offlineProfile CardPM
+Quote Post

hawk23
RE: Making Forms Invisible THEN Visible
2 Oct, 2008 - 02:10 PM
Post #3

New D.I.C Head
*

Joined: 2 Oct, 2008
Posts: 11
so where in that code would I insert my form? I'm sorry... I'm new at a lot of this stuff
User is offlineProfile CardPM
+Quote Post

BetaWar
RE: Making Forms Invisible THEN Visible
2 Oct, 2008 - 02:17 PM
Post #4

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 2,026



Thanked: 82 times
Dream Kudos: 1175
My Contributions
just replace the word "hidden" with your code and it should work.
User is offlineProfile CardPM
+Quote Post

hawk23
RE: Making Forms Invisible THEN Visible
2 Oct, 2008 - 02:28 PM
Post #5

New D.I.C Head
*

Joined: 2 Oct, 2008
Posts: 11
thanks beta - my only other question is - instead of having TEXT switch the form back and forth between visible and hidden how can I change it to a BUTTON?

I appreciate all the help
User is offlineProfile CardPM
+Quote Post

BetaWar
RE: Making Forms Invisible THEN Visible
2 Oct, 2008 - 02:31 PM
Post #6

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 2,026



Thanked: 82 times
Dream Kudos: 1175
My Contributions
Here is a simple button that does the smae thing:

CODE
<input type="button" onClick="document.getElementById('test').style.display = 'block';" value="show div" />


Just change the value attribute to change what the button's text is.
User is offlineProfile CardPM
+Quote Post

hawk23
RE: Making Forms Invisible THEN Visible
2 Oct, 2008 - 02:43 PM
Post #7

New D.I.C Head
*

Joined: 2 Oct, 2008
Posts: 11
I owe you both so much - is there a quick code to add so that when you click the button or link it alternates between hiding and showing the form? For example if I click the button a second time is it possible to have it re-hide the form?
User is offlineProfile CardPM
+Quote Post

BetaWar
RE: Making Forms Invisible THEN Visible
2 Oct, 2008 - 02:49 PM
Post #8

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 2,026



Thanked: 82 times
Dream Kudos: 1175
My Contributions
Here you are:

CODE
<input type="button" onClick="var id = document.getElementById('test'); if(id.style.display == 'block'){ id.style.display = 'none';} else{ id.style.display = 'block';}" value="show div" />

<div style="display:none;" id="test" name="test">
hidden
</div>


Hope that helps.
User is offlineProfile CardPM
+Quote Post

hawk23
RE: Making Forms Invisible THEN Visible
2 Oct, 2008 - 03:37 PM
Post #9

New D.I.C Head
*

Joined: 2 Oct, 2008
Posts: 11
perfect! thank you!
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 12/3/08 12:43AM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month