gtgloner
asked on
Dynamic drop-down boxes, browse box to select file and send as e-mail attachment
I am trying to code an .htm page which has to display 3 dynamic drop-down boxes in series with each other as well as a browse box with a browse button to select a file. The user is to send the file(s) to me (along with the information in the above mentioned boxes) as an e-mail attachment. Here is the code I have up until now:
<html>
<head>
<meta http-equiv="Content-Langua ge" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor. Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>FPS Element Evidence Submission Page</title>
</head>
<body background="FPS%20Website_ files/back ground_.jp g">
<p align="center">
<img border="0" src="FPS%20Website_files/f ordlogo.jp g" width="140" height="51"></p>
<p align="center"><font size="6" color="#0000FF">FPS Element Evidence Submission
Page</font></p>
<form method="POST" enctype="multipart/form-da ta" action="--WEBBOT-SELF--">
<!--webbot bot="FileUpload" s-label-fields="TRUE" S-Email-Address="ggregor4@ ford.com" S-Email-Format="TEXT/PRE" --><p align="center">
<font color="#0000FF">FPS Element:</font> <select size="1" name="FPS_Element">
<option selected>Select FPS Element:</option>
<option>FTPM</option>
<option>IMF</option>
<option>ISPC</option>
<option>Leadership</option >
<option>ME</option>
<option>SMF</option>
<option>Training</option>
<option>Work Groups</option>
</select><font color="#0000FF"> FPS Category:</font>
<select size="1" name="FPS_Category">
<option selected>Select FPS Cagegory</option>
<option>1.1 Planned Maintenance</option>
<option>1.2 Improving Equipment Effectiveness</option>
</select><font color="#0000FF"> Element #:
<select size="1" name="Element_Number">
<option selected>Select Element #:</option>
<option>1.1.1.1.1</option>
<option>1.1.1.1.2</option>
<option>1.1.1.10</option>
</select> </font></p>
<p align="center"><font color="#0000FF">Department :</font>
<select size="1" name="Department">
<option selected>Select department:</option>
<option>8612-Chem & Met Lab (incl. Quality & Dyno)</option>
<option>8622-Material Handling</option>
<option>8640-Building Services</option>
<option>8643-Tool Management</option>
<option>8650-Cylinder Heads</option>
<option>8656-Connecting Rods</option>
<option>8660-Cylinder Blocks</option>
<option>8665-Crankshafts</ option>
<option>8667-Camshafts</op tion>
<option>8685-Engine Assembly</option>
<option>8618-Building Services - Annex</option>
<option>8643-Tool Management - Annex</option>
<option>8651-Cylinder Head Machining and Assembly - Annex</option>
<option>8658-Connecting Rods - Annex</option>
<option>8668-Crankshafts - Annex</option>
<option>8678-Engine Assembly - Annex</option>
<option>8688-Cylinder Blocks - Annex</option>
</select> <font color="#0000FF">Your evidence file:
<input type="file" name="F1" size="20"></font></p>
<p align="center"> </p>
<p align="center"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
<p align="center"> </p>
</body>
</html>
In this code, the "FPS_Element" drop down has to be a dynamic drop-down box which displays a list of options unique to that choice in the next drop-down, which is the "FPS_Category" box. That one in turn has to display a third set of options in the "Element_Number" box, then after the user selects from the "Department" box (which is not tied into the other three, it is just a drop-down selection box), a selection in the "F1" box to choose a file from the user's local computer has to be sent to me (along with the other information in the drop-down boxes) as an e-mail attachment. This coding is way over my head! How do I code this in html?
<html>
<head>
<meta http-equiv="Content-Langua
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>FPS Element Evidence Submission Page</title>
</head>
<body background="FPS%20Website_
<p align="center">
<img border="0" src="FPS%20Website_files/f
<p align="center"><font size="6" color="#0000FF">FPS Element Evidence Submission
Page</font></p>
<form method="POST" enctype="multipart/form-da
<!--webbot bot="FileUpload" s-label-fields="TRUE" S-Email-Address="ggregor4@
<font color="#0000FF">FPS Element:</font> <select size="1" name="FPS_Element">
<option selected>Select FPS Element:</option>
<option>FTPM</option>
<option>IMF</option>
<option>ISPC</option>
<option>Leadership</option
<option>ME</option>
<option>SMF</option>
<option>Training</option>
<option>Work Groups</option>
</select><font color="#0000FF"> FPS Category:</font>
<select size="1" name="FPS_Category">
<option selected>Select FPS Cagegory</option>
<option>1.1 Planned Maintenance</option>
<option>1.2 Improving Equipment Effectiveness</option>
</select><font color="#0000FF"> Element #:
<select size="1" name="Element_Number">
<option selected>Select Element #:</option>
<option>1.1.1.1.1</option>
<option>1.1.1.1.2</option>
<option>1.1.1.10</option>
</select> </font></p>
<p align="center"><font color="#0000FF">Department
<select size="1" name="Department">
<option selected>Select department:</option>
<option>8612-Chem & Met Lab (incl. Quality & Dyno)</option>
<option>8622-Material Handling</option>
<option>8640-Building Services</option>
<option>8643-Tool Management</option>
<option>8650-Cylinder Heads</option>
<option>8656-Connecting Rods</option>
<option>8660-Cylinder Blocks</option>
<option>8665-Crankshafts</
<option>8667-Camshafts</op
<option>8685-Engine Assembly</option>
<option>8618-Building Services - Annex</option>
<option>8643-Tool Management - Annex</option>
<option>8651-Cylinder Head Machining and Assembly - Annex</option>
<option>8658-Connecting Rods - Annex</option>
<option>8668-Crankshafts - Annex</option>
<option>8678-Engine Assembly - Annex</option>
<option>8688-Cylinder Blocks - Annex</option>
</select> <font color="#0000FF">Your evidence file:
<input type="file" name="F1" size="20"></font></p>
<p align="center"> </p>
<p align="center"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
<p align="center"> </p>
</body>
</html>
In this code, the "FPS_Element" drop down has to be a dynamic drop-down box which displays a list of options unique to that choice in the next drop-down, which is the "FPS_Category" box. That one in turn has to display a third set of options in the "Element_Number" box, then after the user selects from the "Department" box (which is not tied into the other three, it is just a drop-down selection box), a selection in the "F1" box to choose a file from the user's local computer has to be sent to me (along with the other information in the drop-down boxes) as an e-mail attachment. This coding is way over my head! How do I code this in html?
First, you CANNOT attach anything from the client to an email. The USER has to do that.
Second, get rid of FrontPage.
Second, get rid of FrontPage.
tsk tsk, webwoman -- do i detect an individual who has had problems with the nation's number one wysiwyg? :)
Vinny
Vinny
ASKER
To Webwoman:
Hi! I'm back. About your statement regarding not being able to have the client use e-mail to attach anything to this page I am designing, how would I then have a file that was selected through a browse box by the user (from his local computer) transferred to me along with all the other existing information gathered on the page? Here is my existing code:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="Author" content="Vincent Puglia GrassBlade Software">
<meta name="description"
content="A javascript method for dynamically creating cascading selection lists, dropdown menus.">
<meta name="keywords"
content="html,dhtml,java,j avascript, free,scrip t,cut& paste,sele cts,select ion list,dropdowns,cascading,3 d,variable ,forms,dat abase,The Learning Curve,Snip-Its,'I,Object', source,fil e,programm ing,code,t utorials,c ombo box,free scripts,GrassBlade,">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<title>GrassBlade: Cascading Selects 2</title>
</head>
<body background="FPS%20Website_ files/back ground_.jp g">
<script language="javascript" src="../funcs/funcs.js"></ script><sc ript
language="javascript">
<!--
selList1a = new Array("FTPM (click arrow for FPS categories)", "", "1.1 Planned Maintenance","selList1aa", "1.2 Improving Equipment Effectiveness", "selList1ab");
selList1b = new Array("IMF (click arrow for IMF categories)", "", "6.1 MFS-Supplying/Industrial Materials","selList1ba", "6.2 MFS-Requisitioning Systems", "selList1bb");
selList1c = new Array("ISPC (click arrow for ISPC categories)", "", "3.1 QPS Deployment","selList1ca", "3.2 QPS OIS sheets", "selList1cb");
selList1d = new Array("Leadership (click arrow for Leadership categories)", "", "9.1 Planning","selList1da", "9.2 Involvement, Commitment & Support", "selList1db");
selList1e = new Array("ME (click arrow for ME categories)", "", "4.1 Lean Mfg. Concepts","selList1ea", "4.2 Project Review", "selList1eb");
selList1f = new Array("SMF (click arrow for SMF categories)", "", "10.1 Personnel, Planning & Support","selList1fa", "10.2 Continuous Improvement", "selList1fb");
selList1g = new Array("Training (click arrow for Training categories)", "", "2.1 Training Needs Analysis","selList1ga", "2.2 Training Plan", "selList1gb");
selList1h = new Array("Work Groups (click arrow for Work Groups categories)", "", "8.1 Overall Work Group Effeciveness","selList1ha" , "8.2 Structure", "selList1hb");
selList1aa = new Array("1.1.1.1.1", "", "1.1.1.1.2", "", "1.1.1.2", "", "1.1.1.3", "", "1.1.1.4", "", "1.1.1.5", "");
selList1ab = new Array("1.2.1", "", "1.2.2", "", "1.2.3.1", "", "1.2.3.2", "", "1.2.3.3", "");
selList1ba = new Array("6.1.1","","6.1.2", "", "6.1.3", "", "6.1.4", "");
selList1bb = new Array("6.2.1","","6.2.2", "");
selList1ca = new Array("3.1.1.1","","3.1.1. 2", "");
selList1cb = new Array("3.2.1","","3.2.2.1" , "");
selList1da = new Array("9.1.1","","9.1.2.1" , "");
selList1db = new Array("9.2.1.1","","9.2.1. 2", "");
selList1ea = new Array("4.1.1","","4.1.2", "");
selList1eb = new Array("4.2.1","","4.2.2", "");
selList1fa = new Array("10.1.1","","10.1.2" , "");
selList1fb = new Array("10.2.1","","10.2.2" , "");
selList1ga = new Array("2.1.1","","2.1.2", "");
selList1gb = new Array("2.2.1","","2.2.2", "");
selList1ha = new Array("8.1.1","","8.1.2", "");
selList1hb = new Array("8.2.1","","8.2.2.1" , "");
function fillSel(selObj)
{
var destList = (selObj.name == "Element") ? "Category" : "Number";
var i = j = 0;
var newItem;
var src;
var srcName = "";
for (i = 0; i < selObj.length; i++)
if (selObj.options[i].selecte d)
srcName = selObj.options[i].value;
if (srcName == "") return;
src = eval(srcName);
var dest = eval("document.cascade." + destList);
with (dest)
{
options.length = 0;
for (i = 0; i < src.length; i++)
{
newItem = options.length;
options[newItem] = new Option(src[i]);
options[newItem].value = src[i+1];
i++;
}
options[0].selected = true;
}
<!--webbot bot="PurpleText" PREVIEW="if (!isOk) history.go(0);" -->
}
//--> end hide JavaScript
</script>
<p align="center">
<img border="0" src="FPS%20Website_files/f ordlogo.jp g" width="140" height="51"></p>
<p align="center"><font size="6" color="#0000FF">FPS Element Evidence Submission
Page</font></p>
<td> </td>
<td> <form method="POST" name="cascade">
<tr>
<td align="center" width="36%">
<p align="center">
<font color="#0000FF">Element:&n bsp; </font>
<select
name="Element" size="1" onchange="fillSel(this)">
<option selected>-- Select FPS Element --</option>
<option value="selList1a">FTPM</op tion>
<option value="selList1b">IMF</opt ion>
<option value="selList1c">ISPC</op tion>
<option value="selList1d">Leadersh ip</option >
<option value="selList1e">ME</opti on>
<option value="selList1f">SMF</opt ion>
<option value="selList1g">Training </option>
<option value="selList1h">Work Groups</option>
</select></td> <font color="#0000FF"> Category:</font>
<td align="center" width="164%">
<select
name="Category" size="1" onchange="fillSel(this)">
<option selected>-- Select FPS Category --</option>
</select> <font color="#0000FF">Element #:</font> </td>
<td align="center" width="100%">
<select
name="Number" size="1">
<option selected>-- Select Element # --</option>
</select> </td>
</tr>
</table>
</center></div>
</p>
<p align="center"><font color="#0000FF">Department :</font>
<select size="1" name="Department">
<option selected>Select department:</option>
<option>8612-Chem & Met Lab (incl. Quality & Dyno)</option>
<option>8622-Material Handling</option>
<option>8640-Building Services</option>
<option>8643-Tool Management</option>
<option>8650-Cylinder Heads</option>
<option>8656-Connecting Rods</option>
<option>8660-Cylinder Blocks</option>
<option>8665-Crankshafts</ option>
<option>8667-Camshafts</op tion>
<option>8685-Engine Assembly</option>
<option>8618-Building Services - Annex</option>
<option>8643-Tool Management - Annex</option>
<option>8651-Cylinder Head Machining and Assembly - Annex</option>
<option>8658-Connecting Rods - Annex</option>
<option>8668-Crankshafts - Annex</option>
<option>8678-Engine Assembly - Annex</option>
<option>8688-Cylinder Blocks - Annex</option>
</select> <font color="#0000FF">Your evidence file:
<input type="file" name="F1" size="20"></font></p>
<p align="center"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
<p><br>
</p>
</td>
<td> </td>
</tr>
</table>
</center></div>
</body>
</html>
Hi! I'm back. About your statement regarding not being able to have the client use e-mail to attach anything to this page I am designing, how would I then have a file that was selected through a browse box by the user (from his local computer) transferred to me along with all the other existing information gathered on the page? Here is my existing code:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="Author" content="Vincent Puglia GrassBlade Software">
<meta name="description"
content="A javascript method for dynamically creating cascading selection lists, dropdown menus.">
<meta name="keywords"
content="html,dhtml,java,j
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<title>GrassBlade: Cascading Selects 2</title>
</head>
<body background="FPS%20Website_
<script language="javascript" src="../funcs/funcs.js"></
language="javascript">
<!--
selList1a = new Array("FTPM (click arrow for FPS categories)", "", "1.1 Planned Maintenance","selList1aa",
selList1b = new Array("IMF (click arrow for IMF categories)", "", "6.1 MFS-Supplying/Industrial Materials","selList1ba", "6.2 MFS-Requisitioning Systems", "selList1bb");
selList1c = new Array("ISPC (click arrow for ISPC categories)", "", "3.1 QPS Deployment","selList1ca", "3.2 QPS OIS sheets", "selList1cb");
selList1d = new Array("Leadership (click arrow for Leadership categories)", "", "9.1 Planning","selList1da", "9.2 Involvement, Commitment & Support", "selList1db");
selList1e = new Array("ME (click arrow for ME categories)", "", "4.1 Lean Mfg. Concepts","selList1ea", "4.2 Project Review", "selList1eb");
selList1f = new Array("SMF (click arrow for SMF categories)", "", "10.1 Personnel, Planning & Support","selList1fa", "10.2 Continuous Improvement", "selList1fb");
selList1g = new Array("Training (click arrow for Training categories)", "", "2.1 Training Needs Analysis","selList1ga", "2.2 Training Plan", "selList1gb");
selList1h = new Array("Work Groups (click arrow for Work Groups categories)", "", "8.1 Overall Work Group Effeciveness","selList1ha"
selList1aa = new Array("1.1.1.1.1", "", "1.1.1.1.2", "", "1.1.1.2", "", "1.1.1.3", "", "1.1.1.4", "", "1.1.1.5", "");
selList1ab = new Array("1.2.1", "", "1.2.2", "", "1.2.3.1", "", "1.2.3.2", "", "1.2.3.3", "");
selList1ba = new Array("6.1.1","","6.1.2", "", "6.1.3", "", "6.1.4", "");
selList1bb = new Array("6.2.1","","6.2.2", "");
selList1ca = new Array("3.1.1.1","","3.1.1.
selList1cb = new Array("3.2.1","","3.2.2.1"
selList1da = new Array("9.1.1","","9.1.2.1"
selList1db = new Array("9.2.1.1","","9.2.1.
selList1ea = new Array("4.1.1","","4.1.2", "");
selList1eb = new Array("4.2.1","","4.2.2", "");
selList1fa = new Array("10.1.1","","10.1.2"
selList1fb = new Array("10.2.1","","10.2.2"
selList1ga = new Array("2.1.1","","2.1.2", "");
selList1gb = new Array("2.2.1","","2.2.2", "");
selList1ha = new Array("8.1.1","","8.1.2", "");
selList1hb = new Array("8.2.1","","8.2.2.1"
function fillSel(selObj)
{
var destList = (selObj.name == "Element") ? "Category" : "Number";
var i = j = 0;
var newItem;
var src;
var srcName = "";
for (i = 0; i < selObj.length; i++)
if (selObj.options[i].selecte
srcName = selObj.options[i].value;
if (srcName == "") return;
src = eval(srcName);
var dest = eval("document.cascade." + destList);
with (dest)
{
options.length = 0;
for (i = 0; i < src.length; i++)
{
newItem = options.length;
options[newItem] = new Option(src[i]);
options[newItem].value = src[i+1];
i++;
}
options[0].selected = true;
}
<!--webbot bot="PurpleText" PREVIEW="if (!isOk) history.go(0);" -->
}
//--> end hide JavaScript
</script>
<p align="center">
<img border="0" src="FPS%20Website_files/f
<p align="center"><font size="6" color="#0000FF">FPS Element Evidence Submission
Page</font></p>
<td> </td>
<td> <form method="POST" name="cascade">
<tr>
<td align="center" width="36%">
<p align="center">
<font color="#0000FF">Element:&n
<select
name="Element" size="1" onchange="fillSel(this)">
<option selected>-- Select FPS Element --</option>
<option value="selList1a">FTPM</op
<option value="selList1b">IMF</opt
<option value="selList1c">ISPC</op
<option value="selList1d">Leadersh
<option value="selList1e">ME</opti
<option value="selList1f">SMF</opt
<option value="selList1g">Training
<option value="selList1h">Work Groups</option>
</select></td> <font color="#0000FF"> Category:</font>
<td align="center" width="164%">
<select
name="Category" size="1" onchange="fillSel(this)">
<option selected>-- Select FPS Category --</option>
</select> <font color="#0000FF">Element #:</font> </td>
<td align="center" width="100%">
<select
name="Number" size="1">
<option selected>-- Select Element # --</option>
</select> </td>
</tr>
</table>
</center></div>
</p>
<p align="center"><font color="#0000FF">Department
<select size="1" name="Department">
<option selected>Select department:</option>
<option>8612-Chem & Met Lab (incl. Quality & Dyno)</option>
<option>8622-Material Handling</option>
<option>8640-Building Services</option>
<option>8643-Tool Management</option>
<option>8650-Cylinder Heads</option>
<option>8656-Connecting Rods</option>
<option>8660-Cylinder Blocks</option>
<option>8665-Crankshafts</
<option>8667-Camshafts</op
<option>8685-Engine Assembly</option>
<option>8618-Building Services - Annex</option>
<option>8643-Tool Management - Annex</option>
<option>8651-Cylinder Head Machining and Assembly - Annex</option>
<option>8658-Connecting Rods - Annex</option>
<option>8668-Crankshafts - Annex</option>
<option>8678-Engine Assembly - Annex</option>
<option>8688-Cylinder Blocks - Annex</option>
</select> <font color="#0000FF">Your evidence file:
<input type="file" name="F1" size="20"></font></p>
<p align="center"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
<p><br>
</p>
</td>
<td> </td>
</tr>
</table>
</center></div>
</body>
</html>
Hi gtgloner,
Do you have cgi? Posting to your server is the best alternative. If you cannot do any server-side processing, check with:
http://www.cgi-resources.com
for a service that will allow you to use one of their apps.
Also, please do me a favor and change the following lines:
// change this: src = eval(srcName); to:
src = window[srcName];
//change this: var dest = eval("document.cascade." + destList); to:
var dest = document.cascade[destList] ;
the code was written awhile ago (and I haven't had the time to change it online)
Vinny
Do you have cgi? Posting to your server is the best alternative. If you cannot do any server-side processing, check with:
http://www.cgi-resources.com
for a service that will allow you to use one of their apps.
Also, please do me a favor and change the following lines:
// change this: src = eval(srcName); to:
src = window[srcName];
//change this: var dest = eval("document.cascade." + destList); to:
var dest = document.cascade[destList]
the code was written awhile ago (and I haven't had the time to change it online)
Vinny
ASKER
Vinny:
No, I am not using cgi scripting, I have been using .asp programming incorporated with html and Access databases to run surveys through a corporate LAN network. I don't think I can have a file downloaded to me from the user in this manner, however. That is what I am tryng to write into the code for the submit button at the bottom of the page.
No, I am not using cgi scripting, I have been using .asp programming incorporated with html and Access databases to run surveys through a corporate LAN network. I don't think I can have a file downloaded to me from the user in this manner, however. That is what I am tryng to write into the code for the submit button at the bottom of the page.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Vinny:
OK, I'll award you the points here and take the question from here to the .asp page on this site.
OK, I'll award you the points here and take the question from here to the .asp page on this site.
insofar are the 'dynamic' selects, see the 'cascading selects' scripts/tutorials at my GrassBlade site: http://members.aol.com/grassblad
or the script at: http://members.aol.com/grassblad/cascade3.html