Send form and post message of "success" on your own page, and after clicking on Submit appear another button

Asked

Viewed 1,940 times

0

Hello I’m new in these code things and wanted to know how I make to appear the success message after I give Submit, I want those messages that appear the green field, like a div and edit with css. And I also wish that after giving Submit appear another button like a download button

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

jquery css

  • Hello Leonardo, the focus of Stack Overflow is questions about programming that are strongly related to a specific problem.

  • Please help me just in this I spent weeks trying

  • Have you tried a search here on the site? It’s full of posts about this

  • I’ve looked and I can’t find :(

  • At least put there in the question the HTML form

  • click edit and paste the HTML, if it gets bad I hit it

  • Okay, I made an example for you!

Show 2 more comments

2 answers

1

Form page

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

php processing.

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

Speak boy!!!

needs two files, what will form and what gets! ok

what will form like form.php or 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>

hope I’ve helped!

  • Hello, Thank you so much for the help but I wanted to put a link on that button as I do?

  • need to be positive if you are already correct

  • Guy like I do with a more beautiful look??

  • I changed it for you, you need to work on css, it stylizes everything

  • Okay, man I’ll edit the question and I’ll put the code of my page for you to tell where I add the code you sent ok?

  • is studied in this answer and analyzes its code, it is better to learn

  • Okay, I’m just doubtful in the Jquery script I already have one existing so the page doesn’t give refresh helps me just in that the rest I turn around

  • jquery ta certinho, after the sucess vc determines which Ivs you want it to appear, after it sends it returns the positive in these Ivs

  • OK vlw same guy

  • gives a right and positive response to people pfv

Show 5 more comments

Browser other questions tagged jquery css

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