Showing in the console.log but not on the page

Question

Hello!

I am creating a picker using a form. I have made it a multi-step form so one input box shows then you click next and the current one will hide and the next one will show, and there is a previous button which also works like that except it shows the previous form. Also, there is a counter which shows you how many products there are with your preferences. and it updates as you go along.

I want to able to get the user to fill out for example 3/5 form boxes but then they decide they only want to see the results as if they only filled out 2 of the 5 form boxes so they click previous and submit. What I want to be able to happen is for all the results to show the results of them filling out boxes 1 and 2 however the results will ignore the last box they filled in because it wasnt the screen they were currently on.

I have tried to do this several methods. I have tried creating a counter variable in jquery and everytime you click next it adds one and every time you click previous it goes down one. That bit works and the counter starts at 1. Then I tried sending the post data over to my PHP file using AJAX and i did something like:

$current = $_POST['current'];

If($current = 1) {
    Do the stuff I want it to
}

that didn't work. So i tried using a switch statement which i will show you in a minute. And it kind of works. As it shows in my console.log but it doesnt show on the counter like I want it to. Please can you try and help me?

Here is the code I am using at the moment.

Jquery (I have taken out the .validate function because i dont think it has anything to do with the question and the function that sends the form results to the PHP file because that bit is working and the timer functions because it doesnt have anything to do with my question.):

//setup before functions
var typingTimer; 
var doneTypingInterval = 500;
// Allowing the page to load
var formURL = "gatePicker.php";
var progress = 1;
$(".next").click(function(){
    if($("#safety_gate").valid()){
        progress = progress + 1;
    }
});
$(".previous").click(function(){
    progress = progress - 1;
});
// AJAX FUNCTION TO SEND THE CURRENT PROGRESS TO THE FILE
function progressCount() {
    $.ajax({
        type: "POST",
        url: formURL,
        data:{ progress: progress },
        success: function(data){
            console.log(data);
        }
    })
}

PHP File (The DBConnection is the file i am using for mydatabase connection) :

$width = $_POST["width"];
$fix = $_POST["fix"];
$colour = $_POST["colour"];
$height = $_POST["height"];
$material = $_POST["material"];
$current = $_POST["progress"];
$progress = (integer) $current;
switch ($progress) {
    case 1:
        $con = new DBConnection();
        $values = array(":width" => $width, ":width1" => $width, ":width2" => $width);
        $qry = "SELECT sku
            FROM picker_Safety_Gates
            WHERE $max >= CAST(:width AS UNSIGNED)
            AND $min <= CAST(:width1 AS UNSIGNED)
            OR $ex = CAST(:width2 AS UNSIGNED)";
        $con->setValues($values);
        $arr = $con->getArray($qry);
        $message = "Step 1";
        $status = "Success";
        break;
    case 2:
        $con = new DBConnection();
        $values = array(":width" => $width, ":width1" => $width, ":width2" => $width);
        $qry = "SELECT sku
            FROM picker_Safety_Gates
            WHERE $max >= CAST(:width AS UNSIGNED)
            AND $min <= CAST(:width1 AS UNSIGNED)
            OR $ex = CAST(:width2 AS UNSIGNED)";
        $con->setValues($values);
        $arr = $con->getArray($qry);
        $message = "Step 2";
        $status = "Success";
        break;
    case 3:
        $con = new DBConnection();
        $values = array(":width" => $width, ":width1" => $width, ":width2" => $width);
        $qry = "SELECT sku
            FROM picker_Safety_Gates
            WHERE $max >= CAST(:width AS UNSIGNED)
            AND $min <= CAST(:width1 AS UNSIGNED)
            OR $ex = CAST(:width2 AS UNSIGNED)";
        $con->setValues($values);
        $arr = $con->getArray($qry);
        $message = "Step 3";
        $status = "Success";
        break;
        default:
            $message = $progress;
            $status = "Error";
};
$data = array(
        'status' => $status,
        'message' => $message
);
echo json_encode($data);
exit;

Thanks in advance Ben :)

Welcome to the Treehouse Community

Looking to learn something new?

Ben Bastow

Ben Bastow

Showing in the console.log but not on the page