A form question

[dapril]

Hello everyone,

I am very new to scripting and am attempting my first ever, rather ambitious Javascript piece.

I want a form where the questions come up in turn after the previous one is clicked on... Thing is, I want the previous questions to stay on the screen...
So far all I can get with an onClick event on the button, is a new blank document... but I want the form to stay there... it's probably easy, but I can't do it!
I basically want the OnClick to open a new form underneath the old one, and that new form to be dependant on which option was selected.


Also... now I'm pushing my luck... I want to have a form button that disappears with an onMouseover event, then reappears with an onMouseout event, so it can never be clicked on... pretty funny huh?

Anyone can solve these conundrums will forever be in my heart.
Thank you greatly.

[gmorphus]

there are few methods you can use to make a form apear.
[list=1]
put each group of elements in a div tag, name it, and using CSS make apear and disapear (there should be a way to do this in both of the main browsers - IE, NS).
use 'document.write()' to add HTML code to your document.
[/list=1]
Both of these methods can be accomplished using functions, or even using OnClick event.
Here is an example of what you wanted, using the 1st method.
<form>
<div id="item1">
Question 1: <input type="Text"><input type="Button" value="GO" onclick="item2.style.visibility='visible'">
</div>
<div id="item2" style="visibility:hidden">
Question 2: <input type="Text"><input type="Button" value="GO" onclick="item3.style.visibility='visible'">
</div>
<div id="item3" style="visibility:hidden">
Question 3: <input type="Text"><br>
<input type="Submit">
</div>
</form>

here is another method to do this:
<script>
text2 = 'Question 2: <input type="Text"><input type="Button" value="GO" onclick="item3.innerHTML=text3">';
text3 = 'Question 3: <input type="Text"><br><input type="Submit">';
</script>
<form>
<div id="item1">
Question 1: <input type="Text"><input type="Button" value="GO" onclick="item2.innerHTML=text2">
</div>
<div id="item2">
</div>
<div id="item3">
</div>
</form>

With this method each onClick event can generate the next question and put it in the corresponded text var.

Hope I am clear enough.
Good Luck.

[gmorphus]

Also... now I'm pushing my luck... I want to have a form button that disappears with an onMouseover event, then reappears with an onMouseout event, so it can never be clicked on... pretty funny huh?

oh, I forgor to reffer you last "conundrum".
I tried to do this:

<form>
<input type="Button" value="Mystery" onMouseOver="this.style.visibility='hidden'" onMouseOut="this.style.visibility='visible'">
</form>


But for some reason I didn't work so well. I think that's how it should be done. Couldn't think of something else.
Can anyone?

[dapril]

Thank you very much for your help...

If I can get it all to work then it should be very effective. I had considered making the questions invisible... but I had no real idea how to structure the thing.

I'll try it out though.

But to solve the disappearing button thing, I may just have to draw a button and make the image disappear, or change into a transparent .gif or something like that...

To be honest, I don't really know what I'm talking about... but I'm trying to grasp the basics.
I'm sure I'll be back with some more vexxing Javascript queries.

[gmorphus]

you are welcome.

what you are saying sounds good. probably there is a problem with the button itself, so making it a picture will might work. use CSS (cascading style sheets) to make apear and disapear (but.style.visibility = 'hidden'/'visible'). you don't have to use a transparent gif.

the code i used is good for explorer, but it can be dome with netscape too - don't remember too.

Good Luck.