• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 219
  • Last Modified:

How to make form fields appear or not

I have a "mail-to" form with various fields and drop-down choice menus.
The whole form gets mailed by way of a pearl mailform script. (standard free stuff)
How can I have a portion of the form (several fields) become visible only when a certain choice is made on one of the drop-down menus. Otherwise those fields stay hidden.
Keep in mind, the entire form (those fields included) must ship when the SUBMIT button is pressed.
bb
0
b6106b
Asked:
b6106b
  • 4
  • 3
  • 2
  • +2
1 Solution
 
COBOLdinosaurCommented:
If you need to do it cross browser.  Then the answer is no for netscape.

If you need it for IE the put the part you want invisible in a div with a style entry like this:

<div id="divname" style="visibility:hidden">

Form fields

</div>

The when you are ready to show them use an event liek teh onChange event of a select like this:

onChange="document.all['divname'].style.visibility='visible'"

HTH

Cd&
0
 
b6106bAuthor Commented:
yes...it has to work on all browsers.
0
 
COBOLdinosaurCommented:
AFAIK there is no way to do it in netscape.  It does not support the visibility attribute on form elements.

Cd&
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
a.marshCommented:
Here is a workaround for you:

<html>
<head>
<script language="javascript">
<!--

function showHideLayer(selectObj){
  if (selectObj.selectedIndex == 1){
    if (document.all){
      document.all.mainLayer.style.visibility = "visible";
    }
    else{
      document.layers.nnLayer.visibility = "show";
    }
  }
  else{
    if (document.all){
      document.all.mainLayer.style.visibility = "hidden";
    }
    else{
      document.layers.nnLayer.visibility = "hide";
    }
  }
}

function getValues(formObj){
  var dummy1Obj = document.forms["dummy1"];
  var dummy2Obj;
  if(document.all){
    dummy2Obj = document.forms["dummy2"];
  }
  else{
    dummy2Obj = document.layers["nnLayer"].document.forms["dummy2"];
  }

  formObj.fieldA.value = dummy1Obj.fieldA.value;
  formObj.fieldB.value = dummy1Obj.fieldB.options[dummy1Obj.fieldB.selectedIndex].value;

  formObj.fieldC.value = dummy2Obj.fieldC.value;
  formObj.fieldD.value = dummy2Obj.fieldD.options[dummy2Obj.fieldD.selectedIndex].value;
 
  document.forms["actualFrm"].submit();
}

//-->
</script>
</head>
<body>
<form name="actualFrm">
<input type="hidden" name="fieldA" value="">
<input type="hidden" name="fieldB" value="">
<input type="hidden" name="fieldC" value="">
<input type="hidden" name="fieldD" value="">
</form>
<form name="dummy1">
<input type="text" name="fieldA" value="">
<select name="fieldB" onChange="showHideLayer(this);">
<option value="0">Off</option>
<option value="1">On</option>
</select>
</form>
<script language="javascript">
<!--
if (document.all){
 document.write("<div id=\"mainLayer\" style=\"visibility: hidden;\">");
}
else{
 document.write("<layer id=\"nnLayer\" visibility=\"hide\">");
}
//-->
</script>
<form name="dummy2">
<input type="text" name="fieldC" value="">
<select name="fieldD">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Pear">Pear</option>
</select>
</form>
<script language="javascript">
<!--
if (document.all){
 document.write("</div>");
}
else{
 document.write("</layer>");
}
//-->
</script>
<form name="dummy3">
<input type="button" value="ok!" onClick="getValues(document.forms['actualFrm']);">
</form>
</body>
</html>

It uses layers and forms - a bit messy because of browser compatibility, but it works in IE and NN4.x - and with a little bit more code it can work in Netscape 6 if you need it to.

:o)

Ant
0
 
Ernest022699Commented:
Don't go with a non-portable solution!

You're better off having three Pages, Page A with a form which asks the user the key questions and submits to a Perl CGI which decides whether to send Page B or Page C.  (This is assuming that those certain fields you mention appear only on Page B or on Page C.)

Althernatively, you could have the first Page's Perl program generate HTML on the fly.  That way you could have hidden fields, etc.
0
 
a.marshCommented:
ermmmmm...please explain why my solution is "non-portable"????

Ant
0
 
dorwardCommented:
You're using a mailto form? That isn't a very reliably solution. In fact its a very very UNRELIABLE method. Please see:

http://www.isolani.co.uk/newbie/mailto.html
0
 
a.marshCommented:
Dorward, I thought that when I first read it - but they are simply referring to the fact the form simply collects info that gets emailed somewhere - it does say that the email is sent using a Perl script:

>>>The whole form gets mailed by way of a pearl mailform script.


:o)

Ant
0
 
b6106bAuthor Commented:
Thanks...we'll give it a try.
0
 
COBOLdinosaurCommented:
Hmmm... B looks a little low considering the difficult of the probelm and the detal of the solution.  IMHO

Cd&
0
 
a.marshCommented:
I was thinking the same......oh well....

:o\

Ant
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 4
  • 3
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now