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

Wed Jul 31 15:46:44 CDT 2002

Question (regarding code at bottom):  How can I modify the GetSBText
function, so that I can omit the hidden field definition in the html?  I
want to omit this line:  <input name="SBoxText" type="hidden">

Goal:  In addition to what the function already does, I want it to use the
reference to take the name of the element ('SBox' in this case), always
concatenate 'Text' to the name ('SBoxText'), and create & populate a hidden
form field with that name. If a selects something, changes their mind and
selects something else, then it shouldn't attempt to recreate the field, but
rather, only populate it.

Reason:  The reason I'm wanting to do this, is so the actual text selected
is also available in the (ASP) Request object on the page it's posting to.
The reason I chose to use the <select> onchange event rather than the <form>
onsubmit event, is because I felt it would be easier to get a truly generic
function, that could be used for any <select>, or multiple "<select>s" on a
form by simply putting 'onchange="GetSBText(this); return true;"' on each
select.  The reason behind that is because I'm really passing a recordset to
a VBScript function that creates the html, as well, so if I want the
"<option>'s" displayed value to be in the next page's request object, I can
simply trigger it on/off by setting a boolean parm to the VBScript function,
so it knows whether to include 'onchange="GetSBText(this); return true;"'
in the html or not.

Again, my question is:  How can I modify the GetSBText function, so that I
can omit the hidden field definition in the html?

<html>
<head>
<script LANGUAGE="JavaScript">
<!--
function GetSBText(eRef) {
  //
  temp = eRef.options[eRef.selectedIndex].text;
  document.all['SBoxText'].value = temp;
}
-->
</script>
</head>
<body>
<br><br>
<form action="Whatever.asp" method="post">
  <select name="SBox" onchange="GetSBText(this); return true;">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <br><br>
  <input name="SBoxText" type="hidden">
  <input type="submit" value="Go!">
</form>
</body>
</html>