Опцията за избор не получава стойността

Имам падащ списък с например професии и когато потребителят щракне върху опцията „Други“, ще се покаже текстово поле и потребителят ще трябва да посочи своята професия. Частта, в която потребителят избира „Други“ и въвежда своята професия, работи, запазва въведеното от него, но когато потребителят просто ще избере или избере от падащия списък, стойността не се записва, когато изпратя формуляра.

Как ще получите стойността от избраната опция? Тъй като получавам стойността само когато потребителят избере „Друго“ и въведе своята професия. Ето моя код.

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

Мисля, че може да се наложи да посочите някаква стойност в маркера за опция. Опитайте тази:

<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