Pass value from javascript to PHP

Question

I am new to scripting and web development. I am displaying a CSV file in the pagination format. The code to display the CSV file is as below.

<?php
$names = file('demo.csv');
$page = $_GET['page'];

//constructor takes three parameters
//1. array to be paged
//2. number of results per page (optional parameter. Default is 10)
//3. the current page (optional parameter. Default  is 1)
$pagedResults = new Paginated($names, 20, $page);
$handle = fopen('demo.csv', 'r');
  if (($data = fgetcsv($handle, 1000, ',')) !== FALSE)
    {
    }

echo "<table border='3' bgcolor='#dceba9' style='float:center; margin:50'>";
echo '<tr><th>'.implode('</th><th>', $data).'</th></tr>';
//when $row is false loop terminates
while ( $row = $pagedResults->fetchPagedRow())
{
    echo "<tr><td>";
    //echo '<tr><th>'.implode('</th><th>', $data).'</th></tr>';
    $row1 = str_replace( ',', "</td><td>", $row );
    echo $row1;
    echo "</td></tr>";
}
fclose($handle);
echo "</table>";

//important to set the strategy to be used before a call to fetchPagedNavigation
$pagedResults->setLayout(new DoubleBarLayout());
echo $pagedResults->fetchPagedNavigation();
//$data1 = [];
$total_columns = 0;
$handle1 = fopen('demo.csv', 'r');
while (false !== ($row = fgetcsv($handle1, 1000, ','))) {
    0 === $total_columns and $total_columns = count($row);
    $i = 1;
    while (++$i <= $total_columns) {
         $data1[$i][] = (int) $row[$i - 1];
     }
}

$i = 0;
while (++$i <= $total_columns) {
    $_SESSION["min-column-$i"] = min($data1[$i]);
    $_SESSION["max-column-$i"] = max($data1[$i]);
}

$_SESSION['totalcolumns'] = $total_columns;
fclose($handle1);
?>

Now, based on the number of columns of the CSV file I need those many sliders. For the sliders the minimum and maximum values are based on the minimum and maximum values of the columns. The code for that is as below.

<?php include 'index.php'; ?>
<?php 
      $totalcolumns = $_SESSION["totalcolumns"];
?>

<!-- Activate Simple Slider on your input -->
  <h2>Keyword Scores</h2>
  <?php

$i = 1;
while (++$i <= $_SESSION['totalcolumns']) {
    $range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];?>
        <br><?php echo "Keyword" ?>
        <?php echo $i -1 ?>
        <br><input type="text" data-slider="true" data-slider-range="<?php echo $range ?>" data-slider-step="1">
        <?php } ?>

<form action = "update.php" method="post"><input type="submit" name="submit"value="SUBMIT"></form>

<script>
    $("[data-slider]")

        .each(function () {

            var range;
            var input = $(this);
            $("<span>").addClass("output")
                .insertAfter(input);
            range = input.data("slider-range").split(",");
            $("<span>").addClass("range")
                .html(range[0])
                .insertBefore(input);
            $("<span>").addClass("range")
                .html(range[1])
                .insertAfter(input);
        })
        .bind("slider:ready slider:changed", function (event, data) {
            $(this).nextAll(".output:first")
                .html(data.value.toFixed(2));

        });

</script>

Now, when I select the values in the slider and click on "SUBMIT" button, I should get the display of CSV updated accordingly. (i.e) only the rows satisfying the sliders should be displayed. I am not sure of how to do this part as I tried to include one more PHP file. But am not able to pass the values to the PHP file. Can someone please help me on this part?

Answer 1

AJAX is the art of exchanging data with a server. So you can send your desired values to a php script and get back the result in your javascript