Solved

Jquery ui slider and change function

Posted on 2013-06-25
4
310 Views
Last Modified: 2013-07-10
Hi Experts,

I am trying to get my form to submit when the sliders hidden fields change! but cant seem to make it work... Could someone please assist.

I need it when .SideBarPriceField has a value change... or some workaround if thats not possible...

Many thanks in advance

<form method="get" id="SideBarPriceForm"> 
  <input id="SideBarPriceMin" class="SideBarPriceField" name="min_price" type="text" value="" />
  <input id="SideBarPriceMax" class="SideBarPriceField" name="max_price" type="text" value="" />
</form>


<script type="text/javascript">
$(document).ready(function () {
	
$(function() {
  $( "#SideBarPrice" ).slider({
    range: true,
    min: 0,
    max: 6000,
    step: 50,
    values: [ 2000, 4000 ],
    slide: function( event, ui ) {
      $( "#SideBarPriceValue" ).html( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] );
	  $( "#SideBarPriceMin" ).val( ui.values[ 0 ] );
	  $( "#SideBarPriceMax" ).val( ui.values[ 1 ]);
      }
    });
    
	$( "#SideBarPriceValue" ).html( "£" + $( "#SideBarPrice" ).slider( "values", 0 ) + " - £" + $( "#SideBarPrice" ).slider( "values", 1 ) );
	$( "#SideBarPriceMin" ).val($( "#SideBarPrice" ).slider( "values", 0 ))
	$( "#SideBarPriceMax" ).val($( "#SideBarPrice" ).slider( "values", 1 ))
	  	  
  });
  
});
</script>

Open in new window

0
Comment
Question by:maccaj51
  • 2
  • 2
4 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39274357
Where is you SideBarPrice hidden field or slider??
0
 

Author Comment

by:maccaj51
ID: 39274369
sorry these should be hidden... had them on text for testing
<form method="get" id="SideBarPriceForm"> 
  <input id="SideBarPriceMin" class="SideBarPriceField" name="min_price" type="hidden" value="" />
  <input id="SideBarPriceMax" class="SideBarPriceField" name="max_price" type="hidden" value="" />
</form>

Open in new window

0
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
ID: 39274376
Try Using change:

 $( "#SideBarPrice" ).change(function(){
$.ajax({
        type : 'post',
        url : 'yoururl',
        data : {yourdata},
        success : function(data){
            // process to update here
        }
    });
});

Open in new window

Or here is a related solved question for ref:
http://stackoverflow.com/questions/13415041/jquery-slider-onchange-auto-submit-form
0
 

Author Closing Comment

by:maccaj51
ID: 39313845
Thanks
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question