How to get/fetch HTML5 Range Slider's value in PHP?

Question

How do I get the value of my range slider that sits in a form?

I cant get a value from it by just asking from the name.

I use this JavaScript function to typ

Answer 1

So, You want a slider, which displays its current value alongside itself and when form is submitted, your action file (mail.php) gets/retrieves Slider's selected value to process further. Right??

I believe that because:

You titled your question Send HTML 5 range slider value to mail via php, I interpret it to How to get the value of this range-slider in mail.php.

You said that you get the Input text boxes' value by doing a $_POST["foo"] on them.

So, in the same way, Range Slider's value is also available in $_POST array. I assume that you are using action=POST , because you mentioned $name = $_POST['name']

So, to get the value of this particular Range Slider, use:

$range_slider_value = $_POST["passengers"];

Of course, you should look into sanitizing form input and all other types of foreign input.

A fully functional snippet, which displays the value on User's computer, as he/she changes the slider and on Form-submit, gives it to your mail.php is:

<form action="" method="POST">
    <input type="range" min="1" max="12" step="1" value="1" id="foo" name="passengers" onchange='document.getElementById("bar").value = "Slider Value = " + document.getElementById("foo").value;'/>
<input type="text" name="bar" id="bar" value="Slider Value = 1" disabled />
<br />
<input type=submit value=Submit />
</form>

<?php
if(isset($_POST["passengers"])){
    echo "Number of selected passengers are:".$_POST["passengers"];
    // Your Slider value is here, do what you want with it. Mail/Print anything..
} else{
Echo "Please slide the Slider Bar and Press Submit.";
}
?>

Live Demo at Codepad.viper-7.com

To quote http://www.html5tutorial.info/html5-range.php,
Value is a common attribute of "Input" element. The value can be any valid floating point number, not necessary must be an integer number. Default value is minimum value plus half of the maximum value.

Do not confuse Javascript functionality with PHP functionality. PHP Works Server-side and can't alter anything once a page is generated. Javascript works on Client-side, and can alter the page even after it is rendered.

You said if maybe I could access the value from the div id range or something..
In jQuery, it is possible to fetch the value of a Div and can submit along with the Form data, but you don't need to go that route. A simple $_POST["passengers"]; will do.

Answer 2

document.getElementById("range").value should get the current value of the slider.

To make changes to the value this will then be the javascript.code;

function showValue(newValue) {
    document.getElementById("range").value = newValue; }

If you render the slider by PHP you could simply insert the value directly:

<input id="range" type="range" value="<?$theValue?>"/>