0

I have a form where I can upload a file if I want:

<div class="form-group">
   @Html.Label("Upload File", new { @class = "control-label col-md-2" })
   <div class="col-md-10">
      <input type="file" id="UploadedFile" name="upload" />
   </div>
</div>

I want when a file was uploaded these fields to appear:

<div id="optionalFields">

    <div class="form-group">
       @Html.LabelFor(model => model.Field1, htmlAttributes: new { @class = "control-label col-md-2" })
       <div class="col-md-10">
           @Html.EditorFor(model => model.Field1, new { htmlAttributes = new { @class = "form-control" } })
           @Html.ValidationMessageFor(model => model.Field1, "", new { @class = "text-danger" })
       </div>
     </div>

    //other fields
</div>

I think Javascript is needed but I don't know how to achieve this.

blanos14
  • 7
  • 2
  • You can create a JS event that triggers when the element with id `UploadedFile` is clicked, and display the element with id `optionalFields`. Have you done any research or made any attempts to resolve this issue yourself? – devlin carnate Jun 03 '20 at 16:03
  • I am not familiar with JS and I tought a simple solution would fit my need. After searching online I only found solutions that I don't understand so I came here for a straight answer directly on my example. – blanos14 Jun 03 '20 at 16:19

1 Answers1

0

To display the optional fields:

//hide the optional fields on page load
document.getElementById("optionalFields").style.display = 'none';
//when the file upload input is clicked, show the optional fields
document.getElementById('UploadedFile').onclick=function(){
  document.getElementById('optionalFields').style.display='block';
};

Note: the above code is a simple demo of how to display the optional fields when the file upload input is clicked. It does not include any kind of validation that the user actually selected a file to upload. Nor does it contain validations that the file upload was successful.

devlin carnate
  • 8,309
  • 7
  • 48
  • 82