我如何获取zurb基础滑块数据表单值

Question

我在这里使用一些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 vars值不明显。

但是，由于from值的输出似乎来自javascript插件（滑块），因此我不知道如何捕获其值并在发送前对其进行加密。

我该如何进行以下工作：

value=<?php echo my_encrypt("", $key); ?>

其中“”是滑块的值。

Answer 1

您将无法使用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);
});

提交表单后，将保存已存储在隐藏输入中的加密值，而可视数字输入将被忽略，因为它没有名称属性。