Show a success message after PHP form submission using AJAX

Question

I have a newsletter sign up in a bootstrap modal.

What I am trying to achieve is when a client submits their email, it should give a success message in the modal directly underneath, on the same page without redirecting to a new page.

I am new to AJAX so just some direction would be helpful.

Here is my HTML code

<form form id="form1" name="form1" method="post" action="process.php">
    <div class="input-group">
        <input class="btn btn-lg" name="email" id="email" type="email" placeholder="Your Email" required/>
        <button type="submit" class="button">Submit</button>
    </div>
</form>

And below is process.php

/* Database config */
$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_database = 'maxipakdb'; 
/* End config */

$mysqli = new mysqli($db_host, $db_user, $db_pass, $db_database);

/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
}

$email = $_POST['email'];

// Perform queries 

mysqli_query(
    $mysqli,
    "INSERT INTO maxipaktable (id,email) VALUES (NULL,'$email')"
);

echo $email;

Possible duplicate of [jQuery Ajax POST example with PHP](http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) — Epodax, Aug 16 '16 at 11:38

score 0 · Answer 1 · answered Aug 16 '16 at 11:38

0

Check this link: https://api.jquery.com/jquery.post/ Ajax Post method is what you need and it's pretty easy to understand actually.

answered Aug 16 '16 at 11:38

F.E.A

307
1
12

score 0 · Answer 2 · answered Aug 16 '16 at 11:48

Remove form name, action from html.

<form form id="form1">
    <div class="input-group">
        <input class="btn btn-lg" name="email" id="email" type="email" placeholder="Your Email" required/>
        <button type="submit" class="button">Submit</button>
    </div>
</form>

<!-- The result of the success message rendered inside this div -->
<div id="result"></div>

/* Attach a submit handler to the form */

 $(document).ready(function() {
 $("#form1").submit(function(event) {
         var ajaxRequest;

        /* Stop form from submitting normally */
        event.preventDefault();

        /* Clear result div*/
        $("#result").html('');

        /* Get from elements values */
        var values = $(this).serialize();

        /* Send the data using post and put the results in a div */
        /* I am not aborting previous request because It's an asynchronous request, meaning 
           Once it's sent it's out there. but in case you want to abort it  you can do it by  
           abort(). jQuery Ajax methods return an XMLHttpRequest object, so you can just use abort(). */
           ajaxRequest= $.ajax({
                url: "process.php",
                type: "post",
                data: values
            });

          /*  request cab be abort by ajaxRequest.abort() */

         ajaxRequest.done(function (response, textStatus, jqXHR){
              // show successfully for submit message
              $("#result").html('Submitted successfully');
         });

         /* On failure of request this function will be called  */
         ajaxRequest.fail(function (){

           // show error
           $("#result").html('There is error while submit');
         });

       });

score 0 · Answer 3 · answered Aug 16 '16 at 11:48

first, change your button submit to <button onclick='javascript:ajaxpost();'>Submit</button> to prevent for manually submit without ajax

second, put your success modal bootstrap with id (e.g id = modalnl)

third, put the codes below to your html file

function ajaxpost(){
    $.ajax({
        url: "process.php",
        type: 'POST',
        data: $('#form1').serialize(),
        error: function(xhr, status, error) {
            var err = eval("(" + xhr.responseText + ")");
            alert(err.Message);
        },
        success: function(data){
            $('#modalln').show();
        }
    });
}

score 0 · Answer 4 · answered Aug 16 '16 at 11:50

**Here is code for ajax. Remove action**
<form form id="form1" name="form1" method="post">
    <div class="input-group">
        <input class="btn btn-lg" name="email" id="email" type="email" placeholder="Your Email" required/>
        <button type="submit" class="button" id="contactform">Submit</button>
    </div>
</form>
<script type="text/javascript">
$("#form1").submit(function(e) {
  $.ajax({
         type: "POST",
         url: process.php,
         data: $("#contactform").serialize(), // serializes the form's elements.
         success: function(data)
         {
             $("#form1").html("<p>Thank you</p>");
         }
       });
  e.preventDefault(); // avoid to execute the actual submit of the form.
});
</script>

Show a success message after PHP form submission using AJAX

4 Answers4

Linked