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>
Related
my modal does not display my output (empty modal) except for the title. I have checked and the output is working when i don't display it within the modal.
what can i change to display the output?
<script>
$( function() {
$( "#mortgageResults" ).dialog({
autoOpen: false,
modal: false,
resizable: false,
autoResize: true,
show: {
effect: "clip",
duration: 400
},
hide: {
effect: "drop",
duration: 400
}
});
$( "#mortgagebtn" ).on( "click", function() {
$( "#mortgageResults" ).dialog( "open" );
return false;
});
} );
</script>
computation:
<div id="calculator_one">
<?php
$borrow = $_POST['borrow']; //amount borrowed
$interest = $_POST['interest']; //interest rate
$term = $_POST['term']; //term
$months = ( $term * 12 );
$answer = ($borrow * ($interest / 100)) / 12;
$answer_two = ( $borrow * (($interest/12) / 100) / ( 1 - pow( 1 + (($interest/12) / 100), -$months)) ); ?>
<form id="calcualtor" action="" method="post" class="calculator">
<label class="calcAmount">Amount to borrow (₱)</label>
<input class="calcAmount" type="text" name="borrow" maxlength="6" />
<br />
<label class="calcInterest">Interest (%)</label>
<input class="calcInterest" type="text" name="interest" maxlength="4" />
<br />
<label class="calcTerm">Term (Years)</label>
<input class="calcTerm" type="text" name="term" maxlength="2" />
<br />
<button id="mortgagebtn" type="submit">Calculate</button>
</form>
</div>
my display output:
<div id="mortgageResults" title="Mortgage Results">
<?php
if (isset($_POST['mortgagebtn'])){
echo "<p class='calc_header'>Results</p>";
echo "<div id='results'><p class='calc_result'>Based on borrowing <span class='mortgage'>₱", number_format($borrow) , "</span> over <span class='mortgage'>", ($term), " years</span> at <span class='mortgage'>", ($interest), "%</span>, your monthly repayments would be:</p>";
echo "<p class='calc_result'>Interest Only <span class='mortgage'>₱", number_format($answer,2), "</span></p>";
echo "<p class='calc_result'>Repayment <span class='mortgage'>₱", number_format($answer_two,2), "</span></p></div>";} ?>
</div>
The issue is here:
<button id="mortgagebtn" type="submit">Calculate</button>
here you have not assign the name. And you are trying to check it like:
if (isset($_POST['mortgagebtn'])){
Assign the name like:
<button id="mortgagebtn" name="mortgagebtn" type="submit">Calculate</button>
and try again.
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>
I hope you can all help me / give me a shove in the right direction.
The situation is as follows. I have several forms which should pop up (inpage) when clicked upon. To achieve this i am using the Dialog fuction of JQUERY which works perfectly. The only problem is my page is starting to contain a lot of code since i am giving every form its own dialog. Is there a way to combine the function to use 1 dialog? (so put everything in one function? - or load the form into the dialog depending on which button is pushed? I have done a lot of searching on the web but i cannot find anything which gives me a push in the right direction....hope yall are willing and able to help me. Anyways thanks in advance. (i only showed the first 2 functions ... i have around 6 more of these )
<script>
$(function(c) {
$( "#dialog" ).dialog({
autoOpen: false,
maxWidth:260,
maxHeight: 85,
width: 260,
height: 85,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#dialog" ).dialog({
position: {
my: 'left, top',
at: 'right, top',
of: $('#opener')
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
$(function(s) {
$( "#dialog2" ).dialog({
autoOpen: false,
maxWidth:300,
maxHeight: 85,
width: 300,
height: 85,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#dialog2" ).dialog({
position: {
my: 'left, top',
at: 'right, top',
of: $('#opener2')
}
});
$( "#opener2" ).click(function() {
$( "#dialog2" ).dialog( "open" );
});
</script>
<body>
<?php
if(!empty($row['voornaam'])){
?>
<div id="dialog" >Naam<br>
<p><form method="post" id="naam"> <input type="text" value="<?php echo $row['voornaam'];?>" name="voornaam" size="8"/> <input type="text" value="<?php echo $row['achternaam'];?>" name="achternaam" size="8"/> <input type="submit" value="opslaan" > </form>
</div>
<button id="opener" border="0" color="white"> <?php echo $row['voornaam'] . " " . $row['achternaam'] ;?> <img src="edit.png" width="10" height="10"></button>
<?php
} ?>
<?php
if(!empty($row['gebooredatum'])){
?><div id="dialog2" >Geboortedatum<br>
<p><form method="post" id="leeftijd" > <input type="text" value="" name="geboortedatum" placeholder="<?php echo $row['gebooredatum'];?>" size="11"/> <input type="submit" value="opslaan" > </form>
</div>
<button id="opener2" border="0" color="white"> <?php echo $leeftijd ;?> Jaar <img src="edit.png" width="10" height="10"></button>
<?php
} else {?>
<div id="dialog2">Geboortedatum<br>
<p><form method="post" id="leeftijd"> <input type="text" name="geboortedatum" placeholder="dd-mm-jjjj" size="11"/> <input type="submit" value="opslaan" "size="3"></form></p>
</div>
<button id="opener2" border="0" color="white"><?php echo "Voeg je geboortedatum toe";?> <img src="edit.png" width="10" height="10"></button>
<?php } ?>
</body>
</html>
You could use the open event provided by the jquery widget. Inside this event is where you can place some logic that would determine what you want to show in the dialog.
http://api.jqueryui.com/dialog/#event-open
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'].
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);