選択オプションが値を取得しない

Question

職業などのドロップダウンリストがあり、ユーザーがオプション「その他」をクリックすると、テキストボックスが表示され、ユーザーは職業を指定する必要があります。ユーザーが「その他」を選択して職業を入力する部分は入力内容を保存しますが、ユーザーがドロップダウンリストを選択または選択するときには、フォームを送信すると値が記録されません。

選択オプションの値はどのように取得されますか？ユーザーが「その他」を選択して職業を入力したときのみ値を取得するためです。ここに私のコードです。

function CheckOccupation(val){ 
 
var element=document.getElementById('occupation'); 
 
if(val=='Other') 
 
    element.style.display='block'; 
 
else 
 
    element.style.display='none'; 
 
}

<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'> 
 
\t <option> Select Occupation</option> 
 
\t <option> Lawyer </option> 
 
\t <option> Nurse </option> 
 
\t <option> Lawyer </option> 
 
\t <option> Teacher </option> 
 
\t <option> Programmer </option> 
 
\t <option> Accountant </option> 
 
\t <option> Other </option> 
 
</select> 
 

 
<input type="text" name="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/>

Answer 1

私はあなたのためのplunker：Plunker link

var要素を使用しないでください。

Answer 2

<option>要素の内容が自動的にその価値はありません。 value属性を指定する必要があります。

function CheckOccupation(val){ 
 
var element=document.getElementById('occupation'); 
 
if(val=='Other') 
 
    element.style.display='block'; 
 
else 
 
    element.style.display='none'; 
 
}

<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'> 
 
\t <option> Select Occupation</option> 
 
\t <option> Lawyer </option> 
 
\t <option> Nurse </option> 
 
\t <option> Lawyer </option> 
 
\t <option> Teacher </option> 
 
\t <option> Programmer </option> 
 
\t <option> Accountant </option> 
 
\t <option value="Other"> Other </option> 
 
</select> 
 

 
<input type="text" name="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/>

Answer 3

私はあなたがオプションタグ内でいくつかの値を指定する必要かもしれないと思います。これを試してみてください ：

<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'> 
 
\t <option value="select"> Select Occupation</option> 
 
\t <option value="lawyer"> Lawyer </option> 
 
\t <option value="nurse"> Nurse </option> 
 
\t <option value="lawyer"> Lawyer </option> 
 
\t <option value="teacher"> Teacher </option> 
 
\t <option value="programmer"> Programmer </option> 
 
\t <option value="accountant"> Accountant </option> 
 
\t <option> Other </option> 
 
</select>

Answer 4

あなたは、両方のフィールドの名前= "職業" を設定しています。両方に異なる名前を使用してみてください。あなたのオプションフィールドのvalue属性を設定し、また、フィールド

JS

function CheckOccupation(val){ 
var element=document.getElementById('occupation'); 
if(val==='Other') 
    element.style.display='block'; 
else 
    element.style.display='none'; 
} 

HTML

<select class="form-control" name="occupation1" onchange='CheckOccupation(this.value);'> 
    <option> Select Occupation</option> 
    <option value="Lawyer"> Lawyer </option> 
    <option value="Nurse"> Nurse </option> 
    <option value="Lawyer"> Lawyer </option> 
    <option value="Teacher"> Teacher </option> 
    <option value="Programmer"> Programmer </option> 
    <option value="Accountant"> Accountant </option> 
    <option value="Other"> Other </option> 
</select> 

<input type="text" name="occupation2" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/> 

Answer 5

これを参照してください。両方に別の名前を提供

<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'> 

<input type="text" name="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/> 

Answer 6

これは動作するはずです：

function CheckOccupation(selectedType){ 
 
    if (selectedType == 'Other'){ 
 
\t \t document.getElementById('occupation').style.display = 'block'; 
 
    
 
\t } else{ 
 
\t \t document.getElementById('occupation').style.display = 'none'; 
 
    
 
\t } 
 
}

<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'> 
 
\t <option> Select Occupation</option> 
 
\t <option value="Lawyer"> Lawyer </option> 
 
\t <option value="Nurse"> Nurse </option> 
 
\t <option value="Teacher"> Teacher </option> 
 
\t <option value="Programmer"> Programmer </option> 
 
\t <option value="Accountant"> Accountant </option> 
 
\t <option value="Other"> Other </option> 
 
</select> 
 

 
<input type="text" name="occupation_other" id="occupation" class="form-control" placeholder="please specify" style='display:none;'/>

Answer 7

問題は、あなたが選択（職業）と命名し、その後、それらは同じで送ることができませんでした

入力（職業）という名前のことです、ためeventを代入してみそれらのいずれか1

Answer 8

を変更するには、名前みてくださいパラメータとしてをCheckOccupationに渡します。 value属性を含むoption要素; "other"に#occupationでname値を変更します。また、[値]属性が設定されていない質問で `html`で.innerHTML"Lawyer"

<script> 
 
    function CheckOccupation(event) { 
 
    var val = event.target.value; 
 
    var element = document.getElementById("occupation"); 
 
    if (val == "Other") 
 
     element.style.display = "block"; 
 
    else 
 
     element.style.display = "none"; 
 
    console.log(val) 
 
    } 
 
</script> 
 

 
<select class="form-control" name="occupation" onchange='CheckOccupation(event);'> 
 
    <option>Select Occupation</option> 
 
    <option value="Lawyer">Lawyer</option> 
 
    <option value="Nurse">Nurse</option> 
 
    <option value="Teacher">Teacher</option> 
 
    <option value="Programmer">Programmer</option> 
 
    <option value="Accountant">Accountant</option> 
 
    <option value="Other">Other</option> 
 
</select> 
 

 
<input type="text" name="other" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;' />