Problems making an ajax request

Question

I have a requisition problem

when I click save button it makes 1 request or be saved 1 time in the bank if click again it does 2 at once saving 2 times in the bank clicking again it does 3 at a time saving 3 times in the database.

need to have 1 per click.

follows 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);

        });

    });
}

Answer 1

Every time you click on your button call the function sub (onclick="sub('achadoPerdido','Incluir')"), this in turn creates a Manager for the Submit event in the element #form (*$("#form").submit(function (e) {...), ie, each click on the button will generate a new System that will be accumulated. To solve you have two options:

1. Remove from the save button onclick="sub('achadoPerdido','Incluir')" and invoke the function sub manually in your js with sub('achadoPerdido','Incluir') (only once), preferably within a $(document).ready(...
2. Remove the Laser System $("#form").submit(function (e) { of function sub, it is not necessary the way you are using it, it also replaces the new FormData($(this)[0]); for something like new FormData( $("#form")[0]);.

Answer 2

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

• /a/117483/3635

Remove this:

async: false,
cache: false,

It seems to me that you did not understand well the use of each one, I recommend that you read the documentation before: http://api.jquery.com/jquery.ajax/

After reading the other answer I understood better what happens, exactly what was said, when executing sub several events are added .submit to form (for each click), the best maybe is to discard the form and leave only Ajax, should be 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 the .fail to check when there is server error, connection or parsing of Json or Xml.

I also added the this.working, if true it prevents double clicking until the process is finished, if false is why it 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>