AJAX no response from SUCCESS

Question

First of all, this code is just a small part of the complete code, I’m having a simple problem, but I couldn’t solve it.

First, I have an HTML form, which sends by POST method, the values of the fields to a javascript file.

In the javascript file, I make simple validations and send by POST method to a PHP file, which receives the information, inserts in the database without any problem.

The problem arises when I try to receive some response from the PHP file or try to give a alert() in javascript to inform that the registration was carried out, nothing appears. Someone could tell me where I am missing?

HTML:

<form id="formCadastroUsuario" name="formCadastroUsuario" method="post" class="col s12">

    <div class="row">
        <div class="input-field col s6">
            <i class="material-icons prefix">account_circle</i>
            <input id="nome" name="nome" type="text" required="required">
            <label for="nome">Nome</label>
        </div>                                          
    </div>

    <button class="btn waves-effect waves-light modal-trigger" id="submit" type="submit" name="submit" value="Submit" onclick="minhaFuncao();">Cadastrar
            <i class="material-icons right">send</i>
    </button>

</form>

Javascript:

function minhaFuncao() {

var nome = document.getElementById("nome").value;
var email = document.getElementById("email").value;
var senha1 = document.getElementById("senha1").value;
var senha2 = document.getElementById("senha2").value;
var cidade = document.getElementById("cidade").value;
var bairro = document.getElementById("bairro").value;
var dataNascimento = document.getElementById("dataNascimento").value;

if (nome == '' || email == '' || senha1 == '' || senha2 == '' || cidade == '' || bairro == '' || dataNascimento == '') {
    alert("Por favor, preencha todos os campos!");
} else {

    if(senha1 != senha2){
        alert("Os campos de senha estão diferentes, repita sua senha corretamente");
    } else {

        //formatando a data de nascimento para o formato DATE do MySQL
        var minhaData = dataNascimento.split('/');
        var dataFormatada = minhaData[2] + "-" + minhaData[1] + "-" + minhaData[0];

        //Formato de envio dos dados para o arquivo de cadastroDoUsuario.php
        var dataString = 'nome=' + nome + '&email=' + email + '&senha=' + senha1 + '&cidade=' + cidade + '&bairro=' + bairro + '&dataNascimento=' + dataFormatada;

        // AJAX code to submit form.
        $.ajax({
            type: "POST",
            url: "control/cadastrarUsuario.php",
            data: dataString,
            cache: false,
            success: function (result) {
                alert("sucess");

            },
            error: function (erro) {
                alert("Problema ocorrido");
            }

        });
        return false;

    }
}

}

PHP:

<?php

//error_reporting(0);
//error_reporting (~ E_DEPRECATED);

//criando a conexao (servidor, usuario, senha)
$conexao = mysql_connect("localhost", "root","");

/*
if (!$conexao) {
    die("Não foi possível conectar: " . mysql_error());
} else {
    echo ("conectado!.");
}
*/

//utilizando o padrao UTF-8 no banco de dados
mysql_set_charset('utf8',$conexao);

//selecionando o banco de dados a ser utilizado
$db  = mysql_select_db("projetocgeo", $conexao);

/*
if (!$db) {
    die("Não escolheu o banco de dados: " . mysql_error());
} else {
    echo ("banco de dados escolhido!.");
}
*/

//recebendo os dados validados no arquivo javascript ValidarCadastroDoUsuario.js
$nome = $_POST['nome'];
$email = $_POST['email'];
$senha = $_POST['senha'];
$cidade = $_POST['cidade'];
$bairro = $_POST['bairro'];
$dataNascimento = $_POST['dataNascimento'];

//criando a query
$query = "INSERT INTO usuario(nome, email, senha, tipo, dataNascimento, bairro, Cidade_idCidade) VALUES ('".$nome."', '".$email."','".$senha."','normal','".$dataNascimento."','".$bairro."',1)";

//executando a query
$insercao = mysql_query($query, $conexao);

/*
if(!$insercao){
    die("Cadastro deu erro:".mysql_error());
} else {
    echo("Cadastrado realizado com sucesso.");
}
*/

//fechando a conexao com o banco de dados
mysql_close($conexao);

?>

Answer 1

Hello @Danielmarques,

I simplified and improved your code [look to usePdo], however I believe that his "problem" may have been the absence of lib of jQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[1] SOpt</title>

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
  
<script type="text/javascript">
function minhaFuncao() {

var nome = document.getElementById("nome").value;

if(nome == ''){
	alert("Por favor, preencha todos os campos!");
}else{
	var dataString = 'nome=' + nome;
	$.ajax({
		type: "POST",
		url: "control/cadastrarUsuario.php",
		data: dataString,
		cache: false,
		success: function(result) {
			alert("Sucesso.");
		}
	});
		return false;
	}
}
</script>
</head>

<body>

<form id="formCadastroUsuario" name="formCadastroUsuario" method="post" class="col s12">

    <div class="row">
        <div class="input-field col s6">
       	 <label for="nome">Nome</label>
         <input id="nome" name="nome" type="text" required="required"> 
        </div>                                          
    </div>
	<br />
    <button class="btn waves-effect waves-light modal-trigger" id="submit" type="submit" name="submit" onclick="javascript:minhaFuncao()">
	Enviar
    </button>

</form>

</body>
</html>

<?php

define('HOST','localhost');
define('DB','sopt');
define('USER','root');
define('PASS','');

$conexao = 'mysql:host='.HOST.';dbname='.DB;

$options = array(
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"
);

try{
	$conecta = new PDO($conexao,USER,PASS,$options);
	$conecta->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
	
	
}catch(PDOexception $error_conecta){
	echo htmlentities('Erro ao conectar: '.$error_conecta->getMessage());
}

$nome = $_POST['nome'];

$query = "INSERT INTO usuario(nome) VALUES (:nome)";

try{
	$query = $conecta->prepare($query);
	$query->bindValue(':nome',$nome,PDO::PARAM_STR);
	$query->execute();
}catch (PDOexception $erro){
	echo 'Erro ao selecionar: '.$erro->getMessage();
}

?>