Question

阿罗哈，我正在尝试开发一个有3个单词可供选择的滑块。但是我无法将这些单词保存为字母，我得到的只是1,2或3的数字:(

这是我的代码，也是图片:)

<form action="something.php" method="post" id="form">  
    <input type="range" min=1 max=3 step=1 name="slider"> 
        <div id="text"> 
            <span > Bad </span>
            <span> Ok </span>
            <span> Good </span>
        </div> 
        <input type="submit" value="next" id="but"/> 
    </input> 
</form>

所以这段代码显示了顶部的滑动条和字母（与我的css一起使用），但是当我点击“提交”时，在下一页（使用php），我得到1,2或3。但它应该是坏，好或好。我确定问题出在HTML代码中。

enter image description here

Answer 1

为什么不在处理提交时将数字分配给值？

if(isset($_POST['slider'])) {
    $array[1] = 'Bad';
    $array[2] = 'Ok';
    $array[3] = 'Good';

    // This is a simplified output, but this is essentially
    // the easiest way
    echo $array[$_POST['slider']];
}

Answer 2

仅使用html无法实现。

您可以在范围输入字段上创建隐藏输入字段和“更改”事件处理程序。事件处理程序将隐藏输入字段的值设置为与所选数字对应的标签（1：bad，2：ok，3：good）。

示例：

<form action="something.php" method="post" id="form">  
    <input type="range" min=1 max=3 step=1 name="slider" id="slider">
    <input type="hidden" name="sliderLabel" id="sliderLabel" />
    <div id="text"> 
        <span > Bad </span>
        <span> Ok </span>
        <span> Good </span>
    </div> 
    <input type="submit" value="next" id="but" />
</form>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function() {
    // function to update the value of the hidden field
    updateSliderLabel = function() {
        var selectedValue = $('#slider').val();
        var selectedLabel = $('#text > span').eq(selectedValue-1).text();

        $('#sliderLabel').val(selectedLabel);
    }

    // when slider is changed, call the update function
    $('#slider').on('change', function() {
        updateSliderLabel();
    });

    // when page is loaded, call the update function
    updateSliderLabel();
})();
</script>

这个解决方案的优点是，你可以在html代码中轻松采用你的标签，你不需要修改你的php逻辑。

Answer 3

有两种方式可以做你想做的事：

1 - html + javascript：

您应该在表单中添加hidden input，在提交表单之前，您可以在三者中给出一个值：Bad，OK，Good，根据滑块的值。

2 - php：

<?php

    $slider_index = intval($_POST['slider']);
    $word = '';
    switch ($slider_index) {
        case 1:
            $word = 'Bad';
            break;
        case 2:
            $word = 'OK';
            break;
        case 3:
            $word = 'Good';
            break;
    }

?>

如何制作滑块

3 个答案: