Passing a javascript variable to a php switch case statement

Question

The javascript parameter "Step" should trigger a switch-case function in php. If Step is one than trigger this piece of code in php and return the output by JSON.

If I take a look in firebug the post string is: Step=one&inputFname=rick&inputLname=bovenkamp I think this is correct. So the problem must be in the php file and I think it's in the $_POST part...

What am I doing wrong? Any help would be very great!

javascript code:

$(document).ready(function() {
    $("form#userForm").submit(function() {
        var inputFname = $('#inputFname').attr('value');
        var inputLname = $('#inputLname').attr('value');
            var Step = "one";
        $.ajax({
            type: "POST",
            url: "main.php",
            data: {Step: Step,inputFname: inputFname,inputLname: inputLname},
            dataType: "json",
            contentType:"application/json; charset=utf-8",
                success: function(data) {
                $("p.succesText").html(data.jsCode);
                    $("form#userForm").hide();
                $("div.success").fadeIn();
            },
            error: function(xhr, status, error) {
                $("form#userForm").hide();
                $("p.errorHead").html("Something went wrong.");
                $("p.errorText").text("ResponseText: " + xhr.responseText
                                        + "Statuscode: " + xhr.status
                                        + "ReadyState: " + xhr.readyState);
                $("div.error").fadeIn();
            }
        });
            return false;
    });
});     

PHP file:

<?php header('content-type: application/json; charset=utf-8');

    $log = array();

    $varStep = htmlspecialchars(trim($_POST["Step"]));  

    switch($varStep) {

        case "one":

        $varFname = htmlspecialchars($_POST["inputFname"]);
        $varLname = htmlspecialchars($_POST["inputLname"]);

        //Make Database connection
        $db = mysql_connect("192.168.178.254","root","852456");
        if(!$db) die("Error connecting to MySQL database.");
        mysql_select_db("Ajax" ,$db);

        //Generate code and check if code already exists in the database
        do
        {
            $varCode = rand(10000, 99999);
            $dbCheckCode = "";
            $dbCheckCode = mysql_query("SELECT * FROM TableAjax WHERE code='$varCode'");
        }
        while (mysql_fetch_array($dbCheckCode) !== false);

        //Save the Form data in the database
        $sql = "INSERT INTO TableAjax (fname, lname, code) VALUES (".PrepSQL($varFname) . ", " .PrepSQL($varLname) . ", " .PrepSQL($varCode) . ")";
        mysql_query($sql);  

        //Return code to frontend
        $log['jsCode'] = $varCode;

        break;
    }

    echo json_encode($log);


    //Clean SQL statement
    function PrepSQL($value)
    {
        if(get_magic_quotes_gpc()) 
        {
            $value = stripslashes($value);
        }
        $value = "'" . mysql_real_escape_string($value) . "'";
        return($value);
    }   

?>

Answer 1

Put Step in quotes data : {"Step" : Step,... .

You are passing the value of the variable as the key in that case, that is to say you are actually passing data : {"one" : "one",... . You should do the same with inputLname and inputFname .

Edit - Explanation

If you look at what the contentType options does here at http://api.jquery.com/jQuery.ajax/ , you will see that the default is application/x-www-form-urlencoded which is what you want. Essentially what your PHP error was indicating is that the $_POST array was empty because it did not know how to read your data due to the format. You want your return data to be json , the dataType option was all you needed.

You still would have needed to do what I indicated in the first part of the post, but essentially you had two errors that were tripping you up.

I hope this makes sense!