获取不同页面中从Jquery到PHP的滑块值（Bootstrap-slider-master）

Question

我有一个包含 3 张图片（箭头）的网站，可以将您转到另一个页面，因此： index.html -page1.php -page2.php -page3.php

每个都有一个滑块 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%;"/>

我想将滑块的值发送到另一个 PHP 页面，例如，如果我在第一个图像中单击并在 8 中单击滑块，当我转到 page1.php 时，我想查看滑块编号。

从 index.html 中，我得到的滑块值如下：

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

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

    });

我很难用$_SESSION来存储每个滑块的值，但我不知道如何实现它，因为获取滑块值的方法在Jquery和第二页在 PHP.

那么，我如何在 Jquery 站点中存储一个值，然后在不同的站点中通过 PHP 访问？

编辑： 我无法从第二页检索值。我的文件夹看起来像：

-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>

在同里面:

$(".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});
        });

在 slider1.php 中：

<?php
session_start();

$val = $_SESSION['ex1'];

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

?>

我把session_start();在两个文件的开头。 session_val.php 文件在与索引相同的文件夹中，但在 slider1.php

的其他文件夹中

Answer 1

我建议您将输入包装在一个表单中。

<form action="page2.php" method="post">
 <input type="range" name="input1">

  <button type="submit">Next page</button>
</form>

这样，当用户提交表单时，您将可以通过 $_POST['input1'] 访问输入中的值。

您可以对其余页面采用类似的方法。您基本上是在实施一个多步骤表单。

Answer 2

对于将您带到另一个页面的箭头按钮，您可以使用 Javascript 使用 "onclick" 触发它们。这样您就可以获取滑块的值并将其作为 GET 变量传递给 URL.

以下代码假定所有页面都在同一目录中，因此使用相对路径。您可以轻松地适应您的实际文件结构——或在必要时使用绝对路径。

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: 在目标页面上，您可以获得这样的滑块值：

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

编辑：反映我在下面的评论，忘记上面的内容并使用 ajax 代替：

滑块-value.php 采用两个传递的变量并更新相关的 $_SESSION 变量的简单脚本。

<?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});

});

获取不同页面中从Jquery到PHP的滑块值（Bootstrap-slider-master）

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

php

jquery

html

twitter-bootstrap

jquery-ui-slider