Problems making an ajax request

1

I have a request problem

When I click on the save button it does 1 request or it is saved 1 time in the bank if it clicks again it does 2 in one time saving 2 times in the bank clicking again it does 3 in one time saving 3 times in the database .

I need 1 per click.

follow code

html

<form id="form" class="" action="javascript:;" enctype="multipart/form-data" name="form" method="post">

<button class="btn btn-primary" name="" onclick="sub('achadoPerdido','Incluir')">Salvar</button>

javascript

function sub(arquivo, acao) {
    $("#form").submit(function (e) {
        var formData = new FormData($(this)[0]);
        formData.append("acao", acao);
        formData.append("arquivo", arquivo);

        jQuery.ajax({
            type: 'POST',
            mimeType: "multipart/form-data",
            url: 'model/acao/controller.php',
            dataType: 'json',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false
        }).done(function (html) {
            console.log(html);

        });

    });
}
    
asked by anonymous 10.03.2016 / 21:24

2 answers

2

Each time you click on your button it calls the function sub ( onclick="sub('achadoPerdido','Incluir')" ), this in turn creates a listener for the submit event in the element #form ( *$("#form").submit(function (e) {... ), each click on the button will generate a new listener that will get accumulated. To resolve you have two options:

  • Remove the onclick="sub('achadoPerdido','Incluir')" from the save button and invoke the sub function manually on your js with sub('achadoPerdido','Incluir') (only once), preferably within $(document).ready(...
  • Remove the listener $("#form").submit(function (e) { from the sub function, it is not necessary the way you are using it, it also subtracts the new FormData($(this)[0]); from something like new FormData( $("#form")[0]); .
  • 10.03.2016 / 21:36
    1

    async: false does not work with .done() , you should use it asynchronously, async: false logo will be discontinued, as I explained here:

    Remove this:

    async: false,
    cache: false,
    

    I do not think you understand the use of each one, I recommend that you read the documentation first: link

    After reading the other answer I understand what happens exactly, what is said, when running sub are added several events .submit to form (for each click), the best maybe is to discard the form and leave only Ajax, should look like this:

    function sub(arquivo, acao) {
        var Self = this;
    
        if (Self.working) {
             return;
        }
    
        Self.working = true;
    
        var formData = new FormData($(this)[0]);
        formData.append("acao", acao);
        formData.append("arquivo", arquivo);
    
        jQuery.ajax({
            type: 'POST',
            mimeType: "multipart/form-data",
            url: 'model/acao/controller.php',
            dataType: 'json',
            data: formData,
            contentType: false,
            processData: false
        }).done(function (html) {
            console.log(html);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
        }).complete(function() {
            Self.working = false;
        });
    }
    
      

    Always use .fail to check for server error, connection, or parsing of Json or Xml.

    I have also added this.working , if true it prevents double clicking until the process ends, if false is already complete and can run again.

    HTML can only be button since the process is all by ajax now:

    <button class="btn btn-primary" onclick="sub('achadoPerdido','Incluir')">Salvar</button>
    
        
    10.03.2016 / 21:36