Trouble passing slider value to php mail script

Question

I want to email the value of the slider along with some things they entered into my form to my php email script. This is how the form looks that will pass data to the POST method of mailer.php:

<form method="POST" action="mailer.php">
   Name:
   <input type="text" name="name" size="19"><br>
   <br>
   E-Mail:
   <input type="text" name="email" size="19"><br>
   <input type="hidden" name="slider_value" size="19" value=document.getElementById('sliderValue').value><br>
   <br>
  <input type="submit" value="Submit" name="submit">
</form>

document.getElementById('sliderValue').value is the call I make to get the value of the slider but when I pass this to the value of my hidden input slider_value I get back "document.getElementById('sliderValue').value" in the email that is sent by my php script. How would I pass the value instead?

Answer 1

Bind a function to the sliders "onSlide/onChange/whatever it's called" event that will update the hidden input field with the slider value. Also set the input value to the initial slider value on slider init. That should do the trick.

Answer 2

document.getElementById is a Javascript function. It probably won't do what you want it to unless you put it in a place where Javascript is accepted.

One way to pass the slider value is by putting the sliderValue element in the form that you are submitting.

If that is not an option, you can set the value of the slider_value element with Javascript. Either set an onsubmit attribute to the form like this:

<form method="POST" action="mailer.php"
    onsubmit="this.slider_value.value = document.getElementById('sliderValue').value">

or add an event listener to do it:

var form = document.forms[0];    //this may need to be changed depending on your form

function addSliderValue() {
    this.slider_value.value = document.getElementById('sliderValue').value;
}

if (form.addEventListener) {    //most browsers
    form.addEventListener("submit", addSliderValue, false);
} else if (form.attachEvent) {    //IE
    form.onsubmit = addSliderValue;
}