根據類別從輸入類型=文件切換到文本字段

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>