Clear field with Jquery

Question

Clear field with Jquery

Navigation

#1 by (0 votes)

0

I have a form where through the Bootstrap modal, it uploads automatically. It is working properly, the problem is that it is not cleaning the field. See:

<form method="post" id="form-upload" novalidate enctype="multipart/form-data">
    <label for="email" style="font-weight: normal"><strong>Formato permitido:</strong> JPG, JPEG e PNG<br><strong>Tamanho da imagem:</strong> 1170 x 300</label>
     <div class="md-group-add-on">
      <span class="md-add-on-file">
          <button class="btn btn-primary waves-effect waves-light">Foto</button>
      </span>
  <div class="md-input-file">
      <input type="file" id="fotoCapa" name="FotoCapa"/>
      <input type="text" class="md-form-control md-form-file">
      <label class="md-label-file"></label>
  </div>
</div>
    <div id="sucesso"></div>
</form>


<script type="text/javascript">
$(function(){
    $('#fotoCapa').change(function(e) {
      e.preventDefault();
      var formData = new FormData();
      formData.append('FotoCapa', $('#fotoCapa').prop('files')[0]);
      $.ajax({
          url: 'alterar-foto-capa.php',
          data: formData,
          type: 'post',
          success: function(response){

             var status = JSON.parse(response);

              if(status.Status === 0){
                  $('#sucesso').html("<div class='alert alert-success'>A foto foi alterada com sucesso!</div>");
                  $('#fotoCapa').val("");
              }else{
                 $('#sucesso').html("<div class='alert alert-danger'>" + status.Status + "</div>");
             }
              console.log(response);
          },
          processData: false,
          cache: false,
          contentType: false
      });
   });
});
</script>

jquery

asked by anonymous 03.07.2018 / 17:35

1 answer

Problems with SQLiteHelper National Simple The ControlToValidate property of '' RegularExpressionValidator1 '' can not be blank

score 0 · Answer 1

To clear only <input="file"> , without resetting the entire forumlary, you can use the wrap() method, adding a new form to that element, resetting it only, and then using unwrap() to remove the added form .

$(function(){
    $('#fotoCapa').change(function(e) {
      e.preventDefault();
      var formData = new FormData();
      formData.append('FotoCapa', $('#fotoCapa').prop('files')[0]);
      
      // Código que iria no success do seu post ajax
      $('#fotoCapa').wrap('<form>').closest('form')[0].reset();
      $('#fotoCapa').unwrap();   
      
      console.clear();
      console.log(formData.get('FotoCapa').name)

   });
});

@import 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><formmethod="post" id="form-upload" novalidate enctype="multipart/form-data">
    <label for="email" style="font-weight: normal"><strong>Formato permitido:</strong> JPG, JPEG e PNG<br><strong>Tamanho da imagem:</strong> 1170 x 300</label>
     <div class="md-group-add-on">
      <span class="md-add-on-file">
          <button class="btn btn-primary waves-effect waves-light">Foto</button>
      </span>
  <div class="md-input-file">
      <input type="file" id="fotoCapa" name="FotoCapa"/>
      <input type="text" class="md-form-control md-form-file">
      <label class="md-label-file"></label>
  </div>
</div>
    <div id="sucesso"></div>
</form>