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 );
}
});
Related
I want to display the loading.gif image when doing a domain search with a click button. So when php processes a domain name search request, the loading image appears and disappears when the search results appear.
Below code from my php page:
<form class="form-full-width" method="post">
<div class="group align-center form-row">
<input autofocus class="group-stretch" type="text" name="domain" placeholder="" value="" pattern="^[a-zA-Z0-9\.-]*$" title="">
<input type="hidden" name="token" value="70ed0e77d1b8f7124c494a970929ccb2">
<button class="button-secondary"> Search </button>
</div>
</form>
This is result after click search button, will appear approximately 5-30 seconds after clicking the Search button
$response = '<section class="content-row">
<div class="container">
<center>
<header class="content-header">
<h3><i class="fa fa-check text-color-success icon-left"></i> Selamat! Domain <b class="text-color-primary">'.$domain.'</b> Tersedia</h3>
<h4>Hanya dengan <b>Rp. 200.000</b> / tahun</h4>
<p>
<a href="member.domain.com/cart.php?a=add&domain=register&sld='.$domain.'" class="button button-primary">
<i class="fa fa-shopping-cart icon-left"></i>DAFTARKAN
</a>
</p>
<p>
atau<br>Lihat saran domain lainnya <i class="fa fa-angle-double-right"></i>
</p>
</header>
</center>
</div>
</section>
Javascript
<script type="text/javascript">
$( document ).ready(function() {
$('.button-secondary').click(function(){
var domain = $('input[name=domain]').val()
$.get( "cari-domain-function.php?domain="+domain, function( data ) {
$( "section.content-row-gray" ).html(data);
});
event.preventDefault();
})
});
</script>
add <img id='loading' src='loading.gif' style='display:none' > to hide the image, then when a search prompts add this on your script $("#loading").css("display","block"); afterwards when php request is finish $("#loading").css("display","none");, hope that works
HTML
<form class="form-full-width" method="post">
<img id='loading' src='loading.gif' style='display:none' >
<div class="group align-center form-row">
<input autofocus class="group-stretch" type="text" name="domain"
placeholder="" value="" pattern="^[a-zA-Z0-9\.-]*$" title="">
<input type="hidden" name="token"
value="70ed0e77d1b8f7124c494a970929ccb2">
<button class="button-secondary"> Search </button>
</div>
</form>
JQuery
<script type="text/javascript">
$( document ).ready(function() {
$('.button-secondary').click(function(){
$("#loading").css("display","block");
var domain = $('input[name=domain]').val()
$.get( "cari-domain-function.php?domain="+domain, function( data ) {
$( "section.content-row-gray" ).html(data);
$("#loading").css("display","none");
});
event.preventDefault();
})
});
</script>
JQuery EDIT
<script type="text/javascript">
$( document ).ready(function() {
$(document).on('click','.button-secondary',function(){
$("#loading").css("display","block");
var domain = $('input[name=domain]').val()
$.get( "cari-domain-function.php?domain="+domain, function( data ) {
$( "section.content-row-gray" ).html(data);
$("#loading").css("display","none");
});
event.preventDefault();
})
});
</script>
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="">
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 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>
I have an date input area using Bootstrap-dateinput
<div class="form-group row">
<div class="col-xs-8">
<label class="control-label">Date</label>
<div class="input-group date" id="dp3" data-date="12-02-2014" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" required="" placeholder="Date" name="date[]" value="">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</div>
Jquery Script To clone this form:
<script type="text/javascript">
$( document ).on( 'click', '.btn-add', function ( event ) {
event.preventDefault();
var field = $(this).closest( '.form-group' );
var field_new = field.clone();
$(this)
.toggleClass( 'btn-default' )
.toggleClass( 'btn-add' )
.toggleClass( 'btn-danger' )
.toggleClass( 'btn-remove' )
.html( '-' );
field_new.find( 'input' ).val( '' );
field_new.insertAfter( field );
} );
</script>
And Script to display calender:
<script type="text/javascript">
$('.input-group .date').datepicker({
...
});
</script>
But when New input area is created it do not show calender when clicked
I tried adding onclick
$(".input-group .date").click(function(){
$('.input-group .date').datepicker({
...
});
But yet seems there is some problem Can you please tell whats wrong and how to fix it ?
Try This:
<input class="form-control" type="text" required="" placeholder="Date" name="date[]" value="" onclick="$(this).datepicker({
...
});">