Javascript replace "other" value with input from text field

I have the following form that I am working on...

When a user choses an option from a radio group a div is displayed with a multiple selection list. If one of those selections is "other" a text box is dislayed allowing the user to input the information.

How do I get the form to return the selections from the multiple selection list while replacing the "other" value with the value of the text input field??

I'vespent countless hours searching google and this website and while I've found some similar solutions, none are for multiple selections and none fit my needs.

This is what I have so far for the form:

<form method="post" action="send_email.asp"  onsubmit="return Form_Validator (this)" 
  name="form2" id="form2" >
<tr>
<td>Product Type: <br />
<input name="ProductType" type="radio" value="Network" tabindex="1"
 onclick="setVisibility('NetworkProducts','inline'); setVisibility
('CPEProducts','none');"/>
        Network<br />
<input name="ProductType" type="radio" value="Network and CPE" tabindex="2"
 onclick="setVisibility('NetworkProducts','inline'); setVisibility
('CPEProducts','inline');"/>
        Network and CPE<br />
<input name="ProductType" type="radio" value="CPE Only" tabindex="3" 
onclick="setVisibility('NetworkProducts','none'); setVisibility
('CPEProducts','inline');"/>
        CPE Only<br/>

<div id="NetworkProducts" align="left">
        Network Product Sold <span class="style2">*</span> 
        <select name="NetProductSold" size="3" multiple="MULTIPLE"
 id="NetProductSold" onchange="showothernet(this.form);">
            <option value="Prod1">Prod1</option>
            <option value="Prod2">Prod2</option>
            <option value="Prod3">Prod3</option>
            <option value="Prod4">Prod4</option>
            <option value="Prod5">Prod5</option>
            <option value="Prod6">Prod6</option>
            <option value="Prod7">Prod7</option>
            <option value="Prod8">Prod8</option>
            <option value="Prod9">Prod9</option>
            <option value="Prod10">Prod10</option>
            <option value="Other">Other</option>            
            </select> 


      &l开发者_如何学Got;/div>

      <blockquote>
      <div id="OtherNetworkProducts" align="left" >
        If other, Please specify: <input name="OtherNetProductSold"
 type="text" id="OtherNetProductSold" size="50" onblur="setFocus(this);" >
          </div>
          </blockquote>

      <div id="CPEProducts" align="left">
      CPE Product Sold <span class="style2">*</span> 
      <select name="CPEProductSold" size="3" multiple="multiple"
 id="CPEProductSold" onchange="showothernet(this.form);" >
        <option value="CPE1">CPE1</option>
        <option value="CPE2">CPE2</option>
        <option value="CPE3">CPE3</option>
        <option value="CPE4">CPE4</option>
        <option value="CPE5">CPE5</option>
        <option value="CPE6">CPE6</option>
        <option value="CPE7">CPE7</option>
        <option value="Other">Other</option>
      </select>


      </div>    
      <blockquote>
      <div id="OtherCPEProducts">
    If other, Please specify: <input name="OtherCPEProductSold" type="text"
id="OtherCPEProductSold" size="50" >

          </div>
      </blockquote> 
</form>

And this is what I have for the javascript:

<script Language="JavaScript"><!--


function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
function showothernet (form) 
{
for (var j = 0; j < form.NetProductSold.length; j++) 
{
    if (form.NetProductSold.options[j].selected) 
    {
        if(form.NetProductSold.options[j].value == "Other") 
            {
            setVisibility('OtherNetworkProducts','inline');

            }
        else 
            {
            setVisibility('OtherNetworkProducts','none');
            }
    }

}

for (var i = 0; i < form.CPEProductSold.length; i++) 
{
    if (form.CPEProductSold.options[i].selected) 
    {
        if(form.CPEProductSold.options[i].value == "Other") 
        {
            setVisibility('OtherCPEProducts','inline');
        }
        else 
        {
            setVisibility('OtherCPEProducts','none');
        }
    }
}
}


function setFocus(form)
{
var process = form.OtherNetProductSold.value;
form.NetProductSold.options[10].value = process
alert (form.NetProductSold.options[10].value);
}
//--></script>

The form functions the way I want it to, when the user clicks "Network" or "Network and CPE" and list appears for the Network products, then if the "other" option is one of the selected options, the text field for other is displayed.

The problem is how to replace that "other" value from the multiple selection with the input from the text field.

PLEASE HELP!

Thanks in advance!

---

The text showed to the user is between <option> and </option>. So, set it as .innerHTML instead (it changes the text between):

form.NetProductSold.options[10].innerHTML = process;

Secondly, you have:

<input name="OtherNetProductSold"
type="text" id="OtherNetProductSold" size="50" onblur="setFocus(this);" >

while your setFocus accepts a form. So, setFocus(this.form) you should use.

http://jsfiddle.net/pimvdb/nMkvb/