This is my main page where the user can choose a category from a drop down. I need that category selection to update my session variable so I can then send that variable to another php page execute a query and return the result in my div because I do not want the entire page reloading everything the users hits submit.

Main issue: I cannot figure out how to reset/set the session variable when a user clicks submit then push that session variable to the next page for processing and return that page results back into my div.

Mainpage.php

<?php
session_start();
if (isset($_POST['Submit'])) {
      $_SESSION['ServiceOrders'] =  $_POST['ServiceOrders'];
    }
?>
<!DOCTYPE html>
<html>

  <head>   
      <link rel='stylesheet' type='text/css' href='styles.css' />
      <link rel="stylesheet" href="grid.css" type="text/css" />
      <link rel="stylesheet" href="backgroundcss.css" type="text/css" />
<style>
form { width: 700px; }
label { float: left; width: 100px; }
input[type=text] { float: left; width: 200px; }
.clear { clear: both; height: 0; line-height: 0; }
.floatright { float: right; }

</style>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <script type='text/javascript' src='menu_jquery.js'></script>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>      
<script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });


 $(function() {
     $("#refresh").on("click", function() {
        $("#mydiv").load("http://192.241.175.69/ServiceOrderReport.php");
        return false;
    })
  })

</script>
  </head>
  <body  class="container">
  <br>
<div id='cssmenu'>
<ul>
</ul>
</div>

<br>

<form action="ServiceOrderReport.php" method="post">
<select name="ServiceOrders">
  <option value="Network Error">Network Error</option>
  <option value="Reverse Rotation Detected">Equipment Error</option>
  <option value="Cover Off">Failure</option>
  <input type="text" name="sdate"id="datepicker" >
  <input type="submit" id ="refresh" value=" Submit " name ="Submit"/><br />
</select>
</form>


<div id="mydiv" class="grid_12 omega scroll">

</div>   

<div class="grid_12 ">   
    <div   id="TopBorder"  class="grid_12">
        <footer class="mainFooter">
            <p>Copyright &copy; 2014 <a href="http://test.com">test.com</a></p>
        </footer>
    </div>
</div>   

  </body>

</html>

This is my ServiceOrderReport.php page where I am attempting to push the session variable into the query then pull the results back to my my main.php page. It works perfectly if the session variable is random static variable that I set.

<?php
 session_start();
?>
<html>
  <head>   
      <link rel='stylesheet' type='text/css' href='styles.css' />
      <link rel="stylesheet" href="grid.css" type="text/css" />
      <link rel="stylesheet" href="backgroundcss.css" type="text/css" />
<style>
form { width: 700px; }
label { float: left; width: 100px; }
input[type=text] { float: left; width: 200px; }
.clear { clear: both; height: 0; line-height: 0; }
.floatright { float: right; }

</style>
  <body  class="container">
        <?php
        // Make a MySQL Connection
    mysql_connect("localhost", "root", "23moon") or die(mysql_error());
    mysql_select_db("BEI_ANALYTICS_META_DB") or die(mysql_error());

    $ServiceOrders= $_SESSION["ServiceOrders"];

    $result = mysql_query("Select ID,StreetNumber,StreetName,City,ZipCode,HardwareID,CreatedDate,ServiceOrderdesc 
                            From ServiceOrders 
                            Where ServiceOrderdesc = '$ServiceOrders'  
                            order by CreatedDate,StreetName,StreetNumber limit 1000;") 
    or die(mysql_error());  

    echo '<table class="bordered">
<thead>
    <tr>
        <th scope="col">ID</th>
        <th scope="col">HardwareID</th>       
        <th scope="col">StreetNumber</th>
        <th scope="col">StreetName</th>
        <th scope="col">City</th>     
        <th scope="col">ZipCode</th>                  
        <th scope="col">CreatedDate</th>
        <th scope="col">ServiceOrderdesc</th> 
    </tr>
</thead>
<tbody>';


    // keeps getting the next row until there are no more to get
    while($row = mysql_fetch_array( $result )) {

        echo "<tr><td>"; 
        echo $row['ID'];
        echo "</td><td>"; 
        echo $row['HardwareID'];
        echo "</td><td>";         
        echo $row['StreetNumber'];
        echo "</td><td>";         
        echo $row['StreetName'];
        echo "</td><td>";         
        echo $row['City'];
        echo "</td><td>";         
        echo $row['ZipCode'];
        echo "</td><td>";         
        echo $row['CreatedDate'];
        echo "</td><td>"; 
        echo $row['ServiceOrderdesc'];
        echo "</td></tr>"; 

    } 

    echo "</tbody></table>";
?>
</body>

</html>

if you do

var_dump($_SESSION["ServiceOrders"]);

, it will give you all the hints you need on how to index the stored session vars.

try it.. :)

That kind of helped and I appreciate it. statically I run into no issues.However, my issue is setting the variable after a user clicks the submit button and using the post form data, thats where I am running into issues.

Why don't you use the second parameter of the load() function for sending it over to the theServiceOrderReport.php. You basically do not need a session var for that.

First add an ID to the select element:

<select name="ServiceOrders" id="ServiceOrders">

Then read its value and send it over with the load():

