Jquery/HTML question saving values from a UI Slider

Question

Hey i want to save a value from a UI slider, i currently have the values showing up based on the slider value currently, but what i want to do is eventually save that data using a button.

HTML

<h3>
    <b>How happy are you today?</b>
</h3>
<img src="../Pic/Emoticons/Happy.png" style="width:auto; height:auto;" />
<br />

<div id="slider" style="width: 50%; margin: auto; padding: 1px; border: 1px;"></div>

<div id="s2" style="background : silver; width: 50%; margin: auto; padding: 1px; border: 1px ">0%</div>

<button id="happy">Submit</button>

Jquery

$("#slider").slider({

    max: 100,
    min: 0,
    change: function (event, ui) {

        $("#s2").html(ui.value+"%");
    },
    step: 10,

    range: 'min',



});

is what i have currently, eventually ill need to save this data to a database that is time stamped but at the moment i just want it to save the value of s2 when the button is clicked

Answer 1 · 2016-09-21T15:04:39Z

September 21, 2016 3:04pm

You need to be clear of what type of data you're trying to capture because I don't have the entire project. Right now, I will have to assume that you are trying to capture the changing text inside #s2 div. In that case, I would use the text() method to capture that information on a click event. So if your DOM is equivalent to the following markup where i slid my slider to a 12% position:

<html>
<head>
    <title>Button Click</title>

</head>
<body>
<div id="slider" style="width: 50%; margin: auto; padding: 1px; border: 1px;"></div>

<div id="s2" style="background : silver; width: 50%; margin: auto; padding: 1px; border: 1px ">12%</div> <!-- DOM action -->

<button id="happy">Submit</button>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>

I can use the following event handler to capture the 12% text that is currently showing:

$("#happy").on("click", function(){
    console.log($("#s2").text());
});

In terms of "save", you can save what was captured in a variable: var currentPercentage = $("#s2).text();

Welcome to the Treehouse Community

Looking to learn something new?

Nicholas Oliveri

Nicholas Oliveri

Jquery/HTML question saving values from a UI Slider

1 Answer

webdesignertroy

webdesignertroy