SOLVED: [Javascript] Dynamically create & populate a hidden form field...

Fri Aug 2 10:16:26 CDT 2002

	The goal was essentially to produce a generic JavaScript function
that would allow me to use the displayed text of the selected option in a
<select> on the posted page, via ASP's Request.Form collection, without
*manually* defining an additional hidden field for each <select> in the
form.
	Note that this function will work with any number of form
'<select>s'. The only modification you need to make to any form on which you
wish to use this is to specify <form onsubmit="PassSelectOneText(this);">,
or if you already have a form validation routine, simply embed it there.  In
the .asp page the form is posted to, if you retrieve a value from a select
box named "Gobstopper" using 'Request.Form("Gobstopper")', then you now can
retrieve its selected text by using 'Request.Form("GobstopperText")', since
the JavaScript function created it.  This function only works with select
boxes where the 'multiple' keyword is not used, but if a <select multiple>
is in the form, it will not break this function; if anyone wants the version
of this function that works with select types of 'select-one' AND
'select-multiple', simply ask, and I'll mail it to you, or post it to the
list.
	I know very little JavaScript, so don't ask me about browser
compatibility, but my guess is .InnerHTML is the least common denominator
here, so I'd have to guess it works in IE4+, & NN6.  If anyone has
suggestions for improvement, please don't hesitate to let to let me know.
Thanks to the people who responded; you kept me believing it couldn't be
that difficult.
	 

<html>
<head>
<script LANGUAGE="JavaScript">
<!--
function PassSelectOneText(form) {
  for (var i = 0; i < form.elements.length; i++)  {
		if (form.elements[i].type == 'select-one')  {
			GetSelectOneText(form,form.elements[i]);
		}
	}
  function GetSelectOneText(form,selectOne) {
    var text = selectOne.options[selectOne.selectedIndex].text;  
    var exists = false;
    var name = selectOne.name+'Text'
    for (var i = 0; i < form.elements.length; i++)  {
		  if (form.elements[i].name == name)  {
			  exists = true
		  }
	  }
	  if (!exists) {
		  form.innerHTML += '<input type="hidden" name="' + name +
'">'
    }
    form.elements[name].value = text;
  }
}

// -->
</script>
</head>
<body>
<br><br>
<form action="Whatever.asp" method="post"
onsubmit="PassSelectOneText(this);">
  <select name="1To3">
    <option selected value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <select name="4To6">
    <option selected value="4">Four</option>
    <option value="5">Five</option>
    <option value="6">Six</option>
  </select>
  <select name="7To9">
    <option selected value="7">Seven</option>
    <option value="8">Eight</option>
    <option value="9">Nine</option>
  </select>
  <br><br>
  <input type="submit" value="Go!">
</form>
</body>
</html>


In 'Whatever.asp':
<%
Response.Write "1To3 Value: " & Request.Form("1To3") & "<br>"
Response.Write "1To3 Text: " & Request.Form("1To3Text") & "<br>"
Response.Write "4To6 Value: " & Request.Form("4To6") & "<br>"
Response.Write "4To6 Text: " & Request.Form("4To6Text") & "<br>"
Response.Write "7To9 Value: " & Request.Form("7To9") & "<br>"
Response.Write "7To9 Text: " & Request.Form("7To9Text") & "<br>"
%>