"Onclick" function that calls PHP function

Question

Do you guys talk? I am beginner in development and I have a problem, I have a form (HTML) that sends data to a PHP file and registers in the database.

What I need is: When successfully recording the data, display on the "index" page (the one with the form) a custom alert in JQUERY (https://jqueryui.com/dialog/), I have tried several ways but could not. someone help me plzzz.

HTML:

<form action="cadastrar.php" method="post" class="form-inline" role="form">
                  <div class="form-group">
                    <label class="sr-only" for="email">Email address</label>
                    <input type="email" name="email" class="form-control" id="email" placeholder="Escreva o seu e-mail">
                  </div>
                  <button type="submit" class="btn btn-info">Cadastrar</button>
                </form>                         </div>

php:

$sql = "INSERT INTO users (email)
VALUES ('$email')";

if ($conn->query($sql) === TRUE) {
  $var =  $var = "<script language= 'JavaScript'>
  location.href='index.html'
  </script>";
  echo $var;
} 
else {
    echo "Esse email ja esta cadastrado";
}

$conn->close();

?>

PS: Abbreviated the code.

PS2: I know what I could do with ajax, but I have no idea how.

Answer 1

With AJAX you would do so:

<form class="form-inline" role="form">
              <div class="form-group">
                <label class="sr-only" for="email">Email address</label>
                <input type="email" name="email" class="form-control" id="email" placeholder="Escreva o seu e-mail">
              </div>
              <button id="cadastrar" class="btn btn-info">Cadastrar</button>
            </form>                         

(I took the Submit form so that the ajax goes without changing page)

Then the jQuery code:

$('#cadastrar').click(function () {
    $.ajax({
        url: 'cadastrar.php',
        method: 'POST',
        data: {email: $('#email').val()},
        success: function (response) {
            if (response == 'true') { // voce deve dar um echo 'true' no PHP caso seja salvo
                //Coloque aqui seu código para invocar o alerta personalizado
            }
        }
    });
});

Answer 2

Here is an alternative to AJAX, posted in another reply.

It is not good practice to use location.href along with the code PHP. For redirects you can use the function header.

PHP:

$sql = "INSERT INTO users (email) VALUES ('$email')";

if ($conn->query($sql) === TRUE) {
  $url = "index.html?success=true&msg=Sucesso";
} 
else {
  $url = "index.html?success=false&msg=Insucesso";
}

$conn->close();
header("Location: ${url}");

?>

In the HTML you can use a code to check the parameters of the URL, for example: success, msg etc..

HTML:

<form action="cadastrar.php" method="post" class="form-inline" role="form">
    <!-- Código aqui -->
</form>

<script>
window.location.search.substr(1).split("&").forEach( data => {
    [param, value] = data.split("=");

    if (param == "success" && value == "true") {
        alert("Código para abrir o 'dialog'")
    }
})
</script>

Answer 3

Hello, Try to make a require "index.html" inside the if thus:

if ($conn->query($sql) === TRUE) {
    require "index.html"
}