Question

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

CRN

Answer 1

这是一个片段，向您展示如何使用javascript执行此操作：

＆＃13;

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);
  
});

＆＃13;

<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>

＆＃13;

请注意，我在select元素和输入元素中添加了ID。

编辑| 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>

那就是它。

Answer 2

这应该可以解决问题......让我知道吗？

// CODE

<!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>

Answer 3

这对我有用：

为您的选择添加ID：select name =＆＃34; fields [contact]＆＃34; ID =＆＃34;接触＆＃34;
使用类或内联样式将手机和电子邮件字段设置为隐藏：div class =＆＃34; field-container full clearfix hide-this＆＃34; ID =＆＃34;电话容器＆＃34; - 或者只是设置样式：display：none;

使用Javascript：

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

HTML / PHP如何根据选择选项字段值在表单上生成新的文本字段？

3 个答案:

编辑| USAGE