Skip to main content
removeu 85 caracteres do conteúdo
Fonte Link
user60252
user60252

Pagina do formulário Exemplo funcional

Pagina do formulário Exemplo funcional

Pagina do formulário

removeu 1285 caracteres do conteúdo
Fonte Link
user60252
user60252
<!--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>
Fonte Link
user60252
user60252

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              ***********************/         

}

?>