Add success message and don’t quit to the.php process

Asked

Viewed 44 times

0

I have a form code, actually I joined 2 codes to create this, but in the old code the form directed to another page processo.php wanted to send the form and appear a success message that already has in the code.

index.html

  $(document).ready(function() {
    $('#contact_form').bootstrapValidator({
        // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            primeiro_nome: {
                validators: {
                        stringLength: {
                        min: 2,
                    },
                        notEmpty: {
                        message: 'Por favor, forneça seu primeiro nome'
                    }
                }
            },
             ultimo_nome: {
                validators: {
                     stringLength: {
                        min: 2,
                    },
                    notEmpty: {
                        message: 'Por favor, forneça seu sobrenome'
                    }
                }
            },
            email_contato: {
                validators: {
                    notEmpty: {
                        message: 'Por favor forneça o seu endereço de e-mail'
                    },
                    email_contato: {
                        message: 'Por favor, forneça um endereço de email válido'
                    }
                }
            },
            telefone: {
                validators: {
                    notEmpty: {
                        message: 'Por favor, forneça seu número de telefone'
                    },
                    telefone: {
                        country: 'BR',
                        message: 'Por favor, forneça um número de telefone válido com código de área'
                    }
                }
            },
            nick_ts: {
                validators: {
                     stringLength: {
                        min: 2,
                    },
                    notEmpty: {
                        message: 'Por favor, forneça seu Nick no ts'
                    }
                }
            },
            cidade: {
                validators: {
                     stringLength: {
                        min: 4,
                    },
                    notEmpty: {
                        message: 'Por favor, forneça sua cidade'
                    }
                }
            },
            estado: {
                validators: {
                    notEmpty: {
                        message: 'Por favor, selecione seu estado'
                    }
                }
            },
            mensagem: {
                validators: {
                      stringLength: {
                        min: 10,
                        max: 600,
                        message:'Por favor, insira pelo menos 10 caracteres e não mais do que 600'
                    },
                    notEmpty: {
                        message: 'Por favor, fale um pouco sobre'
                    }
                    }
                }
            }
        })
        .on('success.form.bv', function(e) {
            $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
                $('#contact_form').data('bootstrapValidator').resetForm();

            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {
                console.log(result);
            }, 'json');
        });
});
#success_message{ display: none;}
<!DOCTYPE html>
<html lang="br" >

<head>
  <meta charset="UTF-8">
  <title>Formulário para equipe ESBSB</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


  
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">

    <form class="well form-horizontal" action="processo.php" method="post"  id="contact_form" onSubmit="success_message">
<fieldset>

<!-- Nome do formolario -->
<legend>Entre em Contato!</legend>

<!-- texto-->

<div class="form-group">
  <label class="col-md-4 control-label">Primeiro Nome</label>  
  <div class="col-md-4 inputGroupContainer">
  <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  <input  name="primeiro_nome" id="primeiro_nome" placeholder="Primeiro Nome" class="form-control"  type="text">
    </div>
  </div>
</div>

<!-- texto-->

<div class="form-group">
  <label class="col-md-4 control-label" >Sobre nome</label> 
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  <input name="ultimo_nome" id="ultimo_nome" placeholder="Sobre nome" class="form-control"  type="text">
    </div>
  </div>
</div>

<!-- texto-->
       <div class="form-group">
  <label class="col-md-4 control-label">E-Mail</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
  <input name="email_contato" id="email_contato" placeholder="Endereço de E-Mail" class="form-control"  type="text">
    </div>
  </div>
</div>


<!-- numero-->
       
<div class="form-group">
  <label class="col-md-4 control-label">Telefone #</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
  <input name="telefone" id="telefone" placeholder="(022)98184 7740" class="form-control" type="text">
    </div>
  </div>
</div>

<!-- texto-->
      
<div class="form-group">
  <label class="col-md-4 control-label">Nick no TS</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-info-sign"></i></span>
  <input name="nick_ts" id="nick_ts" placeholder="Nick" class="form-control" type="text">
    </div>
  </div>
</div>

<!-- texto-->
 
<div class="form-group">
  <label class="col-md-4 control-label">Cidade</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
  <input name="cidade" placeholder="cidade" class="form-control"  type="text">
    </div>
  </div>
</div>

<!-- selecionar -->
   
<div class="form-group"> 
  <label class="col-md-4 control-label">Estado</label>
    <div class="col-md-4 selectContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
    <select name="estado" class="form-control selectpicker" >
      <option value=" " >Selecione o seu Estado</option>
    <option value="">Selecione</option>
    <option value="AC">Acre</option>
    <option value="AL">Alagoas</option>
    <option value="AP">Amapá</option>
    <option value="AM">Amazonas</option>
    <option value="BA">Bahia</option>
    <option value="CE">Ceará</option>
    <option value="DF">Distrito Federal</option>
    <option value="ES">Espirito Santo</option>
    <option value="GO">Goiás</option>
    <option value="MA">Maranhão</option>
    <option value="MS">Mato Grosso do Sul</option>
    <option value="MT">Mato Grosso</option>
    <option value="MG">Minas Gerais</option>
    <option value="PA">Pará</option>
    <option value="PB">Paraíba</option>
    <option value="PR">Paraná</option>
    <option value="PE">Pernambuco</option>
    <option value="PI">Piauí</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="RN">Rio Grande do Norte</option>
    <option value="RS">Rio Grande do Sul</option>
    <option value="RO">Rondônia</option>
    <option value="RR">Roraima</option>
    <option value="SC">Santa Catarina</option>
    <option value="SP">São Paulo</option>
    <option value="SE">Sergipe</option>
    <option value="TO">Tocantins</option>
    </select>
  </div>
</div>
</div>



<!-- opção -->
 <div class="form-group">
                        <label class="col-md-4 control-label">Tem menos de 14 anos?</label>
                        <div class="col-md-4">
                            <div class="radio">
                                <label>
                                    <input type="radio" name="idade" value="sim" /> Sim
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="idade" value="não" /> Não
                                </label>
                            </div>
                        </div>
                    </div>

<!-- texto -->
  
<div class="form-group">
  <label class="col-md-4 control-label">Sobre</label>
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
        	<textarea class="form-control" name="mensagem" id="mensagem" placeholder="Escreva sua mensagem"></textarea>
  </div>
  </div>
</div>

<!-- mensagem -->
<div class="alert alert-success" role="alert" id="success_message">Sucesso <i class="glyphicon glyphicon-thumbs-up"></i> Agradecemos por entrar em contato. Em breve, entraremos em contato com você.</div>

<!-- butao -->
<div class="form-group">
  <label class="col-md-4 control-label"></label>
  <div class="col-md-4">
    <button type="submit" class="btn btn-warning" >Enviar <span class="glyphicon glyphicon-send"></span></button>
  </div>
</div>

</fieldset>
</form>
</div>
    </div><!-- /.container -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

php process.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Obrigado!</title>
    </head>
    <body>
    <h1>Obrigado por enviar seus dados!.</h1>
    <p>Nós recebemos sua mensagem e entraremos em contato.</p>
</body>
</html>
<?php
if(isset($_POST['email_contato'])) {

    include 'config.php';


    $full_name = $_POST['primeiro_nome']; // obrigatorio
    $email_from = $_POST['email_contato']; // obrigatorio
    $telephone = $_POST['nick_ts']; // obrigatorio
    $comments = $_POST['mensagem']; // obrigatorio
    $ultimo_nome = $_POST['ultimo_nome'];   // obrigatorio
    $telefone = $_POST['telefone']; // obrigatorio
    $cidade = $_POST['cidade']; // obrigatorio
    $estado = $_POST['estado']; // obrigatorio
    $idade = $_POST['idade'];   // obrigatorio

    $error_message = "";

    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
  if(preg_match($email_exp,$email_from)==0) {
    $error_message .= 'O endereço de e-mail que você inseriu nao parece ser valido.<br />';
  }
  if(strlen($full_name) < 2) {
    $error_message .= 'Seu nome não parece ser valido.<br />';
  }
  if(strlen($comments) < 2) {
    $error_message .= 'Os comentarios que você inseriu nao parecem ser validos.<br />';
  }

  if($antispam <> $antispam_answer) {
    $error_message .= 'A resposta do Anti-Spam que você digitou não esta correta.<br />';
  }

  if(strlen($error_message) > 0) {
  }
    $email_message = "Detalhes do formulario abaixo.\r\n";

    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:");
      return str_replace($bad,"",$string);
    }

    $email_message .= "Primeiro Nome: ".clean_string($full_name)."\r\n";
    $email_message .= "Sobre Nome: ".clean_string($ultimo_nome)."\r\n";
    $email_message .= "Email: ".clean_string($email_from)."\r\n";
    $email_message .= "Nick no ts: ".clean_string($telephone)."\r\n";
    $email_message .= "Telefone: ".clean_string($telefone)."\r\n";
    $email_message .= "Cidade: ".clean_string($cidade)."\r\n";
    $email_message .= "Estado: ".clean_string($estado)."\r\n";
    $email_message .= "Tem 14 anos?: ".clean_string($idade)."\r\n";
    $email_message .= "Mensagem: ".clean_string($comments)."\r\n";

$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($email_to, $email_subject, $email_message, $headers);
header("Location: $obrigado");
?>
<script>location.replace('<?php echo $obrigado;?>')</script>
<?php
}
die();
?>
php html

  • method GET

1 answer

0

