Unable to print success message using Jquery Ajax

user3004356

I'm using the Jquery Ajax to post a form data and display the success message. Everything works fine, but I'm not able to display the success message. Below is the code : Javascript

<script>
$(document).ready(function() {
    $('form').submit(function(event) { //Trigger on form submit                 
        $('#stage').empty();

        var postForm = { //Fetch form data
            "name": $("#name").val(),
            "element_4_1": $("#element_4_1").val(),
            "element_4_2": $("#element_4_2").val(),
            "element_4_3": $("#element_4_3").val(),
            "email": $("#email").val(),
            "input4": $("#input4").val(),
        };

        $.ajax({ //Process the form using $.ajax()
            type        : 'POST', //Method type
            url         : 'contact.php', //Your form processing file url
            data        : postForm, //Forms name
            dataType    : 'json',
            success     : function(data) {
                console.log("inside success3") ;
                alert(data);
                $("#stage").html(data);

                if (!data.success) { //If fails
                    if (data.errors) { //Returned if any error from process.php
                        $('.throw_error').fadeIn(1000).html(data.errors); //Throw relevant error
                        console.log("inside failure") ;
                    }
                } else {
                    console.log("inside success") ;
                    $('#stage').fadeIn(1000).append('<p>' + data.posted + '</p>'); 
                    console.log("inside success2") ;
                }
            }
        });
        event.preventDefault(); //Prevent the default submit
    });
});
</script>  

PHP :

<?php

ini_set('display_errors','On');
error_reporting(E_ALL);
$errors = array(); 
$form_data = array(); 
header('Content-type: application/json');
echo json_encode($form_data);

$name=$_POST['name'];
$phone=chop($_POST['element_4_1']);
$phone.=chop($_POST['element_4_2']);
$phone.=chop($_POST['element_4_3']);
$email=chop($_POST['email']);
$message1=chop($_POST['input4']);

if ($name && $phone && $email) { 

    $headers  = "MIME-Version: 1.0\r\n";
    $headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
    $headers .= "From: [email protected] \n";
    $recipient= "[email protected]";
    $subject="Online Enquiry   ";
    $message="\nName                   : $name\n";
    $message.="\nPhone                  : $phone\n";
    $message.="\nEmail ID               : $email\n";
    $message.="\nMessage                : $message1\n";

    //send auto-reply
    $subject_reply="Thank you for contacting us";
    $message_reply="Thank you for contacting us. We will get back to you shortly.";
    //mail($email, $subject_reply, $message_reply, $headers);

    //Send Mail
    //===========
    if(isset($recipient, $subject, $message, $headers)) {
        error_log($message);
        $form_data['status'] = 'success';
        error_log($form_data['status']);

    } else {
        $form_data['status'] = 'error';
        error_log($form_data['status']);

    } ?>  

HTML

<div id="stage">
</div>  

How can I print the success message

jeroen

You have this at the start of your php script:

echo json_encode($form_data);

where $form_data is an empty array at that time.

You should remove that and put it at the end.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

unable to receive success message from php to Ajax, jQuery

From Dev

Unable to print success messages after data is successful file upload in jquery ajax

From Dev

How to display success message only after sending the mail to recipient using Jquery Ajax

From Dev

Ajax on Success message

From Dev

jQuery: using $(this) inside of $.ajax success function

From Dev

Ajax using JQuery success function is not called

From Dev

JQuery/Ajax return Success message and display Saved indicator

From Dev

Success message is not showing in html page with ajax/jquery request

From Dev

clear jquery success/error message span class when ajax response is success

From Dev

unable to print dropdown value using Ajax

From Dev

JQuery bind on Ajax success

From Dev

parameters in jquery ajax success

From Dev

JQuery ajax success scope

From Dev

How to get the ajax response from success and assign it in a variable using jQuery?

From Dev

Bind dropdownlist from jquery ajax call success function using angularjs

From Java

jQuery ajax() using success, error and complete vs .done(), .fail() and always()

From Dev

Why not allowed using success in jquery datatable server side processing ajax?

From Dev

How to get the ajax response from success and assign it in a variable using jQuery?

From Dev

Iterating over JSON Data on AJAX Success Using JQuery

From Dev

How to print this value using AJAX JQUERY on HTML

From Dev

jQuery ajax return success data

From Dev

Jquery Pjax - Ajax success function

From Dev

Repeating jQuery Ajax success function

From Dev

jQuery AJAX no error or success fired

From Dev

jQuery $.ajax success not returning anything?

From Dev

jquery unbind and bind on ajax success

From Dev

jQuery ajax return success data

From Dev

jQuery AJAX success for certain form

From Dev

$ajax success response print HTML page

Related Related

  1. 1

    unable to receive success message from php to Ajax, jQuery

  2. 2

    Unable to print success messages after data is successful file upload in jquery ajax

  3. 3

    How to display success message only after sending the mail to recipient using Jquery Ajax

  4. 4

    Ajax on Success message

  5. 5

    jQuery: using $(this) inside of $.ajax success function

  6. 6

    Ajax using JQuery success function is not called

  7. 7

    JQuery/Ajax return Success message and display Saved indicator

  8. 8

    Success message is not showing in html page with ajax/jquery request

  9. 9

    clear jquery success/error message span class when ajax response is success

  10. 10

    unable to print dropdown value using Ajax

  11. 11

    JQuery bind on Ajax success

  12. 12

    parameters in jquery ajax success

  13. 13

    JQuery ajax success scope

  14. 14

    How to get the ajax response from success and assign it in a variable using jQuery?

  15. 15

    Bind dropdownlist from jquery ajax call success function using angularjs

  16. 16

    jQuery ajax() using success, error and complete vs .done(), .fail() and always()

  17. 17

    Why not allowed using success in jquery datatable server side processing ajax?

  18. 18

    How to get the ajax response from success and assign it in a variable using jQuery?

  19. 19

    Iterating over JSON Data on AJAX Success Using JQuery

  20. 20

    How to print this value using AJAX JQUERY on HTML

  21. 21

    jQuery ajax return success data

  22. 22

    Jquery Pjax - Ajax success function

  23. 23

    Repeating jQuery Ajax success function

  24. 24

    jQuery AJAX no error or success fired

  25. 25

    jQuery $.ajax success not returning anything?

  26. 26

    jquery unbind and bind on ajax success

  27. 27

    jQuery ajax return success data

  28. 28

    jQuery AJAX success for certain form

  29. 29

    $ajax success response print HTML page

HotTag

Archive