jquery ui slider post to mysql - javascript

Hello Im trying to update the value of the slider to mysql, i keep getting
"Notice: Undefined index... on line 2 ", I am sure my error is ridiculous but I cant seem to find it, since it worked fine on normal input fields.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider-vertical" ).slider({
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
});
</script>
</head>
<body>
<p>
<form action="update.php" method="post">
<label for="amount">Volume:</label>
<input type="text" id="amount" name="amount" style="border:0; color:#f6931f; font-weight:bold;" />
<input type="submit">
</form>
This is my update.php:
<?php
$temp= $_POST['raise'];
echo $temp;
$host=""; // Host name
$username=""; // Mysql username
$password=""; // Mysql password
$db_name=""; // Database name
$tbl_name=""; // Table name
$dbc = mysqli_connect("$host", "$username", "$password", "$db_name")or die("cannot connect");
$sql="UPDATE $tbl_name SET raise='$temp' WHERE id= 1";
?>

After you fixed your variable to $post['amount'], your seeing the value because update.php line 3 echos out the value:
echo $temp;
Line 11 doesn't escape the value with $dbc->real_escape_string() (bad idea!), and finally, to actually update the database you're missing this at the end:
$dbc->query($sql);

Related

How to get HTML5 Range Slider's value in PHP?