If I understand correctly, do you want to send the form and then display a success message without reloading or redirecting the screen? If so, maybe the code below can solve.

JS file:

  $(document).ready(function() {
$('#contact_form').bootstrapValidator({
    // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        primeiro_nome: {
            validators: {
                    stringLength: {
                    min: 2,
                },
                    notEmpty: {
                    message: 'Por favor, forneça seu primeiro nome'
                }
            }
        },
         ultimo_nome: {
            validators: {
                 stringLength: {
                    min: 2,
                },
                notEmpty: {
                    message: 'Por favor, forneça seu sobrenome'
                }
            }
        },
        email_contato: {
            validators: {
                notEmpty: {
                    message: 'Por favor forneça o seu endereço de e-mail'
                },
                email_contato: {
                    message: 'Por favor, forneça um endereço de email válido'
                }
            }
        },
        telefone: {
            validators: {
                notEmpty: {
                    message: 'Por favor, forneça seu número de telefone'
                },
                telefone: {
                    country: 'BR',
                    message: 'Por favor, forneça um número de telefone válido com código de área'
                }
            }
        },
        nick_ts: {
            validators: {
                 stringLength: {
                    min: 2,
                },
                notEmpty: {
                    message: 'Por favor, forneça seu Nick no ts'
                }
            }
        },
        cidade: {
            validators: {
                 stringLength: {
                    min: 4,
                },
                notEmpty: {
                    message: 'Por favor, forneça sua cidade'
                }
            }
        },
        estado: {
            validators: {
                notEmpty: {
                    message: 'Por favor, selecione seu estado'
                }
            }
        },
        mensagem: {
            validators: {
                  stringLength: {
                    min: 10,
                    max: 600,
                    message:'Por favor, insira pelo menos 10 caracteres e não mais do que 600'
                },
                notEmpty: {
                    message: 'Por favor, fale um pouco sobre'
                }
                }
            }
        }
    })
    .on('success.form.bv', function(e) {
        $('#success_message').slideDown({ opacity: "show" }, "slow")
        $('#contact_form').data('bootstrapValidator').resetForm();

        // Prevent form submission
        e.preventDefault();

        // Get the form instance
        var $form = $(e.target);

        // Get the BootstrapValidator instance
        var bv = $form.data('bootstrapValidator');

        // Use Ajax to submit form data
        $.post($form.attr('action'), $form.serialize(), function(result) {
            console.log(result);
            $('#success_message').show();
        }, 'json');
        });
});

php process.

    <?php
if(isset($_POST['email_contato'])) {

    include 'config.php';


    $full_name = $_POST['primeiro_nome']; // obrigatorio
    $email_from = $_POST['email_contato']; // obrigatorio
    $telephone = $_POST['nick_ts']; // obrigatorio
    $comments = $_POST['mensagem']; // obrigatorio
    $ultimo_nome = $_POST['ultimo_nome'];   // obrigatorio
    $telefone = $_POST['telefone']; // obrigatorio
$cidade = $_POST['cidade']; // obrigatorio
$estado = $_POST['estado']; // obrigatorio
$idade = $_POST['idade'];   // obrigatorio

$error_message = "";

$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';


if(preg_match($email_exp,$email_from)==0) {
    $error_message .= 'O endereço de e-mail que você inseriu nao parece ser valido.<br />';
  }
  if(strlen($full_name) < 2) {
    $error_message .= 'Seu nome não parece ser valido.<br />';
  }
  if(strlen($comments) < 2) {
    $error_message .= 'Os comentarios que você inseriu nao parecem ser validos.<br />';
  }

  if($antispam <> $antispam_answer) {
    $error_message .= 'A resposta do Anti-Spam que você digitou não esta correta.<br />';
  }

  if(strlen($error_message) > 0) {
  }
    $email_message = "Detalhes do formulario abaixo.\r\n";

function clean_string($string) {
  $bad = array("content-type","bcc:","to:","cc:");
  return str_replace($bad,"",$string);
}

$email_message .= "Primeiro Nome: ".clean_string($full_name)."\r\n";
$email_message .= "Sobre Nome: ".clean_string($ultimo_nome)."\r\n";
$email_message .= "Email: ".clean_string($email_from)."\r\n";
$email_message .= "Nick no ts: ".clean_string($telephone)."\r\n";
$email_message .= "Telefone: ".clean_string($telefone)."\r\n";
$email_message .= "Cidade: ".clean_string($cidade)."\r\n";
$email_message .= "Estado: ".clean_string($estado)."\r\n";
$email_message .= "Tem 14 anos?: ".clean_string($idade)."\r\n";
$email_message .= "Mensagem: ".clean_string($comments)."\r\n";

$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($email_to, $email_subject, $email_message, $headers);

echo json_encode(['success' => true]);
}
?>

Browser other questions tagged php html

You are not signed in. Login or sign up in order to post.