By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,729 Members | 1,487 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,729 IT Pros & Developers. It's quick & easy.

show hide form

P: n/a
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 ?

Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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.
Jul 20 '05 #2

P: n/a
"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 ?
Jul 20 '05 #3

P: n/a
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.
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.