JQuery-UI Slider - Storing Numerical Values to MySQL but Displaying String Values to the User

Question

I'm using the jquery-ui slider to create a continuous scale from Strongly Disagree to Strongly Agree (sample - http://enscholar.com/slider/). I've created an object to hold the different string values that I want to display, but I want to store the numerical values to the database - not the string.

This is what I have so far:

var p = {
            0: "Strongly Disagree",
    5: "Strongly Disagree",
    10: "Strongly Disagree",
    15: "Strongly Disagree",
    20: "Strongly Disagree",
            25: "Disagree",
    30: "Disagree",
    35: "Disagree",
    40: "Disagree",
    45: "Neutral",
            50: "Neutral",
    55: "Neutral",
    60: "Neutral",
            65: "Agree",
    70: "Agree",
    75: "Agree",
    80: "Agree",
            85: "Strongly Agree",
    90: "Strongly Agree",
    95: "Strongly Agree",
    100: "Strongly Agree"
         };

        $( ".slider" ).slider({
            animate:true,
            range: "min",
            value:50,
            min: 0,
            max: 100,
            step: 5,
            slide: function( event, ui ) {
                $( "#slider-result" ).val(p[ui.value]);
            }
        });
        $("#slider-result").val(p[$(".slider").slider("value")]);

        $( ".slider-2" ).slider({
            animate:true,
            range: "min",
            value:50,
            min: 0,
            max: 100,
            step: 5,
            slide: function( event, ui ) {
                $( "#slider-result-2" ).val(p[ui.value]);
            }
        });
        $("#slider-result-2").val(p[$(".slider-2").slider("value")]);
    });

From there I'm just collecting the value in an input - I have a feeling this is the problem, but I don't know where to go from here.

<input type="text" id="slider-result" name="career" readonly/>

Any ideas on how to display the string to the user, but store the numerical value to the database?

Any help is very much appreciated!!

Answer 1

Based on the value that was being entered into the slider, I used an if statement to link the range to a specific #message:

$(function() {
            $( ".slider" ).slider({
                animate:true,
                range: "min",
                value:0,
                min: 0,
                max: 100,
                step: 1,
                slide: function( event, ui ) {
                $( "#slider-result" ).val(ui.value);
                    if (ui.value >= 0 && ui.value < 20) {
                        $("#message").text("I could care less.");
                    } else if (ui.value >= 20 && ui.value < 40) {
                        $("#message").text("Loving what you do is overrated...");
                    } else if (ui.value >= 40 && ui.value < 60) {
                        $("#message").text("I guess it might be...");
                    } else if (ui.value >= 60 && ui.value < 80) {
                        $("#message").text("I want to love what I do.");
                    } else {
                        $("#message").text("I NEED to love my career!");
                    }
                }
            });

Then when displaying the slider you can call id="message" to display the string:

<div id="sliders">
      <form method="post" action="results.php">
          How important is it that you find a career that you love and are good at?
          <input type="hidden" id="slider-result" name="career" readonly/>
          <div class="slider"></div>
          <p id="message"><img src="images/slide.png" /></p>
       </form>
 </div>