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

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

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

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>

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

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

How to get a value from the input and add to the href jquery

I would like to do something like the window of favorites on google chrome so the idea is write a hiperlink and then the link appears on the page.I m using jquery but doesn't work
html:
<div id="Add" title="Add Link">
<form>
<fieldset>
<label for="dir">URL</label>
<input id="dir" type="url" class="text ui-widget-content ui-corner-all"/>
</fieldset>
</form>
<div id="cuadro"></div>
$(function(){
var a = $("#Add");
a.dialog({
autoOpen: false,
height:350,
width:250,
modal: true,
buttons: {
"Accept": function(){ //Accept
AddLink();
$( this ).dialog( "close" );
},
"Reset": function(){//Reset
dir.val(" ")
},
"Cancel": function() {//Cancel
$( this ).dialog("close");
}
},
close: function() {
$( this ).dialog( "close" );
}
});
});
function AddLink(){
var dir=$("#dir);
var link=dir.val();
alert(dir.val());
$("#cuadro").append('<li>link1</li>');
}
If you want to use your linkvariable as the href then you need to change
$("#cuadro").append('<li>link1</li>');
to
$("#cuadro").append('<li>link1</li>');
DEMO FIDDLE
I'm not sure exactly what you meant by "write a hiperlink and then the link appears on the page", so I'm going to do my best and guess that this is what you want:
User types a URL into the input box.
You display it in some div below it.
HTML
<form>
<fieldset>
<label for="dir">URL</label>
<input id="dir" type="url" class="text ui-widget-content ui-corner-all"/>
</fieldset>
</form>
<p></p>
CSS
p {
color: green;
margin: 8px;
}
JavaScript
$( "#dir" )
.keyup(function() {
var value = $( this ).val();
$( "p" ).text( value );
})
.keyup();

Categories

Resources