calling php function from javacript using AJAX

[PhilEaton]

Sorry, I am very new to AJAX, and I while there are tons of examples out there, it is hard for me to understand. If you could please help me out with my specific example I'd much appreciate it. The AJAX syntax is just very strange to me. Anyway, I am validating a contact form in javascript. If it every field has values in it, then it is to call a php function included in the page to send the email. Could someone please show me how to do this and EXPLAIN it? I am very confused by how AJAX works. Server/client differences? Sorry. Thank you. Here is my code (that fails not using AJAX):

<?php 
        require_once("mail.php");
    ?>
    <script language='Javascript' type='text/javascript'>
        function validation(){
            var name = document.getElementById('name').value;
            var email = document.getElementById('email').value;
            var phone = document.getElementById('phone').value;             
            var subject = document.getElementById('subject').value;
            var message = document.getElementById('message').value;

            if (name == '') {   
                alert('Please enter your name.');
                location.reload(false);
            }
            else {
                if (email == '') {
                    alert('Please enter your email.');
                    location.reload(false);
                }
                else {
                    if (phone == '') {
                        alert('Please enter your phone number.');
                        location.reload(false);
                    }
                    else {
                        if (subject == '') {
                            alert('Please enter a subject.');
                            location.reload(false);
                        }
                        else {
                            if (message == '') {
                                alert('Please enter a message.');
                                location.reload(false);
                            }
                            else {
                                var send = confirm('Name: ' + name + '\r\nEmail: ' + email + '\r\nPhone: ' + phone + 'Subject: ' + subject + '\r\nMessage:\r\n' + message + '\r\nPress [Ok] to send or [Cancel] to return to the contact page.');
                                if (send) {
                                    window.location='';
                                }
                                else {
                                    location.reload(false);
                                }
                            }
                        }
                    }
                }
            }
        }
    </script>

I know the javascript works up to the part where I need to invoke the php sendmail() function. Thanks for the help and support!

[JorgeM]

Where is your Ajax code?

[PhilEaton]

Sorry, I don't have any, it doesn't make any sense to me. First, is there a way to forward all the variables that I could get by $_POST using AJAX?

[DarkMonarch]

Here's an exemple of AJAX code that delete an employee from our data:
Always remember that AJAX needs to send an HTTP request so PHP can return a response.
In this exemple the response is store in $chaine, so you can continue your php code around it.

$chaine = "<script type='text/javascript'>
            <!--
                function delEmploye(str){
                    var xmlhttp;
                    if (str==''){
                        document.getElementById('ici').innerHTML='';
                        return;
                    }
                    if (window.XMLHttpRequest){
                        xmlhttp=new XMLHttpRequest();
                    }else{// code for IE6, IE5
                        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
                    }
                    xmlhttp.onreadystatechange=function(){
                        if (xmlhttp.readyState==4 && xmlhttp.status==200){
                            document.getElementById('ici').innerHTML=xmlhttp.responseText;
                        }
                    }
                    xmlhttp.open('GET','supp.php?q='+str,true);
                    xmlhttp.send();
                }
            //-->
        </script>

And if you're like me just an exemple is not enough, you maybe want to start from scratch here: http://www.w3schools.com/ajax/default.asp

which shows you the basics.

have fun.

[PhilEaton]

The only issue I have is that I'm going to be passing a potentially massive message over the url as well. Is there a better way of passing the variables to the PHP page than over the url?

[DarkMonarch]

You cant pass variables directly from clients side to server side, because of security limitations. So far from my experience AJAX is the best way and the only alternative to do that.

I havent test size on my part, but i dont think youll have any problem.

Looking at the name of your php file and you just want to send the data via e-mail ?

Maybe you want to try this alternative: http://www.javascript-coder.com/javascript-form/javascript-email-form.phtml

[PhilEaton]

Here is how I got it working:

$.ajax({
                        type: "POST",
                        url: "mail.php",
                        data: {name: name.val(), email: email.val(), phone: phone.val(), subject: subject.val(), message: message.val()}
                    }).done(function(){
                        alert("Your message was sent. We will be in contact with you shortly.");
                        window.location="index.html";
                    });

[JorgeM]

For sending large amounts of data, I would go with POST as you did in your example. while its a little more coding when compared to GET, there are no limits with regard to size with POST (as far as I know). POST is more secure when compared to GET.

[PhilEaton]

Right, it just takes longer.. But I still think it's worth it. Thanks!

[goldentuna]

thanks for your solution.