如何根据选择选项字段值在表单上生成新的文本字段? - HTML/PHP How do I generate new text-fields on a form based upon a select option field value?

当用户选择电话或电子邮件时，我希望表单生成一个框来输入他们选择的详细信息。我该怎么做呢?谢谢。

<div class="field-container full clearfix">
        <label class="required">What is your prefered method of contact?    </label>
        <select name="fields[contact]">
            <option value="blank"></option>
            <option value="phone">Phone</option>
            <option value="email">E-mail</option>
        </select>
    </div>

<div class="field-container full clearfix">
        <label class="required">Phone</label>
        <input type="text" name="fields[phone]" value="<?=  (isset($fields['phone']) ? $fields['phone'] : '' )?>"/>
        </div>

 <div class="field-container full clearfix">
    <label class="required">E-mail Address</label>
    <input type="text" name="fields[email]" value="<?=   (isset($fields['email']) ? $fields['email'] : '' )?>"/>
    </div>

下面的代码片段向您展示了如何使用javascript完成此操作:

document.getElementById('selection').addEventListener('change',function(){
  var inputs = document.querySelectorAll('.hideAndShowInput > input');
  for (var i = 0; i<inputs.length;i++) {
    inputs[i].setAttribute('type','hidden');  
    inputs[i].parentNode.style.display= 'none';
  }
  document.getElementById(this.value).parentNode.style.display='block';
  document.getElementById(this.value).setAttribute('type',this.value);
  
});

<div class="field-container full clearfix">
        <label class="required">What is your prefered method of contact?    </label>
        <select id="selection" name="fields[contact]">
            <option value="blank"></option>
            <option value="phone">Phone</option>
            <option value="email">E-mail</option>
        </select>
    </div>
 
<div class="field-container full clearfix hideAndShowInput" style="display:none;">
        <label class="required">Phone</label>
        <input type="hidden" id="phone" name="fields[phone]" value="">
        </div>
 <div class="field-container full clearfix hideAndShowInput"  style="display:none;">
    <label class="required">E-mail Address</label>
    <input type="hidden" id="email" name="fields[email]" value=""/>
    </div>
<div class="field-container full clearfix">
        <label class="required">otherField1</label>
        <input type="text" id="other" name="fields[p]" value="otherField">
        </div>
 <div class="field-container full clearfix">
    <label class="required">otherField2</label>
    <input type="text" id="lsd" name="fields[em]" value="otherField2"/>
    </div>

请注意，我给select元素和输入元素添加了一个Id。

EDIT | USAGE

创建一个文件，命名为script.js或者你喜欢的任何东西，然后把下面的内容放进去:

    document.getElementById('selection').addEventListener('change',function(){
  var inputs = document.querySelectorAll('.hideAndShowInput > input');
  for (var i = 0; i<inputs.length;i++) {
    inputs[i].setAttribute('type','hidden');  
    inputs[i].parentNode.style.display= 'none';
  }
  document.getElementById(this.value).parentNode.style.display='block';
  document.getElementById(this.value).setAttribute('type',this.value);
});

将文件保存到服务器上可访问的文件夹中。例如/public/js/script.js

在你的html中添加

<script src="/public/js/script.js"></script> <!-- or however your path is -->

到你的文件的最后，直接在结束的</body>标签之前，所以它看起来像这样

 <div class="field-container full clearfix">
        <label class="required">What is your prefered method of contact?    </label>
        <select id="selection" name="fields[contact]">
            <option value="blank"></option>
            <option value="phone">Phone</option>
            <option value="email">E-mail</option>
        </select>
    </div>

<div class="field-container full clearfix hideAndShowInput" style="display:none;">
        <label class="required">Phone</label>
        <input type="hidden" id="phone" name="fields[phone]" value="">
        </div>

 <div class="field-container full clearfix hideAndShowInput"  style="display:none;">
    <label class="required">E-mail Address</label>
    <input type="hidden" id="email" name="fields[email]" value=""/>
    </div>
<div class="field-container full clearfix">
        <label class="required">otherField1</label>
        <input type="text" id="other" name="fields[p]" value="otherField">
        </div>

 <div class="field-container full clearfix">
    <label class="required">otherField2</label>
    <input type="text" id="lsd" name="fields[em]" value="otherField2"/>
    </div>
<script src="/public/js/script.js"></script>  <!-- here is the script included -->
</body>

。

这对我有用:

添加一个id到您的选择:select name="fields[contact]" id="contact"
设置电话和电子邮件字段为隐藏，使用class或inline style:div class="field-container full clearfix hide-this" id="phone-container"

$('#contact').change(function(){
if(this.selectedOptions[0].text == 'phone') {
    $('#phone-container').show().focus();
}else{$('#phone-container').hide();}
});

这应该能奏效…让我知道?

//代码

<!DOCTYPE html>
<html>
<head>
<style>
.field-hide{
    display: none;
}   
</style>
<script>
function valChange(ele){
    var fields = document.getElementById("container").children;
    for(var i=0; i < fields.length; i++){
        fields[i].classList.add("field-hide");
    }
    switch(ele.value){
        case "phone":
            document.getElementById("phone").classList.remove("field-hide");
            break;
        case "email":
            document.getElementById("email").classList.remove("field-hide");
            break;
    }
}           
</script>
</head>
<body>
    <div class="field-container full clearfix">
        <label class="required">What is your preferred method of contact?</label>
        <select type="text" name="fields[contact]" onchange="valChange(this)">
            <option value="blank" selected disabled>Choose</option>
            <option value="phone">Quoted</option>
            <option value="email">Labour Only</option>
         </select>    
    </div>
    <div id="container">
        <div class="field-container full clearfix field-hide" id="phone">
            <label class="required">Phone</label>
            <input type="text" name="fields[phone]" placeholder="enter phone number">
        </div>
        <div class="field-container full clearfix field-hide" id="email">
            <label class="required">E-mail Address</label>
            <input type="text" name="fields[email]" placeholder="enter email">
        </div>
    </div>
</body>
</html>