FormData not being submitted

Question

Ok, I'm going nuts with this problem:

I have a form with some hidden fields and a file upload field. Because I have other form tags on my page, I'm submitting it using a tag and ajax.

Here's my html code:

<form id="formdoc" name="formdoc" enctype="multipart/form-data" class="form">   
    <table class="table table-bordered rounded">
        <thead>
            <tr>
                <th scope="col">Tipo de documento</th>
                <th scope="col">Status</th>
                <th scope="col">Arquivo</th>
                <th scope="col">Ação</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>RG, CPF ou RNE</td>
                <td>
                    <span class="<?php echo $classPessoal; ?> docpessoal">
                        <?php if($btPessoal==''){ echo 'Pendente';}else{ echo 'Arquivo Enviado';} ?>
                    </span>
                </td>
                
                <td>
                    <div class="custom-file">
                        <input type="file" name="upload[]" class="custom-file-input" id="docpessoal" multiple <?php echo $btPessoal; ?>>
                        <label class="custom-file-label" for="customFile">Selecionar documento...</label>
                    </div>
                </td>
                <td>
                    <input type="hidden" name="id_imovel" value="<?php echo $_GET['idimv']; ?>">
                    <input type="hidden" name="tipo_doc" value="pessoal">
                    <button type="button" id="enviardoc" class="btn btn-primary font-weight-bolder" <?php echo $btPessoal; ?>>
                        <i class="ki ki-check icon-sm"></i>
                        Enviar
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</form>

This is my Ajax Call:

$("#enviardoc").click(function(e){
    e.preventDefault();

    var formData = new FormData($("#formdoc")[0]);

    $.ajax({
        type: 'POST',
        url: 'post_doc.php',
        data: formData,
        dataType: 'json',
        contentType: false,
        cache: false,
        processData:false,
        beforeSend: function(){
            //console.log(formData);
        },
        success: function(response){ 
            if(response.status == 1){
                alert("Sucesso!", ""+response.message+"", "success");
                console.log(response);
            }else{
                alert("Erro!", ""+response.message+"", "error");
                console.log(response);
            }
        }
    });
});

No matter what I do, it doesn't submit anything to my PHP page. I double checked and my PHP is returning the right value of all fields.

It looks like var formData is always empty!

Due to errors in your HTML the form doesn't have any inputs inside it by the time it is added to the DOM (see the duplicate) — Quentin, Apr 07 '21 at 19:00
@Quentin, I tried to edit my HTML and it doesn't solve the problem. — fackz, Apr 07 '21 at 19:08
This problem needs more debugging information, [check what data is in the FormData object](https://stackoverflow.com/questions/17066875/how-to-inspect-formdata), use the Network tab to see what is being posted to the server. Log `$_POST` and `$_FILES` in the PHP you haven't show us. — Quentin, Apr 07 '21 at 19:12
Check this link https://stackoverflow.com/a/17067016/10427807 — Rashed Rahat, Apr 07 '21 at 19:17
You're sending `FormData` as JSON, which is unlikely to work. `FormData` is meant to be sent as "multipart/form-data" or "application/x-www-form-urlencoded" in a pinch. — Heretic Monkey, Apr 07 '21 at 19:20
@HereticMonkey — It says “`contentType: false` so it will infer the right content time from the FormData object. I think you misunderstand `dataType` which states the type of data expected to be returned from the server. — Quentin, Apr 07 '21 at 21:11
@Quentin I thought `processData: false` combined with `contentType: false` would combine to make so that the content type would not be inferred, and it would fall back to its default, `json`. — Heretic Monkey, Apr 07 '21 at 21:13
@HereticMonkey — No, the opposite. It stops jQuery trying to process the data so XMLHttpRequest can. (And the default is URL encoded) — Quentin, Apr 08 '21 at 06:37

score -1 · Answer 1 · answered Apr 07 '21 at 19:34

replace this line $("#enviardoc").click(function(e){ with $("#formdoc").on("submit", fucntion(e){...

also, change the type of button to submit as:

<button type="submit" id="enviardoc" class="btn btn-primary font-weight-bolder" <?php echo $btPessoal; ?>> <i class="ki ki-check icon-sm"></i> Enviar
 </button>

FormData not being submitted

1 Answers1