show hide form

[earl]

Hey

Say I have two <form> on a page like this :

<form action="private.asp" method="post" name="form1">
// code
<input type=submit value="submit" name="submit">
</form>

<form action="private2.asp" method="post" name="form2">
// code
<input type=submit value="submit" name="submit">
</form>

Is it possible to hide both on form load and then from a drop down menu
choose which of the two to show ?

[Yann-Erwan Perio]

earl wrote:

<input type=submit value="submit" name="submit">
Don't name a "submit" button "submit", you're overriding the js submit
method for the form (not that you should use it anyway).
Is it possible to hide both on form load and then from a drop down menu
choose which of the two to show ?

Certainly, see below. Note however that there are some accessibility
issues to consider, for instance users deprived from javascript, or
having non-supporting agents, might not be able to navigate your website.
<style type="text/css">
#f1, #f2 {visibility:hidden}
</style>

<div id="f1">
<form action="foo">
<!-- content goes here -->
<input type="submit" value="submit 1">
</form>
</div>

<div id="f2">
<form action="foo">
<!-- content goes here -->
<input type="submit" value="submit 2">
</form>
</div>

<form action="#">
<select onchange="f(this)">
<option value="">---</option>
<option value="f1">Show form 1</option>
<option value="f2">Show form 2</option>
</select>
</form>

<script type="text/javascript">
function f(sel){
var d=document, dv;
if(d.getElementById){
for(var ii=0; ii<sel.options.length; ii++){
dv=d.getElementById(sel.options[ii].value);
if(dv)
dv.style.visibility=sel.options[ii].selected?"visible":"hidden";
}
}
}
</script>
HTH
Yep.

[earl]

"Yann-Erwan Perio" <y-*******@em-lyon.com> wrote in message
news:3f***********************@news.free.fr...

earl wrote:

<input type=submit value="submit" name="submit">

Don't name a "submit" button "submit", you're overriding the js submit
method for the form (not that you should use it anyway).

Is it possible to hide both on form load and then from a drop down menu
choose which of the two to show ?

Certainly, see below. Note however that there are some accessibility
issues to consider, for instance users deprived from javascript, or
having non-supporting agents, might not be able to navigate your website.
<style type="text/css">
#f1, #f2 {visibility:hidden}
</style>

<div id="f1">
<form action="foo">
<!-- content goes here -->
<input type="submit" value="submit 1">
</form>
</div>

<div id="f2">
<form action="foo">
<!-- content goes here -->
<input type="submit" value="submit 2">
</form>
</div>

<form action="#">
<select onchange="f(this)">
<option value="">---</option>
<option value="f1">Show form 1</option>
<option value="f2">Show form 2</option>
</select>
</form>

<script type="text/javascript">
function f(sel){
var d=document, dv;
if(d.getElementById){
for(var ii=0; ii<sel.options.length; ii++){
dv=d.getElementById(sel.options[ii].value);
if(dv)
dv.style.visibility=sel.options[ii].selected?"visible":"hidden";
}
}
}
</script>
HTH
Yep.

Thanks for the reply.

One thing though, is it possible to make f1 and f2 overlap ?

[Yann-Erwan Perio]

earl wrote:

One thing though, is it possible to make f1 and f2 overlap ?

Sure, either position them absolutely or change the display property
instead of the visibility one. The CSS part becomes something like

<style type="text/css">
#f1, #f2 {display:none;}
form{margin:0}
</style>

and the style setting part something like

dv.style.display=sel.options[ii].selected?"block":"none";
HTH
Yep.