Método ajax do jQuery não está funcionanodo.

[eriksonsr 0]

Boa tarde! Estou tentando enviar os dados de um formulário para uma página PHP que faz o cadastro destes dados no banco de dados, estou usando ajax pois a página não pode mudar ou ser recarregado, então estou tentando enviar os dados e exibir a mensagem de confirmação do PHP em um alerta no JavaScript, porém não está funcionando e o valor dos campos está aparecendo na URL, sendo que defini o método POST.

Esses sãos são os meus códigos:
JS:

$(document).ready(function(){
    $("#btCadastrar").click(function() {
        var dados= $("#frmCadastraVoluntario").serialize();
        $.ajax({
            url: "./php/cadastraVoluntario.php",
            data: dados,
            type: 'POST',
            success: function(data){
                alert(data);
            }
        });   
    }); 
});

HTML:

<div id="fieldsVoluntarios">
         <form action="#" id="frmCadastraVoluntario">
         <fieldset class="ui-widget ui-widget-content" id="dadosPessoais">
         <legend class="ui-widget-header ui-corner-all">Dados pessoais:</legend>
         Nome: <span class="espacoEsq">Sobrenome: </span><br>
         <input type="text" id="nome" name="nome" >
        <input type="text" id="sobrenome" name="sobrenome" />
         <br><hr><br>
                                
         Sexo: <span class="espacoEsq">Data de nascimento: </span><br>
         <select id="sexo" name="sexo">
         <option value="m" selected="selected">Masculino</option>
         <option value="f">Feminino</option>
         </select>
         <input type="text" id="dt_nasc" name="dt_nasc">
          <br><hr><br>
                                
         Comentario:  <br>
         <textarea id="comentario" name="comentario" rows="3" cols="52"></textarea>
          </fieldset>
                            
           <fieldset class="ui-widget ui-widget-content" id="dadosProfissioanis">
            <legend class="ui-widget-header ui-corner-all">Dados profissionais:</legend>
            Conhecimento em Inglês: <span class="espacoEsq4">Conhecimento em Alemão: </span><br>
            <select id="ingles_nivel" name="ingles_nivel">
            <option value="0">Nenhum</option>
            <option value="1">Básico</option>
            <option value="2">Intermediário</option>
             <option value="3">Avançado</option>
             </select>
                                
            <select id="alemao_nivel" name="alemao_nivel">
             <option value="0">Nenhum</option>
             <option value="1">Básico</option>
             <option value="2">Intermediário</option>
             <option value="3">Avançado</option>
             </select>
             <br><br>Conhecimento em Francês: <span class="espacoEsq6">Outra língua: </span><br>
             <select id="frances_nivel" name="frances_nivel">
              <option value="0">Nenhum</option>
              <option value="1">Básico</option>
             <option value="2">Intermediário</option>
             <option value="3">Avançado</option>
             </select>
             <input type="text" id="outra_lingua" name="outra_lingua">
             <br><hr><br>
                                
           Categoria da profissão: <span class="espacoEsq5"> Profissão: </span><br>
           <input type="text" id="categoria_profissional" name="categoria_profissional">
           <input type="text" id="profissao" name="profissao">
                                
         <br><br>Endereco de trabalho: <span class="espacoEsq7"> Nome do supervisor: </span><br>
         <input type="text" id="endereco_trabalho" name="endereco_trabalho">
         <input type="text" id="nome_supervisor" name="nome_supervisor">
         <button value="Cadastrar" id="btCadastrar">Cadastrar</button>
         </fieldset>
         </form>
</div>
                        

PHP:

include './conectaDB.php';

$dt_nasc =  explode("/" , $_POST["dt_nasc"]);
$dt_nasc_format = $dt_nasc[2].$dt_nasc[1].$dt_nasc[0];
$_POST["dt_nasc"]=$dt_nasc_format;

$dt_vacinacao =  explode("/" , $_POST["dt_vacinacao"]);
$dt_vacinacao_format = $dt_nasc[2].$dt_nasc[1].$dt_nasc[0];
$_POST["dt_vacinacao"]=$dt_vacinacao_format;

foreach ($_POST as $key => $value){
        if($key=="ingles_nivel" || $key=="frances_nivel" || $key=="alemao_nivel"){
            $campos .= $key . ',';
            $valores .= $value . ',';
        }else{
            $campos .= $key . ',';
            $valores .= "'$value'" . ',';
        }
}
$campos = substr($campos,0,-1);
$valores = substr($valores,0,-1);

echo "INSERT INTO voluntarios ($campos) VALUES ($valores)";

$query = "INSERT INTO voluntarios ($campos) VALUES ($valores)";

if(mysql_query($query)){
    echo "Dados cadastrados";
}else{
    echo "Ocorreu um erro";
}

[Lucas Guima 164]

Não sei dizer o motivo, mas tirando o botão de dentro da div #fieldsVoluntarios, funciona.

[eriksonsr 0]

Obrigadão Lucas! Ajudou muito já! Agora só preciso dar um jeito de arrumar aquele botão ali, tirando da div fieldsVoluntarios ele fica fora de posição e ver porque o alerta com a msg do PHP não está funcionando.

[Lucas Guima 164]

Eu sugiro que você troque seu button por um submit (ou apenas defina-o como submit) e troque o evento .click() do botão pelo .submit() do form, já que você está lidando com tal.

[eriksonsr 0]

Eu estava usando o evento submit, funcionou, porém saia da página que estava e ia para a página do PHP definida no Action do formulário.

[Lucas Guima 164]

Basta você abortar o evento com um:

return false;