How can I post a variable to php and run that php on the same page?

Question

I am working on an inventory search for a local clothing store, and because of the way their website is setup, I need to run the php that pulls the data and organizes it run on the same page as the search form. (I assume this needs to be done with AJAX. I am very new to AJAX :P) Here are the current files.

Search.php

<?php
    include(dirname(__FILE__) . '/../inc/init.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf- 8" />
    <title>Inventory | The Loft Ames</title>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="popup.css"> 
    <link rel="stylesheet" type="text/css" href="../css/loft_fonts.css" />
    <link rel="stylesheet" type="text/css" href="../css/loft_style.css" />
    <link href="../admin/themes/css/bootstrap.min.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
a:link {
    color: #FFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFF;
}
a:hover {
    text-decoration: none;
    color: #FFF;
}
a:active {
    text-decoration: none;
    color: #FFF;
}
.form-search{
    text-align:left;
}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
background-color: black;
}
html, body { margin: 0; padding: 0; }
div#DP01 {
    position:relative;
    width:575px;
    /*margin: 0 auto;*/
}th{
    cursor:pointer;
}
</style>
</script>
</head>
<body>
<div id="layout">
<div id="DP01">
    <br><h27><center>Search Our Inventory at The Loft</center></h27><br>
<form action="/test/results.php" method="post">
Search here: <input type="text" name="search"><br>
<input type="submit"><br>
<script type="text/javascript" src="jquery.min.js"></script>

<!--<a href="#" onclick="doSomething();">Click Me!</a>-->
</form>
<br><br>
<!-- <h27><center>View Our Current Inventory</center></h27>
<center>
<a href="#" onclick="getTableRecordsSearch('latest');">Show Latest Inventory</a>
</center> -->

<br><br>
<h31><center>Please contact us if you have any additional questions <a class="popup" href="/popups/contact.html"><strong>here.</strong></a><br>or call us 515-232-9053.</center></h31>
<br><br>
</div>

    </div>
    <?php
include('footer.php');
?>
</body>
</html>

results.php

<?php

$search = $_GET['search'];
if ($search == "") {
    echo "Please enter a query. <a href='/search.php'>Click Here</a> to go back";
  break;
}
else {
$data = array('key' => $API_KEY,
              /*'consignorId' => '1',*/
              'query' => $search,
              'includeItemsWithQuantityZero' => 'false');

$data_string = json_encode($data);

$context = stream_context_create(array(
  'http' => array(
    'method' => "POST",
    'header' => "Accept: application/json\r\n".
          "Content-Type: application/json\r\n",
    'content' => $data_string
  )
));

$result = file_get_contents('https://user.traxia.com/app/api/inventory', false, $context);


$jsonData = $result;
$phpArray = json_decode($jsonData, true);
$phpArray = $phpArray['results'];
$activeonly = array_filter($phpArray, function($active) { return $status['status']=="ACTIVE"; });
$mykeys = array('name','sku','category','color','size','currentPrice');
}
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/test/css/search-results.css">
<script type="text/javascript" src="/test/js/tablesorter/jquery-latest.js"></script> 
<script type="text/javascript" src="/test/js/tablesorter/jquery.tablesorter.js"></script>
<script>
$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 
</script> 
</head>
<div class="CSSTableGenerator"> 
<table id="myTable" class="tablesorter">
     <thead>
        <tr>
           <?php
        foreach($mykeys as $k) {
            if ($k == "name") {
              $k = "Name";
            }
            if ($k == "sku") {
              $k = "SKU";
            }
            if ($k == "category") {
              $k = "Category";
            }
            if ($k == "color") {
              $k = "Color";
            }
            if ($k == "size") {
              $k = "Size";
            }
            if ($k == "currentPrice") {
              $k = "Price";
            }
            echo "<th style='cursor:pointer'>$k<img src='/test/images/UpDown.png' width='8px' height='auto' style='margin: 0px 20px'></th>";
        }
        ?>
        </tr>
        </thead>
        <tbody>
        <?php
        foreach($phpArray as $key => $values) {
            echo '<tr>';
            foreach($mykeys as $k) {
                if ($values['category'] == 'UNCATEGORIZED') continue;
                $value = $k == "currentPrice" ? '$' . number_format($values[$k]/100,'2') : $values[$k];
                echo "<td>" . $value . "</td>";
            }
            echo '</tr>';
        }
        ?>
     </tbody>
  </table>
  </div>
</html>

So basically I need to combine these two files while not running the second file until the search form has been submitted. Thanks!

Answer 1

Yes .. you can load with Javscript into a DIV on the page with search variables. This example has a login form, but the idea is the same. Form fields, a submitted form, etc.. I include a "please wait" loading message as well. This is designed this way because i have mutiple forms on the same page and i call the function to submit them seperately with the "formName" and "message" variables of the function.

function loader(message) {
    if (message == "" || message == null) {
        message = "Please wait ...";
    }
    $('#DivWhereYouWantData').html('<div style="width:100%;text-align:center;margin-top:150px;"><div style="font-size:20px;"><b>' + message + '</b></div></div>');
}
function submitForm(formName,message) {
    $.ajax({
        data: $("#" + formName).serialize(),
        type: $("#" + formName).attr('method'),
        url: $("#" + formName).attr('action'),
        beforeSend: function() {
            loader(message);
        },
        success: function(response) {
            $('#DivWhereYouWantData').html(response);
        }
    });
    return false;
}

and the jQuery in the header -

<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

and the HTML to go along with the scripts -

<form id="login" name="login" method="post" action="processLogin.php" onsubmit="return submitForm('login','Logging you in ...');">
    Logn: <input type="text" style="text-input" name="login" id="login" />
    Password: <input type="password" style="text-input" id="password" name="password" />                        
    <input style="background:none; border:none; padding:0; height:auto; width:auto;" type="image" src="img/signIn.png" />
</form>

<div id="DivWhereYouWantData">
    <!-- Dynamic content loads here -->
</div>

Answer 2

$("button").click(function(){
  $.ajax({
        url:"results.php",
        success:function(result){
              $("#div1").html(result);
     }
  });
});`

just use Jquery Ajax its the better way to do this and check out thsi link try the second answer it is too simple jQuery Ajax POST example with PHP

How can I post a variable to php and run that php on the same page?

Question

2 answers

solution1
0 2014-06-11 16:23:04

solution2
0 2014-06-11 16:24:36

How can I post a variable to php and run that php on the same page?

Question

2 answers

solution1 0 2014-06-11 16:23:04

solution2 0 2014-06-11 16:24:36

solution1
0 2014-06-11 16:23:04

solution2
0 2014-06-11 16:24:36