Q1719 How can I populate a list of text form fields from the selected options in a multiple select list?

You are here: irt.org | FAQ | JavaScript | Form | Q1719 [ previous next ]

Try:

<html>

<head>

<script language="JavaScript"><!--
function clicked(form) {
  for (var i=0, j=0; i < form.selectName.options.length; i++) {
    if (form.selectName.options[i].selected) {
      form.elements['currentText' + j].value = form.selectName.options[i].text;
      form.elements['currentValue' + j].value = form.selectName.options[i].value;
      j++;
    }
  }
}
//--></script>

</head>

<body>

<form name="formName1" onSubmit="return false;">
<select name="selectName" multiple>
<option value="option 0">entry 0
<option value="option 1">entry 1
<option value="option 2">entry 2
<option value="option 3">entry 3
<option value="option 4">entry 4
<option value="option 5">entry 5
</select>
<input type="submit" value="Enter" onClick="clicked(this.form);return false;">
<input type="reset" value="clear">

<p>
Select items from the above menu, then press enter.
The following boxes will display your choices:
</p>

<p>
<input name="currentText0" type="text" value="">
<input name="currentValue0" type="text" value="">
<br>
<input name="currentText1" type="text" value="">
<input name="currentValue1" type="text" value="">
<br>
<input name="currentText2" type="text" value="">
<input name="currentValue2" type="text" value="">
<br>
<input name="currentText3" type="text" value="">
<input name="currentValue3" type="text" value="">
<br>
<input name="currentText4" type="text" value="">
<input name="currentValue4" type="text" value="">
<br>
<input name="currentText5" type="text" value="">
<input name="currentValue5" type="text" value="">
</form>

</body>

</html>