Post and echo data in php and ajax

Question

The page include 2 steps in form of divs each div is mentioned with id step1,step2. I want that when I click upon button(named as step1button) of step 1 then the data in step2 will appear on the bases of data posted by step 1 but using ajax.

Now the problem is that when I post data through ajax the Php code run after that but the variables value does not appear in the step2 on page but in inspect mode in network previews the values appear.

code is here

<!DOCTYPE html>
<html>
<head>
    <script src="plugins/jquery/jquery.min.js"></script>
</head>
<body>
<form method="POST" id="step1">
    <select id="coursename" name="coursename">
        <option>BCA</option>
        <option>BBA</option>
    </select>
    <select id="session" name="session">
        <option>2016</option>
        <option>2017</option>
    </select>
    <button type="button" id="step1button" name="step1button">NEXT</button>
</form>
<div  id="step2">
    <h2>STEP-2</h2>
    <?php
    if (isset($_POST['step1'])) {
        $coursename = $_REQUEST['coursename'];
        $session= $_REQUEST['session'];
        $startdate= $session.'-'.'8';
        $enddate=date('Y-m');
        $storestartdate=strtotime($startdate);
        $storeenddate=strtotime($enddate);
        $monthdiff= 0;
        while (($storestartdate = strtotime('+1 MONTH', $storestartdate)) <= $storeenddate){
            $monthdiff++;
        }
        switch ($monthdiff) {
            case $monthdiff < 5:
            $semester=1;
            break;
            case $monthdiff < 11:
            $semester=2;
            break;
            case $monthdiff < 17:
            $semester=3;
            break;
            case $monthdiff < 23:
            $semester=4;
            break;
            case $monthdiff < 29:
            $semester=5;
            break;
            case $monthdiff < 35:
            $semester=6;
            break;
        }
    }
    ?>
    <div>CLASS <?php echo $coursename.$semester?></div>
    <div>SESSION <?php echo $session?></div>
</div>
    <script>
        $(document).ready(function(){
            $("#step1").show();
            $("#step2").hide();
            $("#step3").hide();
            $("#step1button").click(function(){
                var coursename = $("#coursename").val();
                var session = $("#session").val();
                console.log(coursename);
                console.log(session);
                if(coursename=="" || session==""){
                    $("#alert").html("<div class='alert bg-pink'>Please select coursename and session</div>");
                    $("#coursename,#session").css('border-bottom','2px solid #E91E63');
                }
                else{
                    $.ajax({
                        method:'POST',
                        data:{step1:1,coursename:coursename,session:session},
                        success:function(){
                            $("#step2").show();
                            $("#step1").hide();
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>

Welcome to Stack Overflow! Your Code is quite lengthy and not self-sufficient. For example, what is written in`common_php_files/as_head.php`? If other people cannot reproduce your problem, they probably will not be able to help you. So I recommend that you take a few steps to improve your question. (1) Be sure to take the [tour] and to read our beginners' guide [How to ask](https://stackoverflow.com/help/how-to-ask). (2) Make a smaller version of your code which has the same problem and which everyone can run on their machines. If others can run it, they can fiddle around until they solve it. — akraf, Jun 13 '18 at 13:52
Also, please do not include pictures of code. It cannot be copied and cannot be read by people using screen readers. — akraf, Jun 13 '18 at 13:54
Also, you can debug your Javascript code, including inserting breakpoints, using answers from [this question](https://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — akraf, Jun 13 '18 at 13:55

score 1 · Answer 1 · edited Jun 18 '18 at 03:11

You only post the values with ajax, but don't evaluate the reponse. Thats not how ajax works.

Currently the content of each three steps is executed when the page is rendererd the first time. But as you only set $coursename and $step, when $_POST['step1'] was sent, this evaluates to an undefined variable error.

So how could you fix this issue? There are two options (maybe more..)

The ajax request returns the content of step2/3 in his response and you replace it inside of the js success-function
You pre-render the other steps with dummy fields and the ajax response contains json data, which could be used to fill the dummy fields with the actual content. This has also to be done inside the success-function.

In each case, if you want to use ajax, you have also to care about the response of your ajax, request.

will you please help mee by changing the above code according to you — parmpreet singh, Jun 18 '18 at 12:08
Solving your problem is to broad for this platform. I could only give you the advice to start with a simple ajax tutorial to learn the basics. From there, you could proceed and ask specific questions. — Philipp, Jun 18 '18 at 12:20

Post and echo data in php and ajax

1 Answers1