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 type out the value in the form beside the slider

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

Could I call from the div or something like that?

Edit! All right here we go, I'm sorry if I'm confusing you all, but English is not my native language. I will try and explain.

I have a contact form in HTML5, that submits the data to mail.php.

<input type="text" name="name"/>
<input type="email" name="email"/>

In mail.php I fetch the value from the input boxes by

$name = $_POST['name'];
$email = $_POST['email'];

And then processing further to send the actual mail.

So far, so good?

I have a Range Slider that determines how many passengers user want to book.

<input type="range" min="1" max="12" step="1" value="1" name="passengers" onchange="showValue(this.value)" />
<span id="range">1</span></p></div>

I use JavaScript function because I want to show the current selected value of the slider to the user as he/she progresses through the form.

But I myself of course want to get this value in mail.php to the send mail as well. I can`t request value from the range name. So I was wondering if maybe I could access the value from the div id range or something?

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.