Выберите вариант не получает значение

У меня есть раскрывающийся список, например, профессий, и когда пользователь нажимает кнопку «Другое», появляется текстовое поле, и пользователю нужно будет указать свою профессию. Часть, где пользователь выбирает «Другое» и вводит свою профессию, работает, она сохраняет то, что он вводит, но когда пользователь собирается просто выбрать или выбрать из раскрывающегося списка, значение не записывается, когда я отправляю форму.

Как получить значение из опции выбора? Потому что я получаю значение только тогда, когда пользователь выбирает «Другое» и вводит свое занятие. Вот мой код.

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);'>
	<option> Select Occupation</option>
	<option> Lawyer </option>
	<option> Nurse </option>
	<option> Lawyer </option>
	<option> Teacher </option>
	<option> Programmer </option>
	<option> Accountant </option>
	<option> Other </option>
</select>

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


javascript html html-select
person James    schedule 25.04.2016    source источник
comment
option элементы в html в вопросе не имеют установленного атрибута value?   -  person guest271314    schedule 25.04.2016
comment
Кстати, вы используете одно и то же имя для двух элементов. Их лучше поменять   -  person Mojtaba    schedule 25.04.2016
comment
Я также пробовал <option value="Nurse">Nurse</option>, но все тот же @guest271314   -  person James    schedule 25.04.2016
comment
Что ты имеешь в виду? @AlexChar   -  person James    schedule 25.04.2016
comment
Здесь вы можете найти ответ на свой вопрос: введите здесь описание ссылки   -  person praguan    schedule 25.04.2016
comment
изменить другое имя ввода между двумя элементами выбора или текста   -  person user5200704    schedule 25.04.2016

Ответы (8)


arrow_upward
0
arrow_downward

Установите атрибут значения для полей параметров, а также укажите разные имена для обоих полей.

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;'/>
person Shubham Khatri    schedule 25.04.2016

arrow_upward
0
arrow_downward

Содержимое элемента <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);'>
	<option> Select Occupation</option>
	<option> Lawyer </option>
	<option> Nurse </option>
	<option> Lawyer </option>
	<option> Teacher </option>
	<option> Programmer </option>
	<option> Accountant </option>
	<option value="Other"> Other </option>
</select>

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

person user3297291    schedule 25.04.2016
comment
Я делал это раньше, но все равно. - person James; 25.04.2016
comment
Вам все еще нужно включить значение ввода в отправку формы. Вы не можете присвоить ему тот же атрибут name. - person user3297291; 25.04.2016

arrow_upward
0
arrow_downward

Я думаю, вам может понадобиться указать какое-то значение в теге option. Попробуй это:

<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'>
	<option value="select"> 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> Other </option>
</select>

person rubentd    schedule 25.04.2016
comment
Я тоже делал это раньше, но это все еще не решило мою проблему. - person James; 25.04.2016

arrow_upward
0
arrow_downward

Вы установили name="occupation" для обоих полей. Попробуйте использовать разные имена для обоих .

<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;'/>
person Atul Sharma    schedule 25.04.2016
comment
Хорошо, я попробую это. - person James; 25.04.2016
comment
Спасибо за ответ, моя проблема решена. Я надеюсь, что смогу оценить каждого, кто дал правильный ответ, но мои привилегии ограничены. Это сработало! - person James; 25.04.2016

arrow_upward
0
arrow_downward

проблема в том, что вы назвали select (оккупация), а затем назвали input (оккупацию)

они не могут быть отправлены с одним и тем же именем, попробуйте изменить любое из них

person Mohammed Elhag    schedule 25.04.2016
comment
Спасибо за ответ, моя проблема решена. Я надеюсь, что смогу оценить каждого, кто дал правильный ответ, но мои привилегии ограничены. - person James; 25.04.2016

arrow_upward
0
arrow_downward

Это должно работать:

function CheckOccupation(selectedType){
  if (selectedType == 'Other'){
		document.getElementById('occupation').style.display = 'block';
  
	} else{
		document.getElementById('occupation').style.display = 'none';
   
	}
}
<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'>
	<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="occupation_other" id="occupation" class="form-control" placeholder="please specify" style='display:none;'/>

person Marin Nedea    schedule 25.04.2016

arrow_upward
0
arrow_downward

Попробуйте заменить event на this.value в качестве параметра, переданного CheckOccupation ; включение атрибута value в option элементов; изменение значения name в #occupation на "other" ; также удаление дубликатов <option> с .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;' />

person guest271314    schedule 25.04.2016

arrow_upward
0
arrow_downward

Посмотрите, я создал для вас плункер: Plunker link

Старайтесь не использовать элемент var.

person Kaushal Suthar    schedule 25.04.2016