post bootstrap-slider input data value using PHP

Question

I add multiple bootstrap-slider in my PHP page like this :

HTML:

<input type="text" class="sliderMaster slider-horizontal" id="sl2" name="q2" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">

JS:

$(function(){
  $('#sl2').slider({
        formater: function(value) {
          return 'Current value: '+value;
        }
  }).on('slideStop', function(ev){
     $(this).val($(this).data('slider').getValue());
  });
});

I need to change value when i slide ranger and post data input value with PHP $_POST form submit. But in action input value not change and i see default value. how do fix this and post data input value ?!

DEMO : http://jsfiddle.net/Sambora/D7Ctg/148/

Answer 1

If you are using multiple sliders then give input names like name='q[]' for all input slider elements

and access this input data in PHP POST like $_POST['q[0]'], $_POST['q[1]'], .... like this

and your modified code like this

<form id="formSlider" type="POST" action="abc.php">
    <input type="text" class="sliderMaster slider-horizontal sl2" name="q[]" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
    <br/>
    <br/>
    <input type="text" class="sliderMaster slider-horizontal sl2" name="q[]" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
    <br/>
    <br/>
    <input type="text" class="sliderMaster slider-horizontal sl2" name="q[]" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
    <br/>
    <br/>
    <input type="text" class="sliderMaster slider-horizontal sl2" name="q[]" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
    <br/>
    <br/>
    <input type='submit' value='Submit' />
</form>

and script

$( "#formSlider" ).submit(function( event ) { 
    var post_data = $("#formSlider").serialize();
    alert(post_data); 
});

$(function () {
    $('.sl2').slider({
        formater: function (value) {
            return 'Current value: ' + value;
        }
    }).on('slideStop', function (ev) {
        $(this).val($(this).data('slider').getValue());
    });
});

Note: added submit handler in script just to watch the results in alert box you can remove it.

Hope it works for you :)