CODEWITHSUNDEEP
jquery
error
error

Reputation: 23

how to get the value of slider displayed in separate hidden field?

here is the code.......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Papermashup.com | jQuery UI Slider Demo</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
        <style type="text/css"> 
#container{
background:url(bg.jpg)!important;
padding:100px 50px 0px 50px;
}

/*the slider background*/
.slider {
width:230px;
height:11px;
background:url(slider-bg.png);
position:relative;
margin:0;
padding:0 10px;
}

/*Style for the slider button*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:url(slider-button.png);
}

/*Result div where the slider value is displayed*/
#slider-result {
font-size:50px;
height:200px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:250px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
padding:20px 0;
}

/*This is the fill bar colour*/
.ui-widget-header {
background:url(fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}

a {
outline:none;
-moz-outline-style:none;
}


        </style> 

        <script type="text/javascript">
        $('document').ready(function(){
            $('#submit').click(function(){

var username=$('#hidden').val();
if(username=="")
username = 50;
$.post('comment.php',{hidden:username},function(return_data){
alert(return_data);
});
});
});
        </script>
</head>
<body>



        <div class="slider" id="one"></div> 
        <div class="slider" id="two"></div> 
        <div id="slider-result"></div>   
        <form>
<input type="hidden" id="hidden1"/>

<input type="hidden" id="hidden2"/>

<input type="button" id="submit" value="submit"/>
</form>


           <script> 

                 $( ".slider" ).slider({
                animate: true,
                range: "min",
                value: 50,
                min: 10,
                max: 100,
                step: 10,

                //this updates the hidden form field so we can submit the data using a form
                slide: function(event, ui) { 

                $( "#slider-result" ).html( ui.value );
$("#one").click(function(){
                $('#hidden1').attr('value', ui.value);});
$("#two").click(function(){
                $('#hidden2').attr('value', ui.value);});
                }
                });


        </script> 



</body>
</html>

the above code generates a two slider . when the slider is clicked the value is displayed in Hidden field.... but i have made two sliders on clicking first slider the value is displayed in "hidden1" correctly. if i click the second slider the value is again displayed in "hidden1" and not in "hidden2"...what may be pbm . i tried various times but could not figure out that?????

Upvotes: 2

Views: 2407

Answers (3)

imaginabit
imaginabit

Reputation: 429

why don't you use $("#hidden1").val(ui.value); ?

you need create the sliders in other way

something like: 

$(".slider").each(
    $(this).slider({  
        ....
    });
);

sorry for my bad english!

Upvotes: 0

Colin
Colin

Reputation: 2021

I think this is what you want

http://jsfiddle.net/bU6EV/12/

Just change the input fields back to hidden, and reset the background values in CSS.

Upvotes: 3

Yogurt The Wise
Yogurt The Wise

Reputation: 4499

Not sure if this is an issue. Can use jquery val to set values instead of attr.

$("#Hidden1").val(ui.value);

Not sure why you would set the Click events inside the slide function. Seems like you would want to set the click events outside of the slide event.

not sure how to get the ID, i think $(this) will work.

slide: function(event, ui) { 
  if($(this).attr("id") ==  "#Hidden1")
  {   $("#Hidden1").val(ui.value); }
  else
  {$("#Hidden2").val(ui.value);}
});

Cause your setting one slide function for both your sliders. The functions needsto know which one was used. Maybe thats what you were trying to do wiht the click event.

Upvotes: 0

Related Questions