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

Question

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

Asked 6 years, 6 months ago

Viewed 965 times

-1

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

Index.php

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

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

</body>

</html>

1 answer

Browser other questions tagged php javascript html ajax

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

by João Pedro Henrique • **1,172** points · Answer 1 · 2018-06-11T19:06:04+00:00

To show the message in a floating box, you must be talking about creating a snackbar. In the code below, I added the snackbar and download button. The download button loads the page as hidden, and after the success of the ajax request, the CSS class that makes it hidden is removed by jquery and the Submit button is also removed. The code goes something like this:

// Função responsável por mostrar e remover o snackbar
function snackbar() {
    // Get the snackbar DIV
    var x = document.getElementById("snackbar");
    // Add the "show" class to DIV
    x.className = "show";
    // After 3 seconds, remove the show class from DIV
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

// Sua função que faz a requisição AJAX
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() {
            // Mostra o snackbar na tela
            snackbar()
            // Mostra o botão de download
            $("#btnDownload").removeClass('hidden');
            // Remove o botão de enviar
            $("#btnEnviar").remove();
            var cont = "Email enviado com sucesso";
            document.getElementById("msg").innerHTML = cont;
          }
        });
        return false;
      });
    });

/* Classe para ocultar o botão de download */
.hidden {
    visibility: hidden;
}


/* CSS do Snackbar */
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Cadastro</title>
  <link rel="stylesheet" type="text/css" href="assets/css/theme.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="assets/js/jquery.js"></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 id='btnEnviar' class="btn btn-primary btn-block btn-register">    
Enviar</button>
            
            <button id='btnDownload' class="hidden btn btn-primary btn-block btn-register">Download</button>
            

<!-- Snackbar -->
<div id="snackbar">E-mail enviado.</div>
        
</form>

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

</body>

</html>