How to insert slide range to mysql? - javascript

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'].

Related

passing jquery value to php with submit button

this is the html code:
<form action='survey.php' method='post' class='mainForm'>
<fieldset>
<div class="widget first">
<div class="head"><h5 class="iList">Text fields</h5></div>
<div class="rowElem noborder"><label>Name:</label><div class="formRight"><input type="text" name="name"/></div><div class="fix"></div></div>
<div class="rowElem noborder">
<label>Usual slider: </label>
<div class="formRight">
<div class="uiSliderInc"></div>
</div>
<div class="fix"></div>
</div>
<input type="submit" value="Submit form" class="greyishBtn submitForm" />
<div class="fix"></div>
</div>
</fieldset>
</form>
i have a slider with a range between 1 and 100 with this code:
<div class="uiSliderInc"></div>
in another file called "custom.js" i have this code:
$( ".uiSliderInc" ).slider({
value:50,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( ".uiSliderInc" ).slider( "value" ) );
i wanna send the value of this slider once i press on the submit button to the same page so i can do some php things to it. i bought a theme complete with css and jquery code because i dont understand it but now i have to use it. so can anyone help me on how i send the value when i press the submit button?
You can use an hidden input
<fieldset>
<div class="widget first">
<div class="head"><h5 class="iList">Text fields</h5></div>
<div class="rowElem noborder"><label>Name:</label><div class="formRight"><input type="text" name="name"/></div><div class="fix"></div></div>
<div class="rowElem noborder">
<label>Usual slider: </label>
<div class="formRight">
<div class="uiSliderInc"></div>
</div>
<div class="fix"></div>
</div>
<input id="amount" type="hidden" name="amount"/>
<input type="submit" value="Submit form" class="greyishBtn submitForm" />
<div class="fix"></div>
</div>
</fieldset>
Then you can get value on server-side like this:
$amount= $_POST['amount'];
Custom.js
$( ".uiSliderInc" ).slider({
value:50,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});

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="">

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>

jquery ui slider post to mysql

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);

Categories

Resources