CODEWITHSUNDEEP
javascripthtmljquery
nnmmss
nnmmss

Reputation: 2992

How to change accept attribute of input type file based on select file type using javascript?

I have a select list like this

<select asp-for="FileTypeIndex" class="form-control" id="FileTypeIndex" asp-items="Html.GetEnumSelectList<FileTypeIndex>()"></select>

<input type="file" class="form-control " accept="*.*" id="productfile" name="productfile">

I want to change the accept attribute of file input according to the selected FileTypeIndex by JQuery

  $('#FileTypeIndex').on('change',function() {
         var filytypeIndex=$('#FileTypeIndex').val();
        
         switch(filytypeIndex) {              
          case 1:
            $('#productfile').attr("accept", ".pdf");
            break;
          case 2:
          case 5:
            $('#productfile').attr("accept", ".mp4,.avi");
            break;
          case 3:
            $('#productfile').attr("accept", ".mp3");
            break;
            case 4:
            $('#productfile').attr("accept", ".jpg");
            break;
          default:
        }
  });

But it is always ".", and it won't change

Upvotes: 2

Views: 1822

Answers (1)

Siddharth Rathod
Siddharth Rathod

Reputation: 638

You just need to change the datatype of filytypeIndex variable to number using Number() function of javascript.

Because in switch case gives 1,2,3 ... it is numbers

Your final code like below

$('#FileTypeIndex').on('change', function () {
    var filytypeIndex = Number($('#FileTypeIndex').val());
    switch (filytypeIndex) {
        case 1:
            $('#productfile').attr("accept", ".pdf");
            break;
        case 2:
        case 5:
            $('#productfile').attr("accept", ".mp4,.avi");
            break;
        case 3:
            $('#productfile').attr("accept", ".mp3");
            break;
        case 4:
            $('#productfile').attr("accept", ".jpg");
            break;
        default:
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select asp-for="FileTypeIndex" class="form-control" id="FileTypeIndex" asp-items="Html.GetEnumSelectList<FileTypeIndex>()">
      <option value="1">1</option>  
      <option value="2">2</option>  
      <option value="3">3</option>  
      <option value="4">4</option>  
      <option value="5">5</option>  
</select>

<input type="file" class="form-control " accept="*.*" id="productfile" name="productfile">

Upvotes: 2

Related Questions