i have a HTML5 Range Slider. We can i send this value to php?
I will send a Email with this value.
HTML:
<div class="unit">
<div class="slider-group">
Max value:
<label id="1-h"></label>
</div>
<div id="slider-1-h"></div>
</div>
Javascript:
$(function() {
$( '#slider-1-h' ).slider({
range: "min",
min: 0,
max: 300,
value: 99,
slide: function( event, ui ) {
$( '#1-h' ).html( ui.value );
}
});
$( '#1-h' ).html( $( '#slider-1-h' ).slider( 'value' ) );
});
Ok that is fine. And now, we can is send this? I have no input box.
I can`t use $_POST[""] or?
:/
in the jquery add:
change: function(event, ui) {
$('#sliderValue').attr('value', ui.value);
}
in form add:
<input type="hidden" name="sliderValue" id="sliderValue" value="">

Jquery datepicker not fetching results via URL from MySql datebase?

I'm struggling to find out why this doesn't work, I trying to fetching from jquery datepicker requests via URL any dates from the DATETIME column in my datebase called time? Below I'v added a picture of the URL being sent to server and of time column.
JAVASCRIPT:
<label for="from">From</label>
<input type="text" name="from" id="from"/>
<label for="to">To:</label>
<input type="text" name="to" id="to"/>
$( "#from" ).datepicker();
$( "#to" ).datepicker();
$( "#from" ).datepicker( "option", {dateFormat: 'dd-mm-yyT00:00:00', showAnim: 'show' });
$( "#to" ).datepicker( "option", {dateFormat: 'dd-mm-yyT23:59:59',showAnim: 'show'});
$('#to').val(to);
$('#from').val(from);
PHP:
var from = getParameterByName('from');
var to = getParameterByName('to');
var from = parseDateTime($('#from').val());
var to = parseDateTime($('#to').val());
my.php?=from='+from+'&to='+to+'&rand='+Math.random()
$query = 'SELECT * FROM register WHERE time BETWEEN ( "#from" ) AND ( "#to" )';
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
echo $row['time']."<br>";
}
Use setDate method which Sets the date for the datepicker
$(function() {
$("#datepicker").datepicker();
$("#datepicker").datepicker("setDate", new Date('10/12/2012'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type="text" id="datepicker">
Fiddle here
You can use jquery-ui-timepicker-addon to add the time.
Try this Fiddle and this with formatted date and time: https://jsfiddle.net/rayon_1990/2wpp2qc1/2/

Price Range Slider in jQuery & PHP with MySQL

I have used jquery price range slider. I want to filter out result using the jquery price range slider on same page. But this jquery price range slider is not working or variable of that value is not posted on same page.
I have tried following code,
<?php
if(isset($_POST['amount1']))
{
echo $_SESSION['amount1'] = $_POST['amount1'];
}
if(isset($_POST['amount2']))
{
echo $_SESSION['amount2'] = $_POST['amount2'];
}
if(isset($_POST['submit_range']))
{
$sql = mysql_query("select * from hall_search_data_1 where rent BETWEEN '".$_SESSION['amount1']."' AND '".$_SESSION['amount2']."'");
$res = mysql_query($sql)or die(mysql_error());
}
?>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 50000,
values: [ 100, 1000 ],
slide: function( event, ui ) {
$( "#amount" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
$( "#amount1" ).val(ui.values[ 0 ]);
$( "#amount2" ).val(ui.values[ 1 ]);
}
});
$( "#amount" ).html( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
<div class="slider">
<div id="slider-range"></div>
<form method="get">
<input type="hidden" id="amount1">
<input type="hidden" id="amount2">
<input type="submit" name="submit_range" value="Submit">
</form>
</div>
<!--here php code ---->
if(isset($_POST['amount1']))
{
echo $_SESSION['amount1'] = $_POST['amount1'];
}
if(isset($_POST['amount2']))
{
echo $_SESSION['amount2'] = $_POST['amount2'];
}
if(isset($_POST['submit_range']))
{
$sql = mysql_query("select * from hall_search_data_1 where rent BETWEEN '".$_SESSION['amount1']."' AND '".$_SESSION['amount2']."'");
$res = mysql_query($sql)or die(mysql_error());
}
So please help me.
<div class="slider">
<div id="slider-range"></div>
<form method="get">
<input type="hidden" id="amount1">
<input type="hidden" id="amount2">
<input type="submit" name="submit_range" value="Submit">
</form>
</div>
In your form you have missed name attribute, hence you are getting
Undefined index: amount1,amount2
above error.
Update your code as follow
<form method="get">
<input type="hidden" id="amount1" name="amount1">
<input type="hidden" id="amount2" name="amount2">
<input type="submit" name="submit_range" value="Submit">
</form>

jQuery ui range slider set values after submit on new page

I am trying to create a jquery ui range slider a link!. I am using it as a filter on a listing site which show results based on the filters applied.
What I want is whenever the user changes the slider, the form must get submitted. I have successfully implemented this. The form action is the same page itself. The values are passed through the url although whenever the page loads again the slider is reset to the initial values.
I want the slider to retain the submitted values.
Here's my entire code:
<link href="slider.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(document).ready(function() {
$( "#slider-3" ).slider({
range:true,
min: 0,
max: 3000,
values: [ 0, 3000 ],
slide: function( event, ui ) {
$( "#price1" ).val(ui.values[ 0 ]);
$("#price2").val(ui.values[1]);
},
change:function() {
$("#highlights").submit();
},
});
$( "#price1" ).val($( "#slider-3" ).slider( "values", 0 ));
$( "#price2" ).val($( "#slider-3" ).slider( "values", 1 ));
});
</script>
<?php
$mincost=$_GET['mincost'];
$maxcost=$_GET['maxcost'];
.....
?>
<form name="highlights" id="highlights" action="mypage.php" method="GET">
<div id="costslider">
<div id="slider-3"></div>
<div id="mincost">
<input type="text" id="price1" name="mincost" id="mincost" style="background-color:#fff; border:0; color:#b81010; font-weight:bold; width: 70px;" value="<?php echo $_GET['mincost'];?>" >
</div>
<div id="maxcost">
<input type="text" id="price2" name="maxcost" style="background- color:white ; border:0; color:'#b81010'; left: 400px; font-weight:bold; width: 70px;" value="<?php echo $_GET['maxcost'];?>" >
</div>
</div>
</form>
Here I want the mincost and maxcost value after the form is submitted to appear on the slider as well. Please help out. Much appreciated.
You need to use "values" options, from slider function. You need to pase variable to the "values" options.
Here is the code:
<?php
// check if $_GET['mincost'] exists, if yes set javascript value to $_GET['mincost'], if not put the default value to 0
// check if $_GET['maxcost'] exists, if yes set javascript value to $_GET['maxcost'], if not put the default value to 300
?>
<script>
minconst = <?php echo (isset($_GET['mincost'])) ? $_GET['mincost'] : 0 ?>;
maxcost = <?php echo (isset($_GET['maxcost'])) ? $_GET['maxcost'] : 3000 ?>;
</script>
<script>
$(document).ready(function() {
$("#slider-3").slider({
range : true,
min : 0,
max : 3000,
values : [minconst, maxcost],
slide : function(event, ui) {
$("#price1").val(ui.values[0]);
$("#price2").val(ui.values[1]);
},
change : function() {
$("#highlights").submit();
},
});
$("#price1").val($("#slider-3").slider("values", 0));
$("#price2").val($("#slider-3").slider("values", 1));
});
</script>
<form name="highlights" id="highlights" action="mypage.php" method="GET">
<div id="costslider">
<div id="slider-3"></div>
<div id="mincost">
<input type="text" id="price1" name="mincost" id="mincost" style="background-color:#fff; border:0; color:#b81010; font-weight:bold; width: 70px;" value="<?php echo $_GET['mincost']; ?>" >
</div>
<div id="maxcost">
<input type="text" id="price2" name="maxcost" style="background- color:white ; border:0; color:'#b81010'; left: 400px; font-weight:bold; width: 70px;" value="<?php echo $_GET['maxcost']; ?>" >
</div>
</div>
</form>

How to insert slide range to mysql?

How to insert slide range to mysql ?
When press submit i want to insert slide range into mysql.
I try this code but not work!
How can i do that ?
http://jsfiddle.net/b63u9krv/3/
PHP
<?PHP
include("config.php");
if (isset($_POST["submit"]))
{
$sql="INSERT INTO table_name(slide_value)VALUES('$value_data')";
$result=mysql_query($sql);
}
?>
script
$(function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 0,
min: 0,
max: 700,
slide: function( event, ui ) {
$( "#value_data" ).val( "$" + ui.value );
}
});
$( "#value_data" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});
Code should be:
<form name="form1" method="post" action="">
<div id="slider-range-min"></div>
<!--missing input field added-->
<input type="hidden" id="value_data" name="value_data"/>
<input type="submit" name="submit" value="OK"/>
</form>
<?PHP
include("config.php");
if (isset($_POST["submit"]))
{
$sql="INSERT INTO table_name(slide_value)VALUES('".$_POST['value_data']."')";//updated
$result=mysql_query($sql);
}
?>
Updates in code description
you are updating value of value_data field, so this should be in
form while you are submitting it.
Instead of using $value_data while inserting you should use
$_POST['value_data'].

Categories

Resources