JavaScript — как я могу получить значения формы данных слайдера Zurb Foundation
Я делаю форму здесь, используя некоторые компоненты Фонда. Я использую слайдер:
// the slider element. starts at 1 ends at 4 allows 1 step at a time
<div class="slider" data-slider data-start="1" data-initial-start="1" data-step="1" data-end="4">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="select"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
// the input box that shows the sliders value
<input type="number" id="select" name="select" size="2">
Теперь вот моя проблема, с которой мне нужна помощь: когда форма отправляется (метод POST), она отправляет значение ввода (как и положено), но его обычный текст и Id хотели бы зашифровать его, поэтому значения переменных POST не очевидны. ,
Однако, поскольку вывод значения from, похоже, происходит из плагина javascript (слайдера), я не знаю, как захватить его значение и зашифровать его перед отправкой.
Как я могу сделать что-то вроде этой работы:
value=<?php echo my_encrypt("", $key); ?>
где «» — это значение ползунка.
Решение
Вы не сможете использовать PHP для шифрования значения, так как это технология на стороне сервера. Ваше шифрование должно быть сделано в JavaScript.
Я предполагаю, что у вас есть веская причина для шифрования, но в любом случае быстро упомяните об этом: если вы отправляете по HTTPS, вам не нужно шифровать отправляемые вами значения. HTTPS уже делает это.
Если вы не отправляете по HTTPS, один из подходов состоит в том, чтобы удалить имя из текущего ввода номера, чтобы оно не отправлялось вместе с формой, и сохранить второй скрытый ввод с зашифрованным значением, например, так:
// the input box that shows the sliders value
<input type="number" id="select" size="2">
// the input that will store the encrypted value
<input type="hidden" name="select" value="">
Затем, всякий раз, когда значение ползунка изменяется, зашифровывает значение на входе видимого числа и сохраняет его на скрытом вводе (я полагаю, поскольку вы используете Foundation, вы можете использовать jQuery):
$(document).on('changed.zf.slider', '[data-slider]', function(event) {
var $slider = $(event.currentTarget);
var $numberInput = $slider.siblings('#select');
var $hiddenInput = $slider.siblings('[name="select"]');
var numberInputValue = $numberInput.val();
var encryptedValue = yourEncryptionFunction(numberInputValue);
$hiddenInput.val(encryptedValue);
});
Когда ваша форма отправлена, зашифрованное значение, которое вы сохранили в скрытом вводе, будет отправлено, а ввод видимого числа будет проигнорирован, поскольку у него нет атрибута имени.
Другие решения
Других решений пока нет …