2011-08-05 7 views
0

テキストフィールドからの入力に値...ユーザーはdiv要素が複数の選択リストに表示されているラジオ・グループからオプションをchosesが 「その他」私は私が次の形式を働いている

。これらの選択肢の1つが「その他」である場合、テキストボックスが表示され、ユーザは情報を入力することができる。

「他の」値をテキスト入力フィールドの値に置き換えながら、フォームを複数選択リストから返すようにするにはどうすればよいですか?

グーグルとこのウェブサイトを検索するのに無限の時間を費やしています。同様の解決策を見つけても、複数の選択肢はありません。

これは私がフォームのために、これまで持っているものです。

<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」をクリックし、ネットワーク製品のリストが表示され、「その他」オプションが選択されたオプションの1つであれば、他のテキストフィールドが表示されます。

問題は、複数選択の「その他の」値をテキストフィールドの入力と置き換える方法です。

お願いします!

ありがとうございます!

答えて

0

ユーザに示されたテキストは、<option></option>の間です。だから、(それは間のテキストを変更する)代わりに.innerHTMLように設定します。

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

を第二に、あなたが持っている:あなたのsetFocusフォームを受け入れる

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

ながら。したがって、setFocus(this.form)を使用する必要があります。

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

+0

ありがとう!それはオプションフィールドのテキストを変更しますが、オプションフィールドに入力されている値に "Other"から値を変更したかったのです。フォームが送信されると、ユーザーが「Prod1」、「prod2」、および「other」を選択すると、値は「Prod1、Prod2、TextfromField」になります。 – chynawhyte

関連する問題