根据类别从输入类型=文件切换到文本字段

Question

根据所选类别，我想从输入类型=文件切换到文本字段。整个表单将通过处理上载函数的相同的php代码。

这是我的形式：

<form action="" method="POST" enctype="multipart/form-data" class="uploadForm"> 
 
    \t <div> 
 
    \t \t <select name="category"> 
 
    \t \t \t <option value="pho" selected>Images</option> 
 
    \t \t \t <option value="vid">Video</option> 
 
    \t \t \t <option value="pap">Paper</option> 
 
    \t \t </select> 
 
    \t \t <input type="file" name="files[]" multiple id="file"/> 
 
    \t \t <p>Title: <input type="text" name="f-title" id="f-title" cols="40" rows="5" class="fullWidth"/> 
 
    \t \t </p> 
 
    \t \t <p>Description:</p> 
 
    \t \t <textarea type="text" name="f-desc" id="f-desc" cols="40" rows="5" class="fullWidth"></textarea> 
 
    \t \t <p> 
 
    \t \t \t <label class="radio">Portfolio</label> 
 
    \t \t \t <input type="radio" name="folio" value="TRUE" checked/> <span class="radio">Yes</span> 
 
    \t \t \t <input type="radio" name="folio" value="FALSE"/> <span class="radio">No</span> 
 
    \t \t </p> 
 
    
 
    \t \t <input type="submit" value="Upload" id="submit"/> 
 
    \t </div> 
 
    </form>

正如你所看到的，我想办理3种类型：图像，PDF和视频。对于视频类型，我希望能够在表单中粘贴YouTube链接，该链接最终将保存在数据库中并显示在网站的图库中。但是，如果我只是添加链接，文件上传将是空的。反过来：如果我添加图像，链接将是空的。

在这些文档类型之间切换的最佳方式是什么？
PS：Javascript或jquery很好！

Answer 1

(function($) { 
 
    $(document).ready(function() { 
 
    $('select') 
 
     .change(function() { 
 
     switch ($(this).val()) { 
 
      case 'pho': 
 
      $('#file').removeClass('hidden'); 
 
      $('#form-description').addClass('hidden'); 
 
      break; 
 
      case 'vid': 
 
      case 'pap': 
 
      $('#form-description').removeClass('hidden'); 
 
      $('#file').addClass('hidden'); 
 
      break; 
 
     } 
 
     }); 
 
    }); 
 
})(jQuery)

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" method="POST" enctype="multipart/form-data" class="uploadForm"> 
 
    <div> 
 
     <select name="category"> 
 
     <option value="pho" selected="">Images</option> 
 
     <option value="vid">Video</option> 
 
     <option value="pap">Paper</option> 
 
     </select> 
 
     <input type="file" name="files[]" multiple="" id="file" /> 
 
     <p>Title: 
 
     <input type="text" name="f-title" id="f-title" cols="40" rows="5" class="fullWidth" /> 
 
     </p> 
 
     <div id="form-description" class="hidden"> 
 
     <p>Description:</p> 
 
     <textarea type="text" name="f-desc" id="f-desc" cols="40" rows="5" class="fullWidth"></textarea> 
 
     </div> 
 
     <p> 
 
     <label class="radio">Portfolio</label> 
 
     <input type="radio" name="folio" value="TRUE" checked="" /> 
 
     <span class="radio">Yes</span> 
 
     <input type="radio" name="folio" value="FALSE" /> 
 
     <span class="radio">No</span> 
 
     </p> 
 
     <input type="submit" value="Upload" id="submit" /> 
 
    </div> 
 
    </form>

最好的办法是显示了基于选用类

Answer 2

适当的元素，如果你正试图避免的JavaScript，我觉得有一种方法做你想要只使用CSS的东西。它将涉及为媒体，文本等添加不同的输入，但它们可以显示或不显示，具体取决于用户选择的类型。我是能够使纯CSS只使用单选按钮这项工作 - 我不能做选择的工作：

<style> 
    .oneVisible, .twoVisible, .threeVisible { 
     display: none; 
    } 

    #mediaType[value=one]:checked ~ .oneVisible { 
     display: inline-block; 
    } 
    #mediaType[value=two]:checked ~ .twoVisible { 
     display: inline-block; 
    } 
    #mediaType[value=three]:checked ~ .threeVisible { 
     display: inline-block; 
    } 
</style> 

<input type="radio" name="mediaType" id="mediaType" value="one" checked />One<br /> 
<input type="radio" name="mediaType" id="mediaType" value="two" />Two<br /> 
<input type="radio" name="mediaType" id="mediaType" value="three" />Three<br /> 

<input type="text" class="oneVisible" placeholder="for one" /> 
<input type="text" class="twoVisible" placeholder="for two" /> 
<input type="text" class="threeVisible" placeholder="for three" /> 

小提琴是here。这将向您展示如何使用不同的选项显示不同的输入。在服务器端，所有输入仍然存在，因此您必须根据所选选项选择要使用的输入。

Answer 3

下面将完全按照你的要求做（根据我的理解）。

没有额外的CSS或HTML添加到您现有的代码。

/* CHOOSE EITHER WAY */ 
 

 
// jQuery way 
 
$('[name=category]').on('change', function(e){ 
 
    var target = $(e.target), 
 
     input = $('#file'); 
 
    if (target.val() === 'vid') 
 
     input.attr('type', 'text'); 
 
    else 
 
     input.attr('type', 'file'); 
 
}); 
 

 

 
// Javascript way 
 
document.getElementsByName('category')[0].addEventListener('change', function(e){ 
 
    var target = e.target, 
 
     input = document.getElementById('file'); 
 
    if (target.value === 'vid') 
 
     input.setAttribute('type', 'text'); 
 
    else 
 
     input.setAttribute('type', 'file'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" method="POST" enctype="multipart/form-data" class="uploadForm"> 
 
    <div> 
 
    \t <select name="category" id="category"> 
 
    \t \t <option value="pho" selected>Images</option> 
 
    \t \t <option value="vid">Video</option> 
 
    \t \t <option value="pap">Paper</option> 
 
    \t </select> 
 
    \t <input type="file" name="files[]" multiple id="file"/> 
 
    \t <p>Title: <input type="text" name="f-title" id="f-title" cols="40" rows="5" class="fullWidth"/> 
 
    \t </p> 
 
    \t <p>Description:</p> 
 
    \t <textarea type="text" name="f-desc" id="f-desc" cols="40" rows="5" class="fullWidth"></textarea> 
 
    \t <p> 
 
    \t  <label class="radio">Portfolio</label> 
 
    \t  <input type="radio" name="folio" value="TRUE" checked/> <span class="radio">Yes</span> 
 
    \t \t \t <input type="radio" name="folio" value="FALSE"/> <span class="radio">No</span> 
 
    \t </p> 
 
    
 
     <input type="submit" value="Upload" id="submit"/> 
 
    </div> 
 
</form>