get value by id using jquery

Question

This code is used on a page for database hosting. The page has sliders from which a user selects the number of cores required and upper and lower limits of ram. The selected values from the slider are working and output in span id's. I then want to take the selected values to calculate a price. However I just cannot get back the value. I broke it down into simple parts and realise that there is no value being returned for cores or ram. What do I need to do to retrieve the values as and when the slider updates the page?

 <script>
    function showValues(event, ui) {
        var values;
        if (!ui.values) {
            values = $("#" + event.target.id).slider("values");
        } 
        else {
            values = ui.values;
        }
        if (values[0] == values[1]) {
            return false;
        } 
        else {
            values[0] % 1 == 0;
            values[1] % 1 == 0;
            $("#" + event.target.id + "-valuemin").html(parseInt(values[0]));
            $("#" + event.target.id + "-valuemax").html(parseInt(values[1])); 
        }
    }

    $(document).ready(function() {
        var base = 24;
        var cores = parseInt($("#CoreSlider-valuemin").val()*5);
        var ram = parseInt($("#RanSlider-valuemin").val()*2) + parseInt($("#RanSlider-valuemax").val());
        var cost = parseInt(base) + parseInt(cores) + parseInt(ram);                
        $("#Cost").html(parseInt(cost));
    });
$(function() {$( "#RanSlider" ).slider({range: true,min: 1,max: 64,step: 1,values: [4, 16],slide: showValues,create: showValues,change: showValues});});
$(function() {$( "#CoreSlider" ).slider({range: false,min: 1,max: 16,step: 1,values: [2],slide: showValues,create: showValues,change: showValues});});

    </script>

What value you're not getting? Show HTML as well – Jenson M John Nov 01 '14 at 12:58 — Jenson M John, Nov 01 '14 at 12:58

Bartek Andrzejczak · Accepted Answer · 2014-11-01T13:33:16.283

val() is not a function that can get a text from an element (if it's not an input or something similar). text() can do it. Look at this fiddle: http://jsfiddle.net/bandrzejczak/jdf1a2ct/

Edit: Let me rephrase it: What you use to write stuff (like .text("a"), .html("b")), .val("c"), you can then use to read stuff from the same element, without using arguments (.text("a") to write and .text() to read)

Additionaly if you want to count cost after every slider move, you should put the calculation function in your valueChange function.

Of course there is a much better way to do it, without using helper divs, but this one I could make work the fastest, with what you got.

Edit: And don't use parseInt on what you know is an int, like base variable.

score 0 · Answer 2 · edited Nov 01 '14 at 13:42

Your challenge seems to be on associating event processing with the slider. Your existing code looks as follows:

$(function() {
    $("#RanSlider").slider(
    {
        range: true,
        min: 1,
        max: 64,
        step: 1,
        values: [4, 16],
        slide: showValues,
        create: showValues,
        change: showValues
    });
});

Your code show options of slide, create and change. Those are not valid options. Instead, you would want to register event callbacks such as:

$("#RanSlider").on("slide", showValues);
$("#RanSlider").on("create", showValues);
$("#RanSlider").on("change", showValues);

or more efficiently:

$("#RanSlider").on(
{
    "slide": showValues,
    "create": showValues,
    "change": showValues
});

get value by id using jquery

2 Answers2