Pagina do formulário Exemplo funcional
<!--Bibiotecas, extra font-awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
/******* faça o seu css, esse é apenas um exemplo *******/
#idForm {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
width: 100%; }
form > * {
margin-left: 1em;
-ms-flex: 0 1 auto; }
form > :first-child {
margin-left: 0; }
.form-control{
background:#fff;
border:8px solid #eee;
width:200px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 0 10px #4e707c;
-webkit-box-shadow:0 0 10px #4e707c;
box-shadow:0 0 10px #4e707c;
text-align:left;
}
.button {
display: inline-block;
height: 2.5em;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
border: solid 1px #dee0e3;
white-space: nowrap;
}
.button:hover {
color: #e7746f;
border-color: #e7746f;
}
/* Style button download */
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
font-size: 16px;
cursor: pointer;
font-size: 20px;
}
/* background no mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
</style>
<script>
$(document).ready(function() {
$('#submitBtn').click(function(){
var dataString = $('#idForm').serialize();
$.ajax({
type:"post",
url:"processamento.php",
data: dataString,
success: function(data){
$("#result").text(data);
/*****nesse if o valor deve ser exatamente igual ao
ao echo da pagina processamento.php ao ser realizado o cadastro com sucesso
******/
if(data=="Cadastro realizado com sucesso!!"){
$("#atuar").html('<br><a href="https://google.com"><button class="btn"><i class="fa fa-download"></i> Download</button></a>');
}
$("#myModal").modal('show');
}
});
event.preventDefault();
});
});
</script>
<div id="interna">
<form id="idForm" method="POST">
<input type="text" id="name_user" class="form-control" name="nome" required placeholder="Seu nome"/>
<br>
<input type="email" id="email_user" class="form-control" name="email" required placeholder="Seu email"/>
<br>
<input type="tel" id="telefone_user" class= "form-control" name="telefone" required placeholder="Seu telefone"/>
<br>
<button class="button" name="submit" id="submitBtn">Enviar</button>
<br>
</form>
<div id="atuar"></div>
</div>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Exemplo de modal </h4>
</div>
<div class="modal-body">
<p>Resultado da requisição. </p>
<p class="text-warning"><small><span id="result"></span></small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success waves-effect waves-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Bibiotecas, extra font-awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
/******* faça o seu css, esse é apenas um exemplo *******/
#idForm {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
width: 100%; }
form > * {
margin-left: 1em;
-ms-flex: 0 1 auto; }
form > :first-child {
margin-left: 0; }
.form-control{
background:#fff;
border:8px solid #eee;
width:200px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 0 10px #4e707c;
-webkit-box-shadow:0 0 10px #4e707c;
box-shadow:0 0 10px #4e707c;
text-align:left;
}
.button {
display: inline-block;
height: 2.5em;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
border: solid 1px #dee0e3;
white-space: nowrap;
}
.button:hover {
color: #e7746f;
border-color: #e7746f;
}
/* Style button download */
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
font-size: 16px;
cursor: pointer;
font-size: 20px;
}
/* background no mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
</style>
<script>
$(document).ready(function() {
$('#submitBtn').click(function(){
var dataString = $('#idForm').serialize();
$.ajax({
type:"post",
url:"processamento.php",
data: dataString,
success: function(data){
$("#result").text(data);
/*****nesse if o valor deve ser exatamente igual ao
ao echo da pagina processamento.php ao ser realizado o cadastro com sucesso
******/
if(data=="Cadastro realizado com sucesso!!"){
$("#atuar").html('<br><a href="https://google.com"><button class="btn"><i class="fa fa-download"></i> Download</button></a>');
}
$("#myModal").modal('show');
}
});
event.preventDefault();
});
});
</script>
<div id="interna">
<form id="idForm" method="POST">
<input type="text" id="name_user" class="form-control" name="nome" required placeholder="Seu nome"/>
<br>
<input type="email" id="email_user" class="form-control" name="email" required placeholder="Seu email"/>
<br>
<input type="tel" id="telefone_user" class= "form-control" name="telefone" required placeholder="Seu telefone"/>
<br>
<button class="button" name="submit" id="submitBtn">Enviar</button>
<br>
</form>
<div id="atuar"></div>
</div>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Exemplo de modal </h4>
</div>
<div class="modal-body">
<p>Resultado da requisição. </p>
<p class="text-warning"><small><span id="result"></span></small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success waves-effect waves-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Bibiotecas -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
$(document).ready(function() {
$('#submitBtn').click(function(){
var dataString = $('#idForm').serialize();
$.ajax({
type:"post",
url:"processamento.php",
data: dataString,
success: function(data){
$("#result").text(data);
/*****nesse if o valor deve ser exatamente igual ao
ao echo da pagina processamento.php ao ser realizado o cadastro com sucesso
******/
if(data=="Cadastro realizado com sucesso!!"){
$("#atuar").html('<br><a href="https://google.com"><button class="btn"><i class="fa fa-download"></i> Download</button></a>');
}
$("#myModal").modal('show');
}
});
event.preventDefault();
});
});
</script>
<form id="idForm" method="POST">
<input type="text" id="name_user" class="form-control" name="nome" required placeholder="Seu nome"/>
<input type="email" id="email_user" class="form-control" name="email" required placeholder="Seu email"/>
<input type="tel" id="telefone_user" class= "form-control" name="telefone" required placeholder="Seu telefone"/>
<button class="button" name="submit" id="submitBtn">Enviar</button>
</form>
<div id="atuar"></div>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Exemplo de modal </h4>
</div>
<div class="modal-body">
<p>Resultado da requisição. </p>
<p class="text-warning"><small><span id="result"></span></small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success waves-effect waves-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Pagina do formulário Exemplo funcional
<!--Bibiotecas, extra font-awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
/******* faça o seu css, esse é apenas um exemplo *******/
#idForm {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
width: 100%; }
form > * {
margin-left: 1em;
-ms-flex: 0 1 auto; }
form > :first-child {
margin-left: 0; }
.form-control{
background:#fff;
border:8px solid #eee;
width:200px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 0 10px #4e707c;
-webkit-box-shadow:0 0 10px #4e707c;
box-shadow:0 0 10px #4e707c;
text-align:left;
}
.button {
display: inline-block;
height: 2.5em;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
border: solid 1px #dee0e3;
white-space: nowrap;
}
.button:hover {
color: #e7746f;
border-color: #e7746f;
}
/* Style button download */
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
font-size: 16px;
cursor: pointer;
font-size: 20px;
}
/* background no mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
</style>
<script>
$(document).ready(function() {
$('#submitBtn').click(function(){
var dataString = $('#idForm').serialize();
$.ajax({
type:"post",
url:"processamento.php",
data: dataString,
success: function(data){
$("#result").text(data);
/*****nesse if o valor deve ser exatamente igual ao
ao echo da pagina processamento.php ao ser realizado o cadastro com sucesso
******/
if(data=="Cadastro realizado com sucesso!!"){
$("#atuar").html('<br><a href="https://google.com"><button class="btn"><i class="fa fa-download"></i> Download</button></a>');
}
$("#myModal").modal('show');
}
});
event.preventDefault();
});
});
</script>
<div id="interna">
<form id="idForm" method="POST">
<input type="text" id="name_user" class="form-control" name="nome" required placeholder="Seu nome"/>
<br>
<input type="email" id="email_user" class="form-control" name="email" required placeholder="Seu email"/>
<br>
<input type="tel" id="telefone_user" class= "form-control" name="telefone" required placeholder="Seu telefone"/>
<br>
<button class="button" name="submit" id="submitBtn">Enviar</button>
<br>
</form>
<div id="atuar"></div>
</div>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Exemplo de modal </h4>
</div>
<div class="modal-body">
<p>Resultado da requisição. </p>
<p class="text-warning"><small><span id="result"></span></small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success waves-effect waves-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
processamento.php
<?php
// Cria uma variável que terá os dados do erro
$erro = false;
// Verifica se o POST tem algum valor
if ( !isset( $_POST ) || empty( $_POST ) ) {
$erro = 'Nada foi enviado.';
}
// Cria as variáveis dinamicamente
foreach ( $_POST as $chave => $valor ) {
// trim remove todas as tags HTML
// strip_tags remove os espaços em branco do valor
// $$chave cria as variaveis com os names dos elementos do formulário
$$chave = trim( strip_tags( $valor ) );
// Verifica se tem algum valor nulo
if ( empty ( $valor ) ) {
$erro = 'Existem campos em branco.';
}
}
// Verifica se $email realmente existe e se é um email.
if ( ( ! isset( $email ) || ! filter_var( $email, FILTER_VALIDATE_EMAIL ) ) && !$erro ) {
$erro = utf8_encode('Envie um email válido.');
}
// Se existir algum erro, mostra o erro
if ( $erro ) {
echo $erro;
} else {
/******************* seu script aqui,exemplo de cadastro ***********************/
$mysqli = new mysqli("localhost", "USUARIO", "SENHA", "nome_DB");
$result = $mysqli->query("SELECT COUNT(*) FROM login WHERE email = '$email'");
$row = $result->fetch_row();
if ($row[0] > 0) {
echo utf8_encode(("E-mail (".$email.") já existe no banco."));
} else {
echo ("Cadastro realizado com sucesso!!");
$mysqli->query("Insert into login (email) values ('".$email."')");
}
/******************* fim seu script ***********************/
}
?>
default