$("#refresh").on("click", function() {
    // selected value
    var categoryVal = $("#ServiceOrders").val();
    $("#mydiv").load("http://192.241.175.69/ServiceOrderReport.php", categoryVal);
return false;
})

Read it from the $_POST array and use it in the query (you can also store it in session var here):

$ServiceOrders= $_POST["ServiceOrders"];

I think the issue is something to do with the code below. when its fired i think it is happeneing before I can send the posted data to the ServiceOrderReport.php

 $(function() {
     $("#refresh").on("click", function() {
        $("#mydiv").load("http://192.241.175.69/ServiceOrderReport.php");
        return false;
    })
  })

@broj1 thanks but still no luck. Your code was taking me to the ServiceOrdersReport.php page instead of loading it in the div on the currnet page.

Yes, I was a bit quick, sory. The thing is you want to use ajax to send a request to another php page which then sends a response which is a html code for a table containing results. You send a ServiceOrders category parameter along to use it as a filter in the query. Maybe the best would be to use the jquery post() method which sends a request along with the parameter and puts the response in the div you wanted. Mind you, the called php page does not have to have all the html stuff (like head tags etc) only the php code querying the database and echoing the html table displaying the results. Also I would use data in a JSON instead of string and I moved the script to the bottom of the html. I tested the code below and it works .

<!DOCTYPE html>
<html>

<head>   

<link rel='stylesheet' type='text/css' href='styles.css' />
<link rel="stylesheet" href="grid.css" type="text/css" />
<link rel="stylesheet" href="backgroundcss.css" type="text/css" />
<style>
form { width: 700px; }
label { float: left; width: 100px; }
input[type=text] { float: left; width: 200px; }
.clear { clear: both; height: 0; line-height: 0; }
.floatright { float: right; }

</style>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <script type='text/javascript' src='menu_jquery.js'></script>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>      
<script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });


 $(function() {
     $("#refresh").on("click", function() {
        $("#mydiv").load("http://192.241.175.69/ServiceOrderReport.php");
        return false;
    })
  })

</script>

</head>
  <body  class="container">
  <br>
<div id='cssmenu'>
<ul>
</ul>
</div>

<br>

<form action="ServiceOrderReport.php" method="post">
<select name="ServiceOrders" id="ServiceOrders">
  <option value="Network Error">Network Error</option>
  <option value="Reverse Rotation Detected">Equipment Error</option>
  <option value="Cover Off">Failure</option>
  <input type="text" name="sdate"id="datepicker" >
  <input type="submit" id ="refresh" value=" Submit " name ="Submit"/><br />
</select>
</form>


<div id="mydiv" class="grid_12 omega scroll">
TEST
</div>   

<div class="grid_12 ">   
    <div   id="TopBorder"  class="grid_12">
        <footer class="mainFooter">
            <p>Copyright &copy; 2014 <a href="http://test.com">test.com</a></p>
        </footer>
    </div>
</div>   

<script>

     $("#refresh").on("click", function() {
        // selected value
        var categoryVal = $("#ServiceOrders").val();
        $.post(
            // called page
            "ServiceOrderReport.php", 
            // parameter in JSON
            {ServiceOrders: categoryVal},
            // function to empty the mydiv and appent the html from the response
            function(data) {
                $("#mydiv").empty().append(data);
            });
        return false;
    })

</script>

  </body>

</html>

And the ServiceOrderReport.php script:

<?php
        // Make a MySQL Connection
    mysql_connect("localhost", "root", "23moon") or die(mysql_error());
    mysql_select_db("BEI_ANALYTICS_META_DB") or die(mysql_error());

    // $ServiceOrders= $_SESSION["ServiceOrders"];
    $ServiceOrders= $_POST["ServiceOrders"];

    $result = mysql_query("Select ID,StreetNumber,StreetName,City,ZipCode,HardwareID,CreatedDate,ServiceOrderdesc 
                            From ServiceOrders 
                            Where ServiceOrderdesc = '$ServiceOrders'  
                            order by CreatedDate,StreetName,StreetNumber limit 1000;") 
    or die(mysql_error());  


    echo '<table class="bordered">
<thead>
    <tr>
        <th scope="col">ID</th>
        <th scope="col">HardwareID</th>       
        <th scope="col">StreetNumber</th>
        <th scope="col">StreetName</th>
        <th scope="col">City</th>     
        <th scope="col">ZipCode</th>                  
        <th scope="col">CreatedDate</th>
        <th scope="col">ServiceOrderdesc</th> 
    </tr>
</thead>
<tbody>';


    // keeps getting the next row until there are no more to get
   while($row = mysql_fetch_array( $result )) {

        echo "<tr><td>"; 
        echo $row['ID'];
        echo "</td><td>"; 
        echo $row['HardwareID'];
        echo "</td><td>";         
        echo $row['StreetNumber'];
        echo "</td><td>";         
        echo $row['StreetName'];
        echo "</td><td>";         
        echo $row['City'];
        echo "</td><td>";         
        echo $row['ZipCode'];
        echo "</td><td>";         
        echo $row['CreatedDate'];
        echo "</td><td>"; 
        echo $row['ServiceOrderdesc'];
        echo "</td></tr>"; 

    } 

    echo "</tbody></table>";
?>

@broj1 Thank you so much. You honestly saved me another 10 hours of work at least!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.