2011-08-05 73 views
0

我有我的工作,下面的表格......的Javascript替換「其他」從文本字段中輸入值

當用戶從一個div顯示有多個選擇列表中的單選按鈕組的動產的選項。如果其中一個選擇是「其他」,則顯示一個文本框,允許用戶輸入信息。

如何使用文本輸入字段的值替換「其他」值時,如何從多選列表中返回選擇?

我無盡的工作時間搜索谷歌和本網站,雖然我找到了一些類似的解決方案,但沒有一個是多選,沒有符合我的需求。

這是我迄今爲止的形式:

<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> 


     </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> 

而這就是我對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> 

形式的功能,我希望它的方式,當用戶點擊「網絡」或「網絡和CPE」,網絡產品將顯示列表,如果「其他」選項是其中一個選項,則顯示其他文本字段。

問題是如何用多重選擇中的「其他」值替換爲來自文本字段的輸入。

請幫助!

在此先感謝!

回答

0

顯示給用戶的文字在<option></option>之間。所以,將其設置爲.innerHTML,而不是(它的變化之間的文本):

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

其次,你必須:

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

,而你的setFocus接受的形式。所以,你應該使用setFocus(this.form)

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

+0

謝謝!這會更改選項字段中的文本,但是,我想將值從「其他」更改爲在選項字段中輸入的值。這樣,當表單被提交時,如果用戶選擇「Prod1」,「prod2」和「其他」,則該值將是「Prod1,Prod2,TextfromField」 – chynawhyte

相關問題