Question

hey guys,
i know how to create a simple php file that mails some information to me.

However what I don’t know is how to call that php-file with jquery and hand over a variable.
Handing over a variable might work with isset()...

How can I call this PHP mailer from jquery and do that HIDDEN from the user. So there should not pop up a new window and shouldn’t be a page refresh or anything like that.

$('a.report').click(function(e) {
        e.preventDefault();
        var id = $(this).attr('href');

        //call mail script and pass along the "id" variable

        //change text (maybe in a callback function IF THE MAILING WAS A SUCCESS.
        $(this).parent().text('Thank you for reporting.');

    })

So I have this a.report Link which should trigger the email script. In my email script I need to access the “id” variable set in jquery. And it would even be nice to have a callback function if the php script did it’s thing so I could output “Thank you for reporting”.

How to do that?

Thank you guys.

Answer 1

I would use $.post():

<script type='text/javascript'>
$(function(){
    function onReportPosted(data) {
        // data.status - either 'error' or 'success', from mailer.php
        // data.message - some text, from mailer.php
        $('.result').text(data.message);
    }
    $('a.report').click(function(e) {
        $('.result').text('sending report...');
        var data = {
            text: $('textarea[name=text]').val()
        };
        $.post(
            'mailer.php',
            data,
            onReportPosted,
            'json'
        );
        return false;
    });
});
</script>

And in mailer.php:

<?php
    if ( isset($_POST['text']) ) {
        // mail()...
        $result = array(
            'status' => 'success',
            'message' => 'thank you for reporting',
        );
    } else {
        $result = array(
            'status' => 'error',
            'message' => 'some error occurred',
        );
    }
    header('Content-Type: application/json');
    echo json_encode($result);
    exit;

---

Update: here’s a way how to “tie” callback to a specific element:

<script type='text/javascript'>
    $(function(){
        $('a.report').click(function(){
            var htmlElement = $(this).parent();
            var data = {
                // ...
            };
            $.post(
                document.location.toString(),
                data,
                function(data) {
                    htmlElement.html(data.message);
                },
                'json'
            );
            return false;
        });
    });
</script>