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 );
}
});
Related
<link rel="stylesheet" type="text/css" href="<?php echo base_url('media'); ?>/autocomplete/jquery-ui.css" />
<script type="text/javascript" src="<?php echo base_url(); ?>media/js/order_new/jquery-ui.js"></script>
<script>
$(document).ready(function() {
// alert("hii");
$('#other').autocomplete({
source: '<?php echo base_url('
index.php ') ?>/frontend/location_autocomplete'
});
});
</script>
<input type="text" id="other" name="other" value="" placeholder="what your looking for?" class=" new_search" data-provide="typeahead" data-items="4" data-source='[]'>
You are getting this error because you have not loaded jquery. Your application cannot find a reference to jquery($). Include jquery in your script resources before fetching jquery-ui into your application.
Check the differences in your paths (/) and the libraries (jquery + jquery-ui):
<?php
echo '<link rel="stylesheet" type="text/css" href="' . base_url('media') . '/autocomplete/jquery-ui.css"/>';
echo '<script type="text/javascript" src="' . base_url() . '/media/js/order_new/jquery.js"></script>';
echo '<script type="text/javascript" src="' . base_url() . '/media/js/order_new/jquery-ui.js"></script>';
?>
Check via your developer toolbar the existence of your paths.
Below an demo from Autocomplete | jQuery UI (https://jqueryui.com/autocomplete/):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
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 have a jquery ui datepicker and the picked date is passing to a php page using post method. The full code of my php file is given below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Datepicker</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>
$(function() {
$( "#startDate" ).datepicker({
defaultDate: (new Date(2013, 1 - 1, 26)),
changeMonth: true,
<!-- numberOfMonths: 1, -->
onClose: function( selectedDate ) {
$( "#endDate" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#endDate" ).datepicker({
defaultDate: new Date(),
changeMonth: true,
<!-- numberOfMonths: 1, -->
onClose: function( selectedDate ) {
$( "#startDate" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
<form action="date.php" method="post">
<label for="startDate">startDate</label>
<input type="text" id="startDate" name="startDate" />
<label for="endDate">endDate</label>
<input type="text" id="endDate" name="endDate" />
<input type="submit" name="submit" value="Submit" />
</form>
<?php
$startdate = isset($_POST['startDate']) ? $_POST['startDate'] : '';
echo $startdate;
?>
</body>
</html>
In the above code, the value of the picked date is passed to php only after submitting the form using submit button. How can I pass the value on select of the date picker using ajax? So that, the php echo function will display date dynamically on selecting the datepicker.
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!
I can't make the html loaded via ajax update the DOM. What am I doing wrong?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="//atpc.info/f/styles.css" media="all">
<link rel="stylesheet" type="text/css" href="//atpc.info/f/form.css" media="all">
<link rel="stylesheet" type="text/css" href="//atpc.info/f/pesquisa.css" media="all">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="//atpc.info/f/t/test.js"></script>
</head>
<body>
<form id="form_p" action="">
<fieldset class="p_test">
<legend>Test question text?</legend>
<label for="p_test_y"><input type="radio" id="p_test_y" name="p_test" value="y">Yes!</label>
<label for="p_test_n"><input type="radio" id="p_test_n" name="p_test" value="n">No!</label>
<a class="continue_r">Continue →</a>
</fieldset>
<small id="update_p"></small> <span id="status_p"></span>
</form>
</body>
</html>
JQuery:
$(document).ready(function() {
$('label').css('display','block');
$('a.continue_r').live('click',function(event) {
var id_p=$('input:radio:first').attr('name');
var v_r=$('input:radio:checked').val();
alert(v_r);
$.post(
'test.php',
{ id_p:id_p, v_r:v_r },
function(data){
alert('Retorno:\n' + data);
//$('form').append($(data).hide().fadeIn('slow'));
$('body').append(data);
$('label').css('display','block');
}
);
});
});
PHP:
<?
if(!empty($_REQUEST['id_p'])) $id_p=$_REQUEST['id_p'];
else die('Ops! no id_p');
if(!empty($_REQUEST['v_r'])) $v_r=$_REQUEST['v_r'];
else die('Ops! no v_r');
if($_REQUEST['id_p']=='p_test1') die('Victory!!!');
echo<<<FORM
<fieldset class="p_test1">
<legend>Test 1 question text?</legend>
<small>Last question was $id_p and you option was $v_r</small>
<label for="p_test1_y"><input type="radio" id="p_test1_y" name="p_test1" value="ohy">Oh, Yes!</label>
<label for="p_test1_n"><input type="radio" id="p_test1_n" name="p_test1" value="ohn">Oh, No!</label>
<a class="continue_r">Continue →</a>
</fieldset>
FORM;
?>
For those interested, here is the final working JQuery code:
$(document).ready(function() {
$('label').css('display','block');
$('a.continue_r').live('click',function(event) {
//var fieldset=$(this).closest('fieldset');
var fieldset=$(this).parent('fieldset');
//alert(fieldset.attr('class'));
//var id_p=$('input:radio').attr('name');
//var id_p=fieldset.attr('class');
var id_p=$('fieldset:last').attr('class');
var v_r=$('input:radio:checked:last').val();
if(v_r=='') v_r=$('textarea:last').val();
fieldset.hide();
//alert('id_p = '+id_p+' - v_r = '+v_r);
$.post(
'test.php',
{ id_p:id_p, v_r:v_r },
function(data){
//alert('Retorn:\n' + data);
$('body').append($(data).hide().fadeIn('slow'));
//$('body').append($(data));
//$('body').append($data);
$('label').css('display','block');
//console.log(data);
}
);
});
});
Actually, the DOM is updated. But I think the selector is wrong.
Try this?
$(':radio:checked:last')
This will get the last checked radio input, which is probably what you want instead. Based on the markup:
<fieldset class="p_test">
<legend>Test question text?</legend>
<label for="p_test_y"><input type="radio" id="p_test_y" name="p_test" value="y">Yes!</label>
<label for="p_test_n"><input type="radio" id="p_test_n" name="p_test" value="n">No!</label>
<a class="continue_r">Continue →</a>
</fieldset>
The fieldset tag wraps everything up, so your handler can be defined like:
$('a.continue_r').live('click', function() {
var $fieldset = $(this).parent('fieldset');
// Do stuff like $fieldset.find(), which ensures that your matches are contained therein.
});