Блог

У меня есть простой ползунок диапазона, который позволяет пользователю выбирать возраст

 <div>
 <label for="age">Age: </label><label id="ageOutput"></label><br><br>
 <input type="range" id="age" name="vol" min="0" max="99" value="16">
 <br>
 <span class="error">* <?php echo $ageErr;?></span>
</div>
  

И я использую JavaScript для обновления метки со значением ползунка

 <script>
 var slider = document.getElementById("age");
 var output = document.getElementById("ageOutput");
 output.innerHTML = slider.value; // Display the default slider value

 slider.oninput = function() {
 output.innerHTML = this.value;
 }
</script>
  

Я пытаюсь использовать PHP для проверки значения ползунка и проверки того, находится ли оно между 16 и 90, но я продолжаю получать сообщение об ошибке, что «возраст» не существует.

Это PHP:

 if (($_POST["age"]) < 16 || ($_POST["age"]) > 90)
    {
      $ageErr = "Customers must be aged 16-90";
    } 
    else 
    {
      $rangeSlider = test_input($_POST["ageOutput"]);
    }
  

Не совсем уверен, куда идти дальше, потому что этот метод работал для других значений в форме.

Вы должны внести изменения в некоторую часть HTML-кода.

 <input type="range" id="age" name="vol" min="0" max="99" value="16">
  

слышал, вам нужно заменить name="vol" на name="age" .
Я думаю, что после такого рода изменений в коде ваш код работает нормально.

Для вашей проблемы второе решение заключается в том, что вы должны создать скрытое поле ввода.
при изменении диапазона код javascript автоматически изменяет скрытое входное значение.

 <div>
 <label for="age">Age: </label><label id="ageOutput"></label><br><br>
 <input type="range" id="age" name="vol" min="0" max="99" value="16">
 <input type="hidden" id="setage" name="age"/>
 <br>
 <span class="error">* <?php echo $ageErr;?></span>
</div>
  

Слышите ли вы js-код:

 <script>
    var slider = document.getElementById("age");
     var output = document.getElementById("ageOutput");
     var setage = document.getElementById("setage");
     output.innerHTML = slider.value; // Display the default slider value
     setage.value=slider.value;
     
     slider.oninput = function() {
      output.innerHTML = this.value;
      setage.value = this.value;
     }
</script>