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

Question

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

这是我的表格：

<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>
    		<p>Description:</p>
    		<textarea type="text" name="f-desc" id="f-desc" cols="40" rows="5" class="fullWidth"></textarea>
    		<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>

如您所见，我想处理 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>
    	<select name="category" id="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>
    	<p>Description:</p>
    	<textarea type="text" name="f-desc" id="f-desc" cols="40" rows="5" class="fullWidth"></textarea>
    	<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>