1
resposta

PHP + AJAX + BANCO DE DADOS + JS + JQUERY

Olá,

Estou tentando fazer um scipt que ao clicar no botão enviar, o submit normal do PHP não saia do formulário. Gostaria que o JavaScript/Jquery enviasse para o PHP e este faça o insert no Banco e sem sair do formulário.

Porque isso?

Preciso cadastrar uma parte do formulário que seria na tabela pai. Após gravar esse registro, eu habilitaria um outro botão para cadastrar os filhos.

Tipo um Cadastro de pedidos: você grava as informações básicas e depois você grava os itens do pedido, ok?

Acontece que o JavaScript chama o backend mas ele não para em um die() que coloquei para eu poder ver o erro que dá...

Alguém poderia me ajudar?

Abaixo, script JavaScript no formulário de cadastro:

<script>
function clickEnviar() {
    var nome = document.getElementById('nome').value;
    var status = document.getElementById('status').value;
    var data_cert_dig = document.getElementById('data_cert_dig').value;
    var usuario_id = document.getElementById('usuario_id').value;
    var procuradorIsolado = document.getElementById('procuradorIsolado').value;
    var procuradorConjunto = document.getElementById('procuradorConjunto').value;
    var data_abertura = document.getElementById('data_abertura').value;
    var cnae = document.getElementById('cnae').value;
    var capital = document.getElementById('capital').value;
    var cnpj = document.getElementById('cnpj').value;
    var insc_estadual = document.getElementById('insc_estadual').value;
    var insc_municipal = document.getElementById('insc_municipal').value;
    var logradouro = document.getElementById('logradouro').value;
    var numero = document.getElementById('numero').value;
    var complemento = document.getElementById('complemento').value;
    var bairro = document.getElementById('bairro').value;
    var cidade = document.getElementById('cidade').value;
    var estado = document.getElementById('estado').value;
    var cep = document.getElementById('cep').value;

    var dados = "nome="+nome+"&"+"status="+status+"&"+"data_cert_dig="+data_cert_dig+
                "&"+"usuario_id="+usuario_id+"&"+"procuradorIsolado="+procuradorIsolado+
                "&"+"procuradorConjunto="+procuradorConjunto+"&"+"data_abertura="+data_abertura+
                "&"+"cnae="+cnae+"&"+"capital="+capital+"&"+"cnpj="+cnpj+"&"+"insc_estadual="+insc_estadual+
                "&"+"insc_municipal="+insc_municipal+"&"+"logradouro="+logradouro+"&"+"numero="+numero+
                "&"+"complemento="+complemento+"&"+"bairro="+bairro+"&"+"cidade="+cidade+"&"+"estado="+estado+
                "&"+"cep="+cep

    $.ajax({
        url:"<?php echo BASE_URL; ?>empresas/addEmpresaPost",
        type:'POST',
        data:{inputDadosEmpresa:dados},
        dataType:'html',
        success:function(html) {
            alert("SUCESSO!");

            alert("SUCESSO!");
        }
    });
}

</script>

Abaixo, script PHP recebendo o POST:

public function addEmpresaPost() {

        echo("+++++++++ CHEGUEI NO empresaPOST ++++++++++++");
        $aDados = json_encode($_POST['inputDadosEmpresa'], true);
        print_r($aDados);
        die();

}

A aplicação não para com o die() acima, ele volta para o JavaScript da tela de cadastro...

1 resposta

Oi Ivan, tudo bom?

Acredito que seu problema tenha mais a ver com javascript do que com PHP.

A página é recarregada porque a gente está adicionando o comportamento de envio por ajax ao clickar no botão. Digo adicionando porque o comportamento padrão do formulário ainda está sendo executado.

Ou seja, quando você clicka, ele executa o ajax E envia o formulário

Você pode evitar o comportamento padrão de envio chamando o preventDefault do event:

function clickEnviar(event) {
    event.preventDefault();
...
}

A explicação desse conteudo você encontra lá no curso de javascript:

https://cursos.alura.com.br/course/javascript-programando-na-linguagem-web/task/24208

Abraço!