0

Olá eu sou novo nessas coisas de códigos e queria saber como que eu faço para aparecer a mensagem de sucesso após eu dar Submit, eu quero aquelas mensagens que aparecem o campo verde, tipo uma div e edita com css. E eu também queria que após dar submit aparecer outro botão tipo um botão de download

<!DOCTYPE html>
<html>
<head>
<meta "charset=utf-8" />
<title>Cadastro</title>
<link rel="stylesheet" type="text/css" href="assets/css/theme.css"/>
<script src="assets/js/jquery.js"></script>

<!--Arquivo Ajax-->
<script type="text/javascript">

jQuery(document).ready(function(){
    jQuery('#ajax_form').submit(function(){
        var dados = jQuery( this ).serialize();

        jQuery.ajax({
            type: "POST",
            url: "newsletter-form.php",
            data: dados,
            success: function envio()
            {
            var cont = "Email enviado com sucesso";
            document.getElementById("msg").innerHTML = cont;
            }
        });

        return false;
    });
});
</script>
</head>
<body>

<div class="for"
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="form-group">

<form id="ajax_form" name="signup" method="post" action="cadastro.php">
<div class="form-group">
<input type="text" id="name_user" class="form-control" name="nome" required placeholder="Seu nome"/>
</div>
<div class="form-group">
<input type="email" id="email_user" class="form-control" name="email" required placeholder="Seu email"/>
</div>
<div class="form-group">
<input type="tel" id="telefone_user" class= "form-control" name="telefone" required placeholder="Seu telefone"/>
</div>
<button class="btn btn-primary btn-block btn-register">
Enviar
</form>
<!-- coloco as divs que quero o resultado como hidden -->
<div class="menu" hidden>enviado com sucesso!</div>
<div id="atuar" hidden ><a href="https://google.com"><input type="button" value="download"></a></div>

</div>
</div>
</div>
</div>
</div>

</body>

</html>

7
  • Olá Leonardo, o foco do Stack Overflow é perguntas sobre programação que são fortemente relacionadas com um problema específico.
    – user60252
    Commented 10/06/2018 às 17:41
  • Por favor me ajuda só nisso passei semanas tentando
    – Leonardo
    Commented 10/06/2018 às 17:41
  • Já tentou fazer uma busca aqui no site? Tá cheio de posts sobre isso
    – user60252
    Commented 10/06/2018 às 17:44
  • já procurei e nao acho :(
    – Leonardo
    Commented 10/06/2018 às 17:50
  • Pelo menos coloca ai na pergunta o HTML do formulario
    – user60252
    Commented 10/06/2018 às 17:54

2 Respostas 2

1

Pagina do formulário

<!--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>

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

}

?>
0

Fala garoto!!!

precisa de dois arquivos, o que vai o form e o que recebe! ok

o que vai o form como form.php ou form.html

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>
<script type="text/javascript">
$(document).ready(function () { 


$('#forms').on('submit', function() {

    $.ajax({
        url: 'dados.php',
        type: 'post',
        data: $('#forms').serialize(),
        success: function(data) {

$(".menu").show('fast');
$('#atuar').show('fast');        }

    });

    return false;

});
});
</script>
<style>

    .menu{

position: relative;
        float: left;
        width: 300px;
        background: #12C12B;
    }   
    #atuar{
        position: relative;
        float: left;
        clear: left;
    margin-top: 5px;
        background: red;

    }
    .botao {
        width: auto; padding: 15px; background: #175604; 
        text-decoration: none; color: aliceblue;
    }

</style>
<body>
<div>
<form id="forms">
<input type="text" name="name" placeholder="digite o nome" />
<input type="submit" value="enviar" />
</form>
</div>

<div class="menu" hidden>enviado com sucesso!</div>
<div id="atuar" hidden >

    <a href="link aqui"><div class="botao">download</div></a>
    </div>

espero ter ajudado!

10
  • Olá, Muito obrigado pela ajuda, mas eu queria colocar um link nesse botão, como eu faço?
    – Leonardo
    Commented 11/06/2018 às 16:44
  • precisa positivar caso ja esteja correto Commented 11/06/2018 às 16:48
  • cara como que eu faço com um visual mais bonito??
    – Leonardo
    Commented 11/06/2018 às 16:53
  • alterei ai pra vc, precisa trabalhar no css, ele que estiliza tudo Commented 11/06/2018 às 16:55
  • Ok, cara eu vou editar a pergunta e vou colocar o codigo da minha pagina para você falar onde eu adiciono o codigo que você enviou ok?
    – Leonardo
    Commented 11/06/2018 às 17:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .