Forwarding a slider amount to a hidden field

  • 12 November 2013
  • 3 replies
  • 18 views
B

Hello,

I implemented a slider on a landingpage: http://immobilienanlage.hfh.de/test-2/

Script for the slider is:

<meta charset="utf-8">

<title>jQuery UI Slider - Range slider</title>   
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">   
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>   
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>   
<script> <br />
$(function() { <br />
  $( "#slider-range" ).slider({ <br />
    range: true, <br />
    min: 500, <br />
    max: 50000, <br />
    step: 250, <br />
    values: [5000, 20000], <br />
    slide: function( event, ui ) { <br />
      $( "#amount" ).val( "Û" + ui.values[0] + " - Û" + ui.values[1] ); <br />
    } <br />
  }); <br />
  $( "#amount" ).val( "Û" + $( "#slider-range" ).slider( "values", 0 ) + <br />
    " - Û" + $( "#slider-range" ).slider( "values", 1 ) ); <br />
}); <br />
</script>

Now I want to forward the chosen amount to a hidden field.

Script I tried:

<script type="text/javascript"> <br /> jQuery(function(){ <br />
jQuery('input#anlagesumme').alert($("#amount").val("amount")); <br /> </script>

But it did not work out… Anyone a solution?

Many Thanks and best regards
B

3 replies

J

Hi Bjšrn,

Assuming you have two hidden fields, one with the Field Name set to “lower” and the other set to “upper”, the following changes to the Javascript should set those fields to the sliders value:

```
  <br /><br />
 $(function() { <br />
   $( "#slider-range" ).slider({ <br />
     range: true, <br />
     min: 500, <br />
     max: 50000, <br />
     step: 250, <br />
     values: [5000, 20000], <br />
     slide: function( event, ui ) { <br />
       $( "#amount" ).val( "Û" + ui.values[0] + " - Û" + ui.values[1] ); <br /><br />
       $( "#lower" ).val( ui.values[0] ); <br />
       $( "#upper" ).val( ui.values[1] ); <br />
     } <br />
   }); <br />
   $( "#amount" ).val( "Û" + $( "#slider-range" ).slider( "values", 0 ) + <br />
     " - Û" + $( "#slider-range" ).slider( "values", 1 ) ); <br /><br />
   $( "#lower" ).val($( "#slider-range" ).slider( "values", 0 ) ); <br />
   $( "#upper" ).val($( "#slider-range" ).slider( "values", 1 ) ); <br />
 }); <br />  
```
B

Great!

Many Thanks for your support.

R

Hey Bjorn,

This slider is exactly what i’ve been looking for, could you please tell me how to add this code to a page?

I’ve added it to the javascripts but nothing happens?

much appreciated!

Reply


Terms & ConditionsCookie settings