Get slider values from Jquery to PHP in different pages (Bootstrap-slider-master)

Question

I have a site with 3 images (arrows) that send you to another page, therefore: index.html -page1.php -page2.php -page3.php

For each there are a slider with bootstrap:

        <input id="ex1" data-slider-id='exSlider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5" data-slider-handle="triangle" style="width: 100%;"/>

        <input id="ex2" data-slider-id='exSlider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5" data-slider-handle="triangle" style="width: 100%;"/>

        <input id="ex3" data-slider-id='exSlider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5" data-slider-handle="triangle" style="width: 100%;"/>

I want to send the value of the slider to the other PHP page, for example if I click in the first image and the slider in in 8, when I go to page1.php, I want to see the slider number.

From the index.html, I got the slider values as follows:

    $(".slider").click(function(){

      var sli1 = $("#ex1").data('slider').getValue();

    });

I tough in use $_SESSION to store the values of each slider, but I don't know how to implement it, because the the way to get the slider value is on Jquery and the second page is on PHP.

So, how I store a value in Jquery site and then I access through PHP in different site?

Edit: I don't get to retrieve the values from the second page. My folder looks like:

-index.html

 <tr>
            <td>
            <div>
              <p>ABC</p>
                <input id="ex1" data-slider-id='Exsliser' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5"/>
            </div>
            </td>
            <a class="slider" href="slider/slider1.php"><img ></a>

In the same inside :

$(".slider").click(function(){

          $sliderID = $(this).closest('div').find('input').attr('id');
          $sliderValue = $(this).closest('div').find('input').data('slider').getValue();

          alert($sliderID +' - '+$sliderValue);

          //Send values to PHP script that updates them in $_SESSION
          $.post("session_val.php",{sliderID:$sliderID, sliderValue:$sliderValue});
        });

And in slider1.php:

<?php
session_start();

$val = $_SESSION['ex1'];

echo "<script type='text/javascript'>alert('$val');</script>";

?>

I have put session_start(); at the beginning of both files. The session_val.php file is in the same folder that index, but in other folder that slider1.php

Answer 1

For the arrow buttons that take you to another page, you could fire them with Javascript using "onclick". That would let you grab the value of the slider and pass it as a GET variable in the URL.

The below code assumes all the pages are in the same directory, so uses relative paths. You can easily adapt to your actual file structure -- or use absolute paths if necessary.

HTML:

<a onclick="get_slider('page2','ex2')">Page 2</a>

JS:

function get_slider(page,sliderID) {
    //Get value of specified slider
    $slideValue = $("#" + sliderID).data('slider').getValue();
    //Build the url, with page name, then slider value passed as parameter
    $url = page + ".php?slider=" + $slideValue;
    //Send user to the proper page
    window.location = $url;
}

PHP: On the destination page, you can get the slider value like this:

<?php $sliderValue = $_GET['slider']; ?>

EDIT: Reflecting my comment below, forget the stuff above and use ajax instead:

slider-value.php Simple script that takes two passed variables and updates the related $_SESSION variable.

<?php 
/*** Your database connection string here ***/

//Get passed values
$sliderID = $_POST['sliderID'];
$sliderValue = $_POST['sliderValue'];

//Put them into $_SESSION variable
$_SESSION[$sliderID] = $sliderValue;

?>

Javascript:

$('[data-slider-id]').change(function() {
    //Get slider's ID and value
    $sliderID = $(this).attr('id');
    $sliderValue = $(this).data('slider').getValue();

    //Send values to PHP script that updates them in $_SESSION
    $.post( "slider-value.php",{sliderID:$sliderID, sliderValue:$sliderValue});

});