Callback message for php form

Question

I just want to know how i can send a "callback" message for "success" or "error".

I really don't know much about jquery/ajax, but, i tried to do this:

I have a basic form with some informations and i sent the informations for a "test.php" with POST method.

My send (not input) have this id: "#send". And here is my JS in the index.html

$(document).ready(function() {

            $("#send").click(function(e) {
                e.preventDefault();
                $(".message").load('teste.php');
            });

});

And, in my PHP (test.php) have this:

<?php

$name = $_POST['name'];

if($name == "Test")
{
    echo "Success!";
}
else{
    echo "Error :(";
}

?>

When i click in the button, the message is always:

Notice: Undefined index: name in /Applications/XAMPP/xamppfiles/htdocs/sites/port/public/test.php on line 3 Error :(

Help :'(

you are not sending your form data with your request. Checkout out https://api.jquery.com/jQuery.ajax/ on how to POST form data. — adamS, Apr 13 '14 at 05:37
possible duplicate of [PHP: "Notice: Undefined variable" and "Notice: Undefined index"](http://stackoverflow.com/questions/4261133/php-notice-undefined-variable-and-notice-undefined-index) — Sverri M. Olsen, Apr 13 '14 at 05:41

score 0 · Answer 1 · answered Apr 13 '14 at 05:42

The problem is you have not passed name data to your PHP Use My Javascript Code. Problem in understanding please reply

$(document).ready(function() {
    $(document).on('click','#send',function(e)
    {
        var params={};
        params.name="Your Name ";
        $.post('test.php',params,function(response)
        {
            e.preventDefault();
            alert(response); //Alert Response
            $(".message").html(response); //Load Response in message class div span or anywhere
        });
    });
});

score 0 · Accepted Answer · answered Apr 13 '14 at 05:42

0

This is your new JS:

$(document).ready(function()
{
    $("#send").click(function(e) {
        e.preventDefault();
        var form_data = $("#my_form").serialize();
        $.post('teste.php', form_data, function(data){
            $(".message").empty().append(data);
        });
    });
});

This is your new HTML:

<form id="my_form">
<input type="text" name="name" value="" />
<input type="button" id="send" value="Send" />
</form>

answered Apr 13 '14 at 05:42

Paul Denisevich

2,329
14
19

Wow! Is that what i need. Thanks buddy. Another question: There's a way to put a animation (loading) in this process? – reidark Apr 13 '14 at 05:48
@user3513330 Yes, just make a div with some ID and put an image there. Then before do something show it like $('#div_id').show(); and at the end hide it like $('#div_id').hide(); – Paul Denisevich Apr 13 '14 at 05:49
Thank you. Hmm, unfortunately the preventdefault "evade" the form "required" of html5, right? – reidark Apr 13 '14 at 06:05

score 0 · Answer 3 · answered Apr 13 '14 at 06:14

This is somewhat more complicated by you can use it more generally in your project. just add a new callback function for each of the forms that you want to use.

<form method="POST" action="test.php" id="nameForm">
    <input name="name">
    <input type="submit">
</form>

<script>
    // wrap everything in an anonymous function
    // as not to pollute the global namespace
    (function($){
        // document ready
        $(function(){
            $('#nameForm').on('submit', {callback: nameFormCallback },submitForm);
        });

        // specific code to your form
        var nameFormCallback = function(data) {
            alert(data);
        };

        // general form submit function
        var submitForm = function(event) {
            event.preventDefault();
            event.stopPropagation();

            var data = $(event.target).serialize();

            // you could validate your form here

            // post the form data to your form action
            $.ajax({
                 url : event.target.action,
                 type: 'POST',
                 data: data,
                 success: function(data){
                     event.data.callback(data);
                }
            });
        };
    }(jQuery));
</script>

Callback message for php form

3 Answers3