1

Person,

I have a page with 2 input text and 2 input file when I get the ajax response, send clear the entire form as the code below, but only a field is not cleared the field:

Here my page

<input class="fileUploadAudio" id="fileUploadAudio" name="fileUploadAudio" type="file"></span>

I believe we should have some conflict, I have done everything and I can not clear this blessed country.

PS: If you need I publish the page to take a look.

<div class="form-group">
                    <label class="col-sm-3 control-label">Imagem para Push</label>
                    <div class="col-sm-6">
                       <div class="fileinput fileinput-new" data-provides="fileinput">
                          <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                             <img src="http://placehold.it/190x140/7761A7/ffffff" alt="...">
                          </div>
                          <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                          <div>
                             <span class="btn btn-primary btn-file"><span class="fileinput-new">Selecionar imagem</span><span class="fileinput-exists">Alterar</span>
                             <input class="arquivo" id="arquivo" name="arquivo" type="file"></span>
                             <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remover</a>
                          </div>
                       </div>
                    </div>
                 </div>
                 <div class="form-group">
                    <label class="col-sm-3 control-label">Áudio para a campanha</label>
                    <div class="col-sm-6">
                       <div class="fileinput fileinput-new" data-provides="fileinput">
                          <input name="..." value="" type="hidden">
                          <span class="btn btn-primary btn-file"><span class="fileinput-new">Selecionar áudio</span>
                          <span class="fileinput-exists">Alterar</span>
                          <input class="fileUploadAudio" id="fileUploadAudio" name="fileUploadAudio" type="file"></span>
                          <span class="fileinput-filename"></span>
                          <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">×</a>
                       </div>
                    </div>
                 </div>

In return I send ajax clear the form fields like this:

$(".formulario")[0].reset();
$(".formulario").get(0).reset();
$('#cancelButton').hide();
$("#fileUploadAudio").val("");
$('#submitButton').hide();

I have even tried to clear only the input file this way:

$('#fileUploadAudio').val('');
William
  • 294
  • 3
  • 16
  • are you using any plugin/extension for file uploader ? – Nalin Aggarwal Aug 24 '16 at 20:55
  • No, no plugin. My code clear all fields except the file input field audio – William Aug 24 '16 at 21:01
  • $(".formulario")[0].reset(); $(".formulario").get(0).reset(); – William Aug 24 '16 at 21:03
  • 1
    Only problem on a file input, the other clean normally. – William Aug 24 '16 at 21:03
  • Personally, I just put a call CLEAR button. To test do the following: select two files in 2 fileinput then click this button. ->http://williamvillar.com.br/Push_Novo/msg_big_pic.php – William Aug 25 '16 at 00:02
  • Check http://stackoverflow.com/a/13351234/6383857 – StaticBeagle Aug 25 '16 at 01:32
  • Hello friend, I had read this post until I did as told, but does not work. I've done everything and can not find the bug. In consumes the following error: too much recursion ...sName&&b.getElementsByClassName)return G.apply(d,b.getElementsByClassName(f)),d}... jquery.min.js (linha 2, col 6855) – William Aug 25 '16 at 01:39

2 Answers2

0

I assume that you are trying to reset the whole form.

  1. Change the outer div tag to formas followings:

    Replace

    <div class="form-group">...</div>

    with

    <form class="form-group" id="formulario">...</form>

  2. Reset form using jQuery

    $("#formulario")[0].reset();
Dagy Tran
  • 44
  • 3
  • Sorry, I had a typo there it should be `$("#formulario")[0].reset();` instead of `$("#formulario)[0].reset();` - I missed the " character – Dagy Tran Apr 19 '17 at 03:00
0

if native java script reset function is not working you need to trigger the reset function $("#formulario").trigger("reset");

hazan kazim
  • 938
  • 9
  • 11