Displaying successful Alert() on the same page. PHP, Html

Question

I wanted to send the message of success or error after registering products from my site on the same page, without loading a new blank with the message, I saw similar questions, some using ajax that have not learned anything yet and could not solve my problem with the topics I found here.

Register of Category:

<form method="post" action="gravacategoria.php">
<div class="container">
<div class="form-group">
    <label class="col-md-4 control-label" for="txtproduto">Nova Categoria: </label>  
    <div class="col-md-6">
    <input id="txtcategoria" name="txtcategoria" type="text" class="form-control input-md" required="">
    </div>
</div>
<div class="form-group">
  <label class="col-md-4 control-label" for="btnsalvar"></label>
  <div class="col-md-8">
    <button id="btnsalvarcat" name="btnsalvar" type="Submit" class="btn btn-primary">Salvar</button>
    <button id="btncancelar" name="btncancelar" class="btn btn-danger">Cancelar</button>
  </div>
</div>
</div>
</form>

Gravacategoria:

<?php
    $conn= new PDO("mysql:host=localhost:3306;dbname=loja","root","aula");

    #$idcategoria=$_POST["txtid"];
    $nomecat=$_POST["txtcategoria"];

    $stmt = $conn->prepare('Insert into loja.categoria(nome)Values(:par_categoria)');

    #$stmt->bindValue(1,$idcategoria);
    $stmt->bindValue(2,$nomecat);     

    $dados=array(":par_categoria"=>$nomecat);

    $result = $stmt->execute($dados);

    if($result){
        echo ("Produto inserido com sucesso");
    }
    else{
        echo("Erro");
    }

Thank you!

Answer 1

A simple solution is to send the data to an iframe on the same page. Just put it on the page:

<iframe name="gravar" style="display: none;"></iframe>

And in the form put a target pointing to the name iframe:

<form target="gravar" method="post" action="gravacategoria.php">
         ↑

In PHP, instead of echo you call a script with the alert of the message, but first it is necessary to make a if to check whether the $_POST is not empty:

<?php
$nomecat=$_POST["txtcategoria"];

if(!empty($nomecat)){
    $conn= new PDO("mysql:host=localhost:3306;dbname=loja","root","aula");

    #$idcategoria=$_POST["txtid"];

    $stmt = $conn->prepare('Insert into loja.categoria(nome)Values(:par_categoria)');

    #$stmt->bindValue(1,$idcategoria);
    $stmt->bindValue(2,$nomecat);     

    $dados=array(":par_categoria"=>$nomecat);

    $result = $stmt->execute($dados);

    if($result){
        $mensagem = "Produto inserido com sucesso";
    }
    else{
        $mensagem = "Erro";
    }
?>
<script>
alert("<?php echo $mensagem ?>");
</script>
<?php    
}
?>

Answer 2

Really with ajax and json would be pretty cool, too.

Take a look

On this page I’m using bootstrap, it’s just html, but use the following separate codes:

HTML, JS and PHP

HTML

const msgArr = [
{title: 'Success', msg: 'Salvo com sucesso'},
{title: 'Error', msg: 'Falha ao tentar salvar'},
]

 $('#btnsalvarcat').on('click',function(e){
     e.preventDefault()
     salvarDados()
 })

salvarDados = () =>{
   const idx = getRandomIntInclusive( 0, 1 )
   alert( msgArr[ idx ].msg)
}




function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  
  
  <form method="post" action="gravacategoria.php">
<div class="container">
<div class="form-group">
    <label class="col-md-4 control-label" for="txtproduto">Nova Categoria: </label>  
    <div class="col-md-6">
    <input id="txtcategoria" name="txtcategoria" type="text" class="form-control input-md" required="">
    </div>
</div>
<div class="form-group">
  <label class="col-md-4 control-label" for="btnsalvar"></label>
  <div class="col-md-8">
    <button id="btnsalvarcat" name="btnsalvar"  class="btn btn-primary">Salvar</button>
    <button id="btncancelar" name="btncancelar" class="btn btn-danger">Cancelar</button>
  </div>
</div>
</div>
</form>

In your javascript Voce could use so:

 salvarDados = () => {
    $.ajax({
      url: 'gravacategoria.php',
      type: 'post',
      dataType: 'json',
      data: {
         txtcategoria: $('#txtcategoria').val()
      }
   }).then( r =>{ // o r é o retorno do php
        if(r.status == true){
          alert('Salvo com sucesso!')
        }else{
          alert('Falha ao salvar!')

        }
    })
}

In php

<?php
$nomecat=$_POST["txtcategoria"];

if(!empty($nomecat)){
    $conn= new PDO("mysql:host=localhost:3306;dbname=loja","root","aula");

    #$idcategoria=$_POST["txtid"];

    $stmt = $conn->prepare('Insert into loja.categoria(nome)Values(:par_categoria)');

    #$stmt->bindValue(1,$idcategoria);
    $stmt->bindValue(2,$nomecat);     

    $dados=array(":par_categoria"=>$nomecat);

    $result = $stmt->execute($dados);

    if($result){
        $t = array('status' = true);
        echo json_encode(  $t );
    }
    else{
        $t = array('status' = false);
        echo json_encode(  $t );
    }
?>

}
?>

Who will return to the ajax is the json Encode, where inside it you place the array

That’s the suggestion and that’s how ajax works

Answer 3

php form.:

    <form method="post" action="gravacategoria.php">
       <div class="container">
          <div class="form-group">
             <label class="col-md-4 control-label" for="txtproduto">Nova Categoria: </label>  
             <div class="col-md-6">
                <input id="txtcategoria" name="txtcategoria" type="text" class="form-control input-md" required="">
             </div>
          </div>
          <div class="form-group">
             <label class="col-md-4 control-label" for="btnsalvar"></label>
             <div class="col-md-8">
                <button id="btnsalvarcat" name="btnsalvar" type="Submit" class="btn btn-primary">Salvar</button>
                <button id="btncancelar" name="btncancelar" class="btn btn-danger">Cancelar</button>
             </div>
             <div>
                <p><?=$_GET['mensagem']?></p>
             </div>
          </div>
       </div>
    </form>

gravacategoria.php:

<?php
$conn= new PDO("mysql:host=localhost:3306;dbname=loja","root","aula");

#$idcategoria=$_POST["txtid"];
$nomecat=$_POST["txtcategoria"];

$stmt = $conn->prepare('Insert into loja.categoria(nome)Values(:par_categoria)');

#$stmt->bindValue(1,$idcategoria);
$stmt->bindValue(2,$nomecat);     

$dados=array(":par_categoria"=>$nomecat);

$result = $stmt->execute($dados);

if($result){
    $mensagem = "Produto inserido com sucesso";
    header("Location: formulario.php?mensagem=$mensagem");
}
else{
    $mensagem = "Erro";
    header("Location: formulario.php?mensagem=$mensagem");
}