How is the data being passed from java script to php?

Question

Okay, so I've been trying to learn web programming for a project that I need to submit soon. Anyways, I've stumbled on a tutorial that I cannot, for the love of me, understand how does the data from his javascript is passed to the php script that he wrote.

Here's the snippet.

Javascript:

        $("form").submit(function(event) {
            event.preventDefault();
            var name = $("#mail-name").val(); 
            var email = $("#mail-email").val(); 
            var gender = $("#mail-gender").val(); 
            var massage = $("#mail-massage").val(); 
            var submit = $("#mail-submit").val();  
            $(".form-message").load("mail.php",{
                name: name,
                email: email,
                gender: gender,
                massage: massage,
                submit: submit
            });
        })

    })

PHP:

    $name = $_POST['name'];
    $email = $_POST['email'];
    $gender = $_POST['gender'];
    $massage = $_POST['massage'];

    $errorEmpty = false;
    $errorEmail = false;

    if(empty($name) || empty($email) || empty($massage)) {
        echo "<span class='from-error'> Fill in all fields!</span>";
        $errorEmpty = true; 
    }elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
        echo "<span class='from-error'> Write a valid e-mail address!</span>";
        $errorEmail = true; 
    }else{
        echo "<span class='form-success'> E-mall has been sent! </span>";
    }

how is the php here able to receive the data from the "form"? Also, on the $("form") should this be either an ID or a CLASS set for the form that will contain the information (that wasn't mentioned in the tutorial).

Lastly, is the.load("mail.php") the one responsible for sending the data to php?

If so, why did he add $(".form-message") which is ap tag.

Answer 1

First of all, the $("form") reffer to the <form> html tag in your page.

So basicaly, $("form").submit reffer to an event form click(submit of the form).

The .form-message is a class of a div or p... which will contain the response of the mail.php .In the example here it could be on of those lines:

<span class='from-error'> Fill in all fields!</span>
<span class='from-error'> Write a valid e-mail address!</span>
<span class='form-success'> E-mall has been sent! </span>

The load jquery function here is going to make an HTTP Request sending parameters to the mail.php file.

{
   name: name,
   email: email,
   gender: gender,
   massage: massage,
   submit: submit
} 

The php file in going to map the given parameter as:

 $name = $_POST['name'];
 $email = $_POST['email'];
 $gender = $_POST['gender'];
 $massage = $_POST['massage'];

Remember that parameters name should be kept the same.

Check out here some useful links about:

JQuery load function

PHP: variables from external sources

Answer 2

When you are submitting data from a form, with either GET or POST, it goes to the action parameter in that form which can be a php script.The.load() function gets the mail.php file with the parameters which you set in your javascript, and returns some html code which gets appended in your p tag ( the.form-message ).

So when you load it, and set those parameters, that's when the js is sending the data to the PHP.

$("form") means any form on the page. $("#form") is selecting the element with the ID form, and $(".form") is selecting the element with the class form.