Rajesh Yogeshwar Rajesh Yogeshwar - 4 months ago 218
Javascript Question

Semantic UI reset form with input type file field

I am using Semantic UI and its been really good overall. I have stuck upon something erratic, I have a form which has input type file field in it. Now when I call

$("form").form("reset")
which is supposed to reset the form I am encountered with following error message.

Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.


Shouldn't it be a simple reset? What am I missing here. I prefer to stick to functionality provided by Semantic UI for such operations, but I am stuck as of now.

Answer

Without the complete example I'm not sure where your error comes from, however form('reset') works correctly for me in <input type='file'> using semantic-ui 2.1.8. See the follow example:

  
$(document).ready(function(){
  // initialize the form an fields
  $('.ui.form')
  .form({
    fields: {
      fileInput:{
        identifier: 'name',
        rules: [
          {
            type : 'empty'
          }
        ]
      }
    }
  });
});

function myOwnReset(){
  $('.ui.form').form('reset');
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>

<form class="ui form segment">
  <div class="field">
    <label>File</label>
    <input type="file" name="fileInput"></input>
  </div>
  <div class="ui blue submit button">Submit</div>
  <div class="ui reset button">Reset</div>
  <div class="ui clear button">Clear</div>
</form>

<input type="button" onClick="myOwnReset();" value="force form('reset')"></input>

In the example I use the default Reset functionality which is added in <div class="ui reset button">Reset</div>. Anyway I added a button to see that forcing form('reset') works as expected.

Hope it helps,

Comments