Ajax does not send data

Question

Good morning everyone,

I am a kind of newbie concerning Ajax. I have already a php script which works. I know that my php needs to evolve with PDOs but it is another problem. But i want to implement ajax to avoid the reloading and because i want to learn it.

Php script:

<?php 

session_start();

require "connect.php";

$firstName  = $_POST['regFirstName']; 
$lastName  = $_POST['regLastName']; 
$companyName = $_POST['regCompanyName']; 
$email = $_POST['regEmail'];
$password = $_POST['regPassword'];
$confirmPwd = $_POST['regConfirmPwd'];    

$add = mysqli_query($con,"INSERT INTO user (firstName, lastName, companyName, email, password) VALUES ('$firstName' , '$lastName', '$companyName', '$email', '$password') ") or die("Can't  Insert! ");
mail($email, "Your registration has been successful, please note your registration details\n\n ID: $email\n\n Password: $password\n\n" ); 
$success = "Successful! <a href='../login.php'> Click Here </a> to log In.";
echo($success); 

And below the ajax script:

$(document).ready(function(){
    $("#regForm").submit(registration);

            function registration(){

                var regData = $("#regForm").serialize();

                $.ajax({
                    url: "regScript.php",
                    type: "POST",
                    data: regData,
                    success: function(){
                        console.log("ok");
                    },

                    error: function(){
                        console.log("regData");
                    }
                });      
    });

And the form:

<form id="regForm" name="regForm">
    <div>
        <input type="text" id="regFirstName" name="regFirstName">
    </div>

    <div>
        <input type="text" id="regLastName" name="regLastName">
    </div>

    <div>
        <input type="text" id="regCompanyName" name="regCompanyName">
    </div>

    <div>
        <input type="email" id="regEmail" name="regEmail">
    </div>

    <div>
        <input type="password" id="regPassword" name="regPassword">
    </div>

    <div>
        <input type="password" id="regConfirmPwd" name="regConfirmPwd">
    </div>
    <br>
    <div id="errorWindowRegister">
    </div>

    <br>

    <button type="reset" name="reset" id="rstRegister" href="#">Reset</button>
    <button type="submit" name="submit" id="regButton">Register</button>
</form>

I don't know how to retrieve the data from Ajax to Php. The Jquery code seems to work but the data is not well sent to Php.

How to retrieve the data with Ajax and send it to Php?

Regards, E

Answer 1

You forgot to add a semicolon in your script. Anyway you don't stop the event when sending the form. I think you would have another problem.

$(document).ready(function(){
    $("#regForm").submit(registration);
    function registration(){
        var regData = $("#regForm").serializeArray();
        $.ajax({
           //...
        })//; Semi-colon is missing here
    }) // Edit: And here extra ')' ?
});

Add your console output if you have any errors, please.

---

Edit

If the Ajax request is the problem, the following should solve your problem. I can't see the modification you already made. But I'm sur at 99% that sample will be helpful.

$(document).ready(function(){
    $("#regForm").submit( function(e) {

        e.preventDefault(); // Avoid page reload
        var regData = $("#regForm").serialize();

        $.ajax({
            url: "regScript.php",
            type: "POST",
            data: regData,
            dataType: "html", // You want retrieve html (I guess it's the default but it's better to be explicit)
            success: function(myReturnedHtml){
               console.log(myReturnedHtml); // Put the result where you want
            }
            //... 
        });
    }); 
});

Answer 2

What's that url is regScript in $.ajax call. It has to be regScript.php right.?

Answer 3

Your code should be this in the Ajax block

url: "regScript.php",
type: "POST",
data: "regData="+regData

Answer 4

    $(document).ready(function(){
        $("#regButton").click(function()
    {
             var regData = $("#regForm").serializeArray();
            $.ajax({
                url: "regScript.php",
                type: "POST",
                data: regData,
                success: function(){
                    console.log("OK");
                },
                error: function(){
                    console.log("NOT OK");
                }
            })  ;    
    });
   });

HTML

 <input type="button" name="submit" id="regButton" value="Register">