슬라이더 막대를 만드는 방법

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 코드에 있다고 확신합니다.

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 : 불량, 2 : 양호, 3 : 양호)에 해당하는 레이블로 설정합니다.

예 :

<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 + 자바 스크립트 :

당신은 당신의 양식을 제출하기 전에 당신이 사이에 그것을 값을 제공 양식에 hidden input을 추가해야합니다 3 : 나쁜, 좋아, 좋은 슬라이더의 가치에 따라.

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

?>