Как вывести вторую форму ввода условия при выборе выпадающего элемента в PHP

1

Задача:

Чтобы создать раскрывающийся список для значений параметров: "Name1... Name2... Name3... Others". Следовательно, когда пользователь должен был нажать на опцию "Другие", он будет генерировать дополнительные поля формы для входа пользователя, и они: "Имя, номер регистра, адрес".

Что сделано:

Я создал следующий раскрывающийся список, как показано:

<p>
<!--Input select box with options: Name1...Name2...Name3...Others-->
<select name ="Name" id="NameDetails">
<option value ="0" selected = "selected"> Select Name..</option>
<option value ="Name 1"> Name1</option>
<option value ="Name 2"> Name2</option>
<option value ="Name 3"> Name3</option>
<option value = "Others"> Others</option>
</select>
</p>

Следовательно, выпадающий список может быть показан. Кроме того, я также создал html-версию для 3 дополнительных полей, как показано ниже:

<p>
<input type="text" name="Name" id="Name" value="Name" title="Name" class="defaultValue required" tabindex="7" />
<div id="searchNameResultsContainer"></div>
<div id="errorSearchNameResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
<p>
<input type="text" name="Rego No." id="Rego No." value="Reg No." title="Reg No." class="leftCol defaultValue required validateInput formatNumber" tabindex="8" />
</p>
....(Identical for "Address" field)

Проблема. На данный момент я застрял в том, как вызывать дополнительные 3 поля, когда пользователи выбирают "Другие" из выпадающего списка. Я попытался использовать условие "if..else", но застрял, когда попытался ввести вышеуказанный код в оператор if.

Следовательно, может ли кто-нибудь помочь? Благодарю.

редактирование кода:

<div>
<p>
<!--Input selectbox with options: Name1...Name2...Name3...Others-->
<select name ="Name" id="NameDetails" onchange = "return val(this.value);">
<option value ="0" selected = "selected"> Select Agency..</option>
<option value ="Name 1"> Name1</option>
<option value ="Name 2"> Name2</option>
<option value ="Name 3"> Name3</option>
<option value = "Others"> Others</option>
</select>
</p>

<!-- Set Conditional check, if user clicks Others, direct to input field: Name,  Registration Number, Address-->

<div id = "extradiv" style ="display:none">
<p>
<input type="text" name="Name" id="Name" value="Name"  title="Name" class="defaultValue required" tabindex="7" />
<div id="searchNameResultsContainer"></div>
<div id="errorNameCompanyResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
<p>
<input type="text" name="RegistrationNum" id="RegistrationNum" value="Registration Num" title="Registration Num" class="leftCol defaultValue required validateInput formatNumber" tabindex="8" />
</p>
<p>
<input type="text" name="Address" id="Address" value="Address" title="Address" class="defaultValue required signupinput_txt" tabindex="9" />
<div id="searchAddressResultsContainer" class="hide searchResultsContainer"></div>
<div id="errorSearchAddressResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
</div>
</div>

<script>
function val(x)
{
    if (x =="Others" )
    {
            document.getElementById("extradiv").style.display ="block";
    }else
    {
            document.getElementById("extradiv").style.display = "none";
    }
}
</script>
Теги:
drop-down-menu
html-select
html.dropdownlistfor

2 ответа

0
Лучший ответ

Вы должны использовать javascript или jquery.

Просто оберните ваши дополнительные элементы формы под div и дайте им id, например other_ele а также other_ele это display:none div display:none по умолчанию с помощью css.

Просто попробуйте этот код ниже. Я использовал javascript для этого

Сначала в вашем теге select используйте onchange как:

<select name ="Name" id="NameDetails" onchange="return val(this.value);">

Этот обмен вызовет функцию val

И напишите свой сценарий таким образом

<script>
function val(x)
{
    if(x == "Others")
    {
        document.getElementById("other_ele").style.display = "block";
    }
    else
    {
        document.getElementById("other_ele").style.display = "none";
    }
}
</script>

Обратите внимание, что other_ele является идентификатором вашего div, в котором вы завернули свои дополнительные элементы формы.

Надеюсь, это сработает для вас

  • 0
    Я попробовал ваш метод, но он не отображается. Просто нужно подтвердить это, когда я установлю дополнительный элемент формы <div> </ div>. Нужно ли устанавливать его вне существующего <div> </ div>, где находится список параметров выбора, или я могу установить его вместе с существующим <div> </ div>
  • 0
    Нет, вам нужно обернуть этот код в div и присвоить этому div id <p> <input type = "text" name = "Name" id = "Name" value = "Name" title = "Name" class = "defaultValue required "tabindex =" 7 "/> <div id =" searchNameResultsContainer "> </ div> <div id =" errorSearchNameResultsContainer "class =" округленный errorSearchResultsContainer yui-ac-container "> </ div> </ p> <p> <input type = "text" name = "Rego No." id = "Рего №" значение = "Рег. №" title = "Reg No." class = "leftCol defaultValue требуется validateInput formatNumber" tabindex = "8" /> </ p> Если у вас все еще есть проблемы, пожалуйста, дайте мне знать
Показать ещё 5 комментариев
1

Используйте Jquery, добавьте эти 3 дополнительных поля в div с id #extradiv и установите его стиль как отображение: ни один из них не будет скрыт при загрузке.

 <div id="extradiv" style="display:none">
 <!-- 3 extra fields -->
 </div>

     <script type="text/javascript">
     $('#NameDetails').on('change',function(){
     $('#extradiv").hide();
     var changeVal = $("#NameDetails").val();
     if(changeVal == "Others){
     $("#extradiv").show();
     });
     </script>
  • 0
    Таким образом, я не включаю это ни в одно утверждение if else?
  • 0
    не требуется, убедитесь, что у вас есть библиотека jquery.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню