Question

<form method="post" name="test" id="test">
<input type="hidden" name="listname" value="qpaustin" />
<select name="customCity" id="customCity" onchange="javascript:onChangeHiddenValue(this.value);"> 
<option value="qpneworleans" >qpneworleans</option>
<option selected="selected" id="listSelectionActiveOption" value="qpnewyork" >qpnewyork</option>
<option value="qporangecounty">qporangecounty</option>
<option value="qporlando">qporlando</option>
</select>
</form>
<script type="text/javascript">
function onChangeHiddenValue(cityName)
{

    alert(document.getElementById('customCity').value);

}
</script>

I need to change the hidden value “listname” dynamically using javascript.

For example, currently the value of listname is qpaustin. But when i change the value to qpneworleans the “listname” value should be replaced to qpneworleans .

How to do this.

Kindly advice. Thanks in advance

Answer 1

A few comments:

1. The onchange event should be bound to the select element, no to the options.
2. Give your form a name, that will make the programmatic access easier, e.g. document.forms['formName']

For example:

<form method="post" name="form1">
  <input type="hidden" name="listname" value="qpaustin" />
  <select name="customCity" onchange="onChangeHiddenValue(this.value);"> 
    <option value="qpneworleans">qpneworleans</option>
    <option selected="selected" value="qpnewyork">qpnewyork</option>
    <option value="qporangecounty">qporangecounty</option>
    <option value="qporlando" >qporlando</option>
  </select>
</form>

<script type="text/javascript">
function onChangeHiddenValue(cityName) {
  // DOM2 standard way to access forms and elements
  document.forms['form1'].elements['listname'].value = cityName;
}
</script>

Check the above example here.