how do i get zurb foundation slider data form values

Question

Im making a form here using some Foundation components. Im using the slider:

// 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">

Now here is my issue that I need help with, when the form is submitted (POST method) it sends the value of the input (just like it should) but its plain text and Id like to encrypt it so the POST vars values arent obvious.

However, since the output of the from value seems to come from a javascript plugin (the slider) I dont know how to capture its value and encrypt it before its sent.

How can I make something like this work:

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

where the "" is the value of the slider.

Answer 1

You won't be able to use PHP to encrypt the value, since it's a server-side technology. Your encryption will need to be done in JavaScript.

I'll assume you have a good reason for encrypting, but quickly mention this anyways: if you're submitting over HTTPS, there is no need to encrypt the values you send. HTTPS is doing that already.

If you're not submitting over HTTPS, one approach is to remove the name from your current number input so that it doesn't get submitted with the form, and keep a second hidden input with the encrypted value, like so:

// 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="">

Then, whenever the slider value changes, encrypt the value in the visible number input and store it in the hidden input (I'm assuming since you're using Foundation you can use 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);
});

When your form is submitted, the encrypted value you've stored in the hidden input will be submitted and the visible number input will be ignored since it has no name attribute.