[RESOLVED] JQuery Slider - Form Repopulate Slider Field

[juniper747]

I am using a JQuery Slider function in one of my forms that has the folowing code:

<script>
	$(function() {
		$( "#slider" ).slider({
			value:100,
			min: 0,
			max: 100,
			step: 1,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value + "% Clear" );
			}
		});
		$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "% Clear" );
	});
</script>

And the form looks like:

<form method=POST etc...>
<div id="slider"></div>
      <span><input type="text" id="amount" name="Percentage" style="border:0; color:#f6931f; font-weight:bold;" /></span>
</form>

Now, in the php, I have an error system set up, so that if one of the items in the form are left blank etc., an error will generate without posting the form. However, I am using <?php echo ?> in the form to repopulate the fields that were entered, so user does not have to fill them again.

However, the slider always resets back to 100%... How can I fix this so that if the form does not POST, the slider will keep the value that the user set it at. Is this possible, I am having trouble figuring it out. Thanks!

[bradgrafelman]

juniper747;10994480 wrote:

However, I am using <?php echo ?> in the form to repopulate the fields that were entered, so user does not have to fill them again.

I'm confused; I thought you said the error checking was done without causing a page refresh? If that's so, why would you need any PHP code to echo out values to repopulate the form? Shouldn't there be nothing to "repopulate" since the user never left the form page?

[juniper747]

Sorry, I meant that the values in the form won't get *entered in the database... The page does refresh due to the POST of the form, with an error message across the top of the page.

The slider is the one here: http://jqueryui.com/demos/slider/

[Weedpacket]

But you're saying that the problem is when the form does not POST....

[juniper747]

Ok... I rephrased my question, hopefully you can understand what I am getting at now.

I am using a JQuery Slider function in one of my forms that has the following code:

<script>
	$(function() {
		$( "#slider" ).slider({
			value: 0,
			min: 0,
			max: 100,
			step: 1,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value + "% Clear" );
			}
		});
		$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "% Clear" );
	});
</script>

And the form looks like:

<form method=POST etc...>
<div id="slider"></div>
      <span><input type="text" id="amount" name="Percentage" style="border:0; color:#f6931f; font-weight:bold;" /></span>
</form>

In the php, I have an error system set up, so that after the form POSTs, if there is an error in the form (for example one of the form inputs is left blank etc.), an error will generate and the page will refresh with an error message telling the user to correct the form and re-submit.

However, the slider always reverts back to 0 after the page refresh... How can I change this so that the slider keeps the same value that the user set it at before the POST. Is this possible, I am having trouble figuring it out. Thanks!

[bradgrafelman]

In the JavaScript code, you've got "value: 0". Obviously, that's telling jQuery that you want the slider to appear with a value of 0. If that isn't what you want (e.g. you have a previous value you want to restore), then don't say "value: 0" ... replace the '0' with the correct value.

[juniper747]

Yes, this is correct. That is the problem I am having. Since I am very new to javascript/jquery, I do not know what to put next to "value:"

since my sliders gets the value of

$percentage = $_POST['Percentage'];

then you would think I could just have:

<script>
	$(function() {
		$( "#slider" ).slider({
			value: $percentage,
			min: 0,
			max: 100,
			step: 1,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value + "% Clear" );
			}
		});
		$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "% Clear" );
	});
</script>

But this does not work! How can I make it "So"??

[bradgrafelman]

The above code is telling Javascript that the 'value' should be a dollar sign followed by the word 'percentage'. Instead, I would expect that you'd want some PHP code there to [man]echo[/man] or [man]print[/man] the value of the (PHP) variable called $percentage at that spot.

[juniper747]

Ok, thanks a lot. That worked 🙂