CODEWITHSUNDEEP
jqueryjquery-uijquery-selectors
user999489
user999489

Reputation:

jQuery multiple sliders on a single form

I have multiple slider forms in my page: like this one. For just one it works fine, but for multiple slider forms the php post values return empty.

So far I have:

jQuery:

    $(function() {
    $( ".slider" ).slider({
        value:0,
        min: -1,
        max: 1,
        step: 0.01,
        slide: function( event, ui ) {
            $( ".amount" ).val( "$" + ui.value );
        }
    });
    $( ".amount" ).val( "$" + $( ".slider" ).slider( "value" ) );
});

My html:

<div class="demo">
    <form action="next.php" method="post">
        <p>
            <label class="amount">How strong is your relationship with this person?</label>
            <input type="hidden" name="first_question" />
        </p>
        <div class="slider"></div>
        <br/>
        <p>
            <label class="amount">How would you feel asking this friend to loan you $100 or more?</label>
            <input type="hidden" name="second_question" />
        </p>
        <input type="submit" value="Submit" />
    </form>
</div>

How can I correctly pass the post values?

Upvotes: 2

Views: 2913

Answers (2)

masaab mushtaq
masaab mushtaq

Reputation: 11

Just change

 $( ".amount" ).val( "$" + ui.value );
        }
    });
    $( "input[type="hidden"]"  ).val( "$" + $( ".slider" ).slider( "value" ) );

to

 $( "input['text']" ).val( "$" + ui.value );
        }
    });
    $( "input[type="hidden"]" ).val( "$" + $( ".slider" ).slider( "value" ) );

Test it by changing the hidden fields to text.

Upvotes: 1

Manse
Manse

Reputation: 38147

You need to add a div for each slider you want and give the sliders an attribute that links them to the input - This is an example using your HTML as a starting point :

<div class="demo">
    <form id="myform" action="next.php" method="post">
        <p>
            <label class="amount">How strong is your relationship with this person?</label>
            <input type="hidden" name="first_question"/>
        </p>
        <div class="slider" id="first"></div>
        <br/>
        <p>
            <label class="amount">How would you feel asking this friend to loan you $100 or more?</label>
            <input type="hidden" name="second_question"/>
        </p>
        <div class="slider" id="second"></div>
        <br/>
        <input type="submit" value="Submit" />
    </form>
</div>

​

Then use the following to initialise the sliders :

$(".slider").slider({
    step: 1,
    min: 0,
    max: 10,
    value: 5,
    slide: function(event, ui) {
        $("input[name=" + $(this).attr("id") + "_question]").val(ui.value);
    }
});

The important part here is the setting of the value - it grabs the id attribute from the slider div adds _question to it and then finds the input with a matching name attribute.

Working example here

Note : you have no default values specified on the inputs so if the user was to submit you would get nothing submitted (as you will do in my example)

Upvotes: 3

Related Questions