b6106b
asked on
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
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
ASKER
yes...it has to work on all browsers.
AFAIK there is no way to do it in netscape. It does not support the visibility attribute on form elements.
Cd&
Cd&
Here is a workaround for you:
<html>
<head>
<script language="javascript">
<!--
function showHideLayer(selectObj){
if (selectObj.selectedIndex == 1){
if (document.all){
document.all.mainLayer.sty
}
else{
document.layers.nnLayer.vi
}
}
else{
if (document.all){
document.all.mainLayer.sty
}
else{
document.layers.nnLayer.vi
}
}
}
function getValues(formObj){
var dummy1Obj = document.forms["dummy1"];
var dummy2Obj;
if(document.all){
dummy2Obj = document.forms["dummy2"];
}
else{
dummy2Obj = document.layers["nnLayer"]
}
formObj.fieldA.value = dummy1Obj.fieldA.value;
formObj.fieldB.value = dummy1Obj.fieldB.options[d
formObj.fieldC.value = dummy2Obj.fieldC.value;
formObj.fieldD.value = dummy2Obj.fieldD.options[d
document.forms["actualFrm"
}
//-->
</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(th
<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</optio
<option value="Banana">Banana</opt
<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(documen
</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
<html>
<head>
<script language="javascript">
<!--
function showHideLayer(selectObj){
if (selectObj.selectedIndex == 1){
if (document.all){
document.all.mainLayer.sty
}
else{
document.layers.nnLayer.vi
}
}
else{
if (document.all){
document.all.mainLayer.sty
}
else{
document.layers.nnLayer.vi
}
}
}
function getValues(formObj){
var dummy1Obj = document.forms["dummy1"];
var dummy2Obj;
if(document.all){
dummy2Obj = document.forms["dummy2"];
}
else{
dummy2Obj = document.layers["nnLayer"]
}
formObj.fieldA.value = dummy1Obj.fieldA.value;
formObj.fieldB.value = dummy1Obj.fieldB.options[d
formObj.fieldC.value = dummy2Obj.fieldC.value;
formObj.fieldD.value = dummy2Obj.fieldD.options[d
document.forms["actualFrm"
}
//-->
</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(th
<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</optio
<option value="Banana">Banana</opt
<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(documen
</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
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
http://www.isolani.co.uk/newbie/mailto.html
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
>>>The whole form gets mailed by way of a pearl mailform script.
:o)
Ant
ASKER
Thanks...we'll give it a try.
Hmmm... B looks a little low considering the difficult of the probelm and the detal of the solution. IMHO
Cd&
Cd&
I was thinking the same......oh well....
:o\
Ant
:o\
Ant
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['di
HTH
Cd&