I have difficulty using the jQuery slider range in a form. To test I use a simple form and processors (originally from here):
form.php
<html lang="en">
<head>
<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>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<label for="amount">Age range:</label>
<input type="text" id="amount" name="agerange" style="border: 0; color: #f6931f; font-weight: bold; " />
</p>
<div id="slider-range""></div>
<input type="submit">
</form>
</body>
</html>
welcome.php
<html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
Your age range is: <?php echo $_POST["agerange"]; ?>
</body>
</html>
The slider shows up properly however the form returns no value for age range.
Not sure what value(s) this form return so that I can use that in a form processing script. Appreciate your hints
Since you're working with the age you have to remove the dollar sign from the range value.
replace this line :
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
with this:
$( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
and this two lines:
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
with this two:
$( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +
" - " + $( "#slider-range" ).slider( "values", 1 ) );
Now you have this string in the $_POST["agerange"] (let's say) : "35+-+75"
(the "+" is the replacement for the space used by php when post is sent)
so you can use the explode() function and obtain an array of two values.. like this:
<?php
$range = explode(' - ', $_POST['agerange']);
?>
<html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
Minimum age in your range is: <?php echo $range[0]; ?><br />
....and maximum is: <?php echo $range[1]; ?><br />
</body>
</html>
Not sure if this still applies, but I easily implemented a slider inside of a form. Here is the simplified code that I used:
»» Note that the numericToGrade() function is just something I used to convert a numerical value (0-4 in this case) to a letter grade (F,D-A). It does not affect how the script works. ««
<html>
<head>
<link href="../css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
// OPTIONAL: If there are other versions of jQuery running on the site,
// this will ensure proper script operation. 'NC()' replaces '$()'.
var NC = jQuery.noConflict();
NC(function() {
NC("#slider").slider({
value:3, max: 4,
slide: function( event, ui ) {
NC("#grade").val(numericToGrade(ui.value));
NC("#gradedisp").html(numericToGrade(ui.value));
}});
var val = NC("#slider").slider("value");
NC("#grade").val(numericToGrade(val));
NC("#gradedisp").html(numericToGrade(val));
});
function numericToGrade(num) {
switch (num) {
case 0: return "F"; break;
case 1: return "D"; break;
case 2: return "C"; break;
case 3: return "B"; break;
case 4: return "A"; break;
default: return "err";
}
}
</script>
</head>
<body>
<form action="submit.php" method="POST">
<label for="slider">Grade Us:</label>
<span id="gradedisp"></span>
<span id="slider"></span>
<input type="hidden" id="grade" name="rating" />
</form>
</body>
</html>
Here are a couple screenshots: First of the page, and second the inspected (generated) code through Google Chrome:
When the slider 'slides', this is what happens: both the display element (<span id="gradedisp">) and the hidden input element (<input type="hidden" id="grade" name="rating">) get updated simultaneously. This is useful for initial debugging/final output to your users.
Note that the <span> tag requires you to use .html instead of .val like the <input> tag utilizes.
Finally, when the form is submitted, you can grab the slider's value with PHP simply using this code:
$rating = $_POST['rating'];
Hope this helps!
Related
I want to add jQuery price range but when I add it, it is always blank. I made sure to include all classes, I tried tutorials and still did not show up.
Here is one of the tutorials that I tried link
It looks like this when I out the codes into my page
img
Here are my classes:
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Slider code
<div class="form-price-range-filter">
<form method="post" action="">
<div>
<input type="" id="min" name="min_price"
value="<?php echo $min; ?>">
<div id="slider-range"></div>
<input type="" id="max" name="max_price"
value="<?php echo $max; ?>">
</div>
<div>
<input type="submit" name="submit_range"
value="Filter Product" class="btn-submit">
</div>
</form>
</div>
jQuery code
<script type="text/javascript">
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 1000,
values: [ <?php echo $min; ?>, <?php echo $max; ?> ],
slide: function( event, ui ) {
$( "#amount" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
$( "#min" ).val(ui.values[ 0 ]);
$( "#max" ).val(ui.values[ 1 ]);
}
});
$( "#amount" ).html( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
Can anyone tell me what is wrong? I tried at least 10 tutorials before posting here - all have the same result with me
How do I get the date from a jquery UI datepicker like the month and save the value of it in a variable in php?
I've seen a lot of things like this <div id="calendar"></div> and I don't understand.
Thanks.
Here's my code
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
var day1 = $(this).datepicker('getDate').getDate();
var month1 = $(this).datepicker('getDate').getMonth();
var year1 = $(this).datepicker('getDate').getYear();
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
var day2 = $(this).datepicker('getDate').getDate();
var month2 = $(this).datepicker('getDate').getMonth();
var year2 = $(this).datepicker('getDate').getYear();
}
});
});
</script>
</head>
<body>
<label for="from"> FROM </label>
<input type="text" id="from" name="from">
<label for="to"> TO </label>
<input type="text" name="username" id="to" name="to">
<input type="submit" name="boton" value=" Submit ">
</body>
</html>
HTML
<input type="text" name="datepicker" value="26-10-15" />
PHP
if it has isset submit denotes that the submit the form
<?php if($_REQUEST['datepicker'])){
echo $_POST['datepicker'];
} ?>
You have to apply datepicker to input field like
<input type="text" value="<?php echo date("Y-m-d"); ?>" name="selectedDate"/>
Than in PHP just check value from $_GET or $_POST:
$selectedDate = isset($_REQUEST['selectedDate']) ? $_REQUEST['selectedDate'] : null;
You have HTML:
<input type="text" name="username" id="to" name="to">
For that you call datepicker:
$( "#to" ).datepicker({/* ... */});
Now all you need to do is:
Wrap your input fields with <form action="mySubmitScript.php" method="post"></form> add additionally <input type="submit" value="submit">
In PHP you do:
if (isset($_POST['to'])) {
$to = $_POST['to'];
}
You can submit form without reloading page using $.ajax() jQuery method.
I don't see the echo results in the HTML part of this code where I try to echo $_POST variables. I fill out my form. Click submit but nothing appears under the form, but it should show two strings.
It's a one page form that will extract XML data from a URL that I build in this code based on values provided in the form fields.
<!DOCTYPE html>
<?php
if(isset($_GET['company']) and isset($_GET['from']) and isset($_GET['to']) and isset($_GET['submit'])){
$parameters = array(
'company' => $_GET['company'],
'from' => $_GET['from'],
'to' => $_GET['to']
);
// create condition
$condition = "date_entered > '" . $parameters['from'] . "' && date_entered < '" . $parameters['to'] . "' && company_name = '" . $parameters['company'] . "'";
$url = "www.abc.com/c=" . $condition;
echo '<p>'.$condition.'</p>';
echo '<p>'.$url.'</p>';
$_GET['condition'] = $condition;
$_GET['url'] = $url;
}
?>
<html>
<head>
<title>Reports v. 0.0.0.1</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
<form autocomplete="on" method="GET">
Company: <input id="company" name="company" type="text" value="" /><br />
<fieldset width="0px">
<legend>Date Range</legend>
<label for="from">From</label>
<input type="text" id="from" name="from"><br />
<label for="to">To</label>
<input type="text" id="to" name="to"><br />
</fieldset>
<input type="submit" />
</form>
<?php
if(isset($_GET['condition']) and isset($_GET['url'])){
echo $_GET['condition'];
echo '<br />';
echo $_GET['url'];
}
?>
</body>
</html>
Dump the global $_GET, compare it to what you are checking. That should help.
I have this code for one slider and the structure appears correctly but when i move the slide , don't show the value of the answer inside of the input box "amount", appears "undifined" and i don't know why because when you inspect you can see that the div slider have a value in the tag name . I tryed with the html tag "value" too and didn't works too. What can i do ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title> Questionnaire </title>
<meta name="Description" content="Questionnaire on business model" />
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="jquery-ui-1.9.2.js"></script>
<script src="factaris.js"></script>
<link rel="stylesheet" href="STYLE.css" type="text/css" media="screen" />
<script>
jQuery(document).ready(function(){
///SLIDER !!!!!!!!!!!!!!!!!!!!!!!!!!!
$( "#slider" ).slider({
slide: function( event, ui ) {
//$( "#amount" ).val( "$" + ui.value ); // show range 0-100 without ini values !!!!!
// $( "#amount" ).val( "$" + this.value ); //show undefined
// $( "#amount" ).val( "$" + 8); // show 8 all time
$( "#amount" ).val( "$" + ui.name );
}
});
});
</script>
</head>
<body>
<div id="sizer">
<form id= "formID" name="formID" class="formular" method="post" action= "<?= $url = "QUESTIONAREFINISHING.php"; ?>" accept-charset="utf-8">
<div id="questionare" >
<!--SLIDER-->
<?php if($row_questionset['Constructor']=="Slider"){?>
<div>
<label class="desc" value= "<?php $row_questionset['QuestionIDFKPK'];?>">
<?php echo $row_questionset['QuestionValue']; ?>
</label>
</div>
<?php while ($row_Answer=mysql_fetch_array($AnswersValue)){ ?>
<p>
<label for="amount"><?php echo $row_questionset['QuestionValue']; ?></label>
<input type="text" id="amount" name="amount" />
</p>
<div id="slider" name="<?php echo $row_Answer['AnswerValue']; ?>" ></div>
<?php } // End while loop ?>
<?php } //End slider row ?>
<!--/SLIDER-->
</div>
</form>
</div>
</body>
</html>
To read the value of a jQuery UI Slider, you need to call the slider method on the element in question with the 'value' as the parameter, like so:
$( "#slider" ).slider( "value" );
with the value slider argument, if you want read the value on change the slider or/and on slide use the event methods of the slider:
function outputValue(sliderDom) {
alert($(sliderDom).slider('value'));
};
$( "#slider" ).slider({
//... your init
slide: function(){
outputValue(this);
},
change: function(){
outputValue(this);
}
});
edit
to fix you value problem try this
$('#slider').slider({
//..
min: 0,
max: 100000 //or more
});
If you'd like mto set an initial value, you need to set it when you call the slider method (with JS - not HTML).
$("#slider).slider({
max: slideMax,
min: slideMin,
value: slideInit,
// To set the value to the `#amount` element, use the following `slide` event
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.7.1.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.slider.js"></script>
<link rel="stylesheet" href="demos.css">
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
$( "#minValue" ).val( ui.values[ 0 ] );
$( "#maxValue" ).val( ui.values[ 1 ] );
});
</script>
<div class="demo">
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" name ="amount" style="border:0; color:#f6931f; font-weight:bold;"/>
</p>
<div id="slider-range"></div>
<input type="hidden" id="minValue" name="minValue" value="<?php echo (isset($_POST['minValue'])) ? $_POST['minValue'] : '75'; ?>" />
<input type="hidden" id="maxValue" name="maxValue" value="<?php echo (isset($_POST['maxValue'])) ? $_POST['maxValue'] : '300'; ?>" />
</div><!-- End demo -->
How I can get the min & max values?
When slider sliding how do I read that values from this code?
Is there any function is needed for reading the min & max values?
Assuming you have used every thing correctly i am answering your questions.
1)How I can get the min & max values.
Answer: to get min and max values you can use the values array which is declared as a default option in the plugin.
ui.values[ 0 ] in slide function will give you min values and ui.values[ 1 ] will give you max value.
2)when slider sliding how I read that values from this code;
Answer: when slider is sliding the slide function is executed so the code block which is inside the slide function will automatically give you the desired result.
3)Is there any function is needed for reading the min & max values
Answer: No there is no function for reading min and max values, this can be achieved in slide function and values is the parameter for calling the slider function.
alert($( "#slider-range" ).slider( "values", 0 )) // minimum value
alert($( "#slider-range" ).slider( "values", 1 )) // max value