Clear field with Jquery

Asked

Viewed 816 times

1

I have a form where through the modal Bootstrap, it automatically uploads. It’s working properly, the problem is it’s not clearing the field. Look:

<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

  • You’re telling me to clean up #fotoCapa only if status.Status === 0, you checked if this condition is valid?

  • Hello Leandro. Yes, so much so that when the condition is valid, it activates Alert-Success.

  • 2

    but what you say doesn’t clear is actually the #fotoCapa input or the second input text below it?

  • 2

    Just want to clear that field? Because if it’s all fields, it’s easier to reset the form like this $('#form-upload')[0].reset(); or so $('#form-upload').trigger("reset"), That’s clear if the condition status.Status === 0 is true

  • Perfect Ricardo. It worked with $('#form-upload')[0].reset(); Thank you!

  • Sorry Leandro. I hadn’t seen your message. That would be just #fotoCapa, but Ricardo’s solution worked. Thank you.

Show 1 more comment

1 answer

0

To clean only the <input="file">, without having to reset all the forumlar, you can use the method wrap(), adding a new form to this element, resetting only it and then using the 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>
<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>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.