PHP/Ajax Form Sumission

Question

I have designed a Sidebar Floating Form with PhP/Ajax which is working and sending submission to my targeted email. Here is the Link: http://logohour.com/form.html but when a v

Answer 1

Below the simple ajax form submission. Hope it will help your need.

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(function () {
    $('form#consultationForm').on('submit', function(e) {
        $.ajax({
            type: 'post',
            url: 'receivedConfirmation.php',
            data: $(this).serialize(),
            success: function (result) {
                console.log(result);
                $('#receivedStatus').attr('style','display:block');
                $('#receivedStatus').html(result);
            }
        });
        e.preventDefault();
    });
});     
</script>
<form id="consultationForm" method="post">
    Firstname: <input name="fname" />
    Lastname: <input name="lname" />
    <div style='clear:both;'></div>
    <input type="submit" name="submit" value="save"/>
    <input type="reset" name="cancel" value="cancel"/>
</form>
<div id='receivedStatus' style='display:none;'></div>

receivedConfirmation.php

<?php
 echo "<PRE>";
 print_r($_POST);
 echo "</PRE><br>";

 //do your DB stuffs here and finally echo your response based on success or failure

 echo "Thanks for sending your message! We'll get back to you shortly.";
 echo "<br>Click your browser's Back button to return to the page."
?>

Answer 2

First you have to avoid the normal form submission for this form and you can do this by using normal button instead of submit button.

<input type="button" id="sendMMessage" name="sendMMessage" value="Submit">

Execute a javascript ajax submit code onclick of sendMMessage id. and this will solve your problem.

Updated answer :

$( "#target" ).click(function() {
   // put your ajax form submit code here
  $.ajax({
           type: "POST",
           url: 'http://logohour.com/sidebar-form.php',
           data: $("#contact_form").serialize(), // serializes the form's elements.
           success: function(data)
           {
               console.log(data); // show response from the php script.
           }
         });
});

If you are still unclear about this I will explain you more detail.

thanks.