This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Pass a PHP string to a Javascript variable (including escaping newlines)
Let's say there is some PHP file called as scheduler.php. It contains a script
<script>
window.setInterval(function(){
find_opt_schedule();
}, 60000);
</script>
... and some PHP code:
<form action="scheduler.php" method="post">
<select name="refresh" id="refresh">
<option value="30000">30000</option>
<option value="60000" selected>60000</option>
<option value="120000">120000</option>
</select>
</form>
How do I use the value selected by the user from refresh select list inside the script? In particular, I want to replace 60000 by the variable that must be selected by the user from the list. I tried this, but the refresh rate is very high instead of 60000 miliseconds.
window.setInterval(function(){
find_opt_schedule();
alert(<?php echo (int)$_POST['refresh']; ?>);
}, <?php echo (int)$_POST['refresh']; ?>);
Your values should be (30000, 60000, 120000), not (0, 1, 2). The POST field contains the value of the selected option, not the text.
Note: You should have been able to figure this out by checking the source of the resulting HTML document. The "1" ought to stick out like a sore thumb.
<select name="refresh" id="refresh">
<option value="30000">30000</option>
<option value="60000" selected>60000</option>
<option value="120000">120000</option>
</select>
window.setInterval(function(){
find_opt_schedule();
}, <?php echo (int)$_POST['refresh']; ?>);
And make sure you use:
<form action="yourscript.php" method="post" name="form" id="form">
And a submitbutton, or javascript:
<select name="refresh" id="refresh" onchange="form.submit()">
<input type="submit" value="Set refresh"/>
All together, with session storage:
<?php
session_start();
if( isset( $_POST['refresh']) ){
$_SESSION['refresh'] = (int) $_POST['refresh'];
}
?>
<script type="text/javascript">
window.setInterval(function(){
find_opt_schedule();
}, <?php echo isset($_SESSION['refresh'])?$_SESSION['refresh']:120000; ?>);
</script>
<form action="scheduler.php" method="post" name="form" id="form">
<select name="refresh" id="refresh" onchange="form.submit()">
<option value="30000">30000</option>
<option value="60000" selected="selected">60000</option>
<option value="120000">120000</option>
</select>
<input type="submit" value="Set refresh"/>
</form>
Use JQuery:
<html>
<body>
<select name="refresh" id="refresh">
<option value="30000">30000</option>
<option value="60000" selected>60000</option>
<option value="120000">120000</option>
</select>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function setInterval(refresh_rate)
{
window.setInterval(function(){
find_opt_schedule();
}, refresh_rate);
}
$(function(){
$('#refresh').change(function () {setInterval($(this).val());});
}
</script>
</body>
</html>
Erm... that's just plain HTML. All you need is to read it and adjust the timeout as needed:
<script>
(function() {
var start = new Date().getTime(),
selector = document.getElementById('refresh');
setInterval(function() {
// check if timer has run out
var now = new Date().getTime();
if( now-start > selector.value) {
find_opt_schedule();
start = now;
}
},1000);
})();
</script>
Related
With this code I can see each option value printed but the page is refreshed every time I select an option. The server get the post data correctly, so I just need to do it without refreshing.
Thanks. Regards.
<form action="" method="post">
<select name="day" onchange="this.form.submit();">
<option>Please select a date</option>
<option value="Mon">Monday</option>
<option value="Tue">Tuesday</option>
<option value="Wed">Wednesday</option>
<option value="Thu">Thursday</option>
<option value="Fri">Friday</option>
</select>
</form>
<script type="text/javascript">
$('#day').change(function()
{
$.ajax({
type: 'post',
url: "day.php",
data: $("form.day").serialize(),
});
return false;
});
</script>
<?php
include 'day.php'; ?>
day.php
<?php
$day = $_POST['day'];
echo $day;
?>
I think you need this:
e.preventDefault();
//add your id="day"
<select name="day" id="day" onchange="this.form.submit();">
$('#day').change(function(e)
{
e.preventDefault();
$.ajax({
type: 'post',
url: "day.php",
data: $("form.day").serialize(),
});
return false;
});
Update the onchange to call a Javascript function that copies the data to a hidden field in another form, and use Ajax to submit that one instead.
Optionally, you could also submit the data through Ajax directly, without the additional form, but for things that might be done with high frequency, I find it useful to minimize the bandwidth as much as possible.
I could see every option value printed by the <p id=..> without refreshing the page. But the post data is not passed to day.php..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<head>
<script>
function postSelection(selectObject) {
var day = window.dateForm.day.value = selectObject.options[selectObject.selectedIndex].value;
var dataString = "day=" + day;
$.ajax ({
type:"post",
url: "day.php",
data:dataString,
success: function (response) {
$("#list").html(response);
}
});
return false;
}
</script>
</head>
<body>
<form name="displayForm">
<select name="day" onchange="return postSelection(this)">
<option>Please select a date</option>
<option value="Mon">Monday</option>
<option value="Tue">Tuesday</option>
<option value="Wed">Wednesday</option>
<option value="Thu">Thursday</option>
<option value="Fri">Friday</option>
</select>
</form>
<form action="" method="post" name="dateForm">
<input type="hidden" name="day">
</form>
<?php include 'day.php'; ?>
</body>
</html>
<html>
<head>
</head>
<body>
<form action="area.php" method="get">
<select name="xyz">
<option value="1">option1</option>
<option value="2">option2</option>
</select>
</body>
</html>
I want to send data of value of option as a param to form action with out submit button.
I have seen ajax and jquery but submit button is required every time.
I'll use jQuery syntax for its brevity. You can easily do this in native Javascript also.
Here's an abbreviated version of your form:
<form action="area.php" method="get" id="myform">
<select id="myselect">
<!-- ... options ... -->
</select>
</form>
Have this Javascript run when the page is done loading (note the first line). It's important that the .change() be bound after the form has been rendered.
$(document).ready(function() {
$("#myselect").change(function() {
$("#myform").trigger("submit");
});
});
This will fire the default submit action on the form whenever the select element is changed.
You can use ajax for that as follows:
$(".selectElement").on('change',function(){
$.ajax({
url: "area.php",
method: "POST"
});
});
You can get some documentation on this http://api.jquery.com/jquery.ajax
HTML:
<form>
<select name="xyz" id="mySelect">
<option value="1">option1</option>
<option value="2">option2</option>
</select>
</form>
jQuery:
$(function(){
$("#mySelect").on("change", function(){
var getValue = $(this).val();
$.ajax({
url:'area.php',
type:'get',
data:{ selectValue:getValue },
// get this value #area.php using $_GET['selectValue'];
success:function(response){
// whatever you echoed in area.php, comes in response
}
});
});
});
<select name="xyz" onchange="this.form.submit()">
<option value="1">option1</option>
<option value="2">option2</option>
</select>
You can try using this :
<html>
<head>
<script type="text/javascript">
function call_ajax (str) {
alert(str);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("abc").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "a.php?value="+str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="a.php" method="get">
<select name="xyz" id="abc" onchange="return call_ajax(this.value)">
<option value="1">option1</option>
<option value="2">option2</option>
</select>
</body>
</html>
For some reason, a form I am submitting via POST is sending the option text rather than the option value for a form. This is my select declaration:
<select name = "newfreq">
<option val='1'>every week</option>
<option val='2'>every 2 weeks</option>
</select>
When I print out my $_POST array in PHP. I have:
[newfreq] => every 2 weeks
I am particularly new to jquery, which I am using to present the form modally, so I am pasting the full form/div and javascript below in case it's relevant:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script>
$(function() {
var dialog, form,
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
});
form = dialog.find( "form" ).on( "submit", function( event ) {
// event.preventDefault();
});
$( "#create-user" ).button().on( "click", function() {
dialog.dialog( "open" );
});
});
</script>
<input id = "create-user" type="submit" tabindex="-1" value = "Change deal" >
<div id="dialog-form" >
<form method = "post" action = "details.php">
<fieldset>
<label for="name">Number of hours</label>
<input type="text" name="newhours" id="name" value = <?php echo $totalhours; ?> class="text ui-widget-content ui-corner-all">
<label for="email">Frequency</label>
<select name = "newfreq">
<option val='1'><?php echo return_frequency($typedeal ,1)?></option>
<option val='2'><?php echo return_frequency($typedeal ,2); ?></option>
</select>
<input type = "hidden" name = "included" value = '<?php echo $included;?>'/>
<input type = "hidden" name = "id" value = '<?php echo $id_bus;?>'/>
<br>
<input type="submit" tabindex="-1" >
</fieldset>
</form>
</div>
return_frequency() is a php function that returns "every 2 weeks" or "every week" depending on the input.
What am I missing here?
<option val='1'> should be <option value='1'>
I know its probably Jquery that confused you since they use .val a lot but actual HTML uses value and so does normal Javascript use .value.
I think since you didn't properly specify a value your browser must be putting the text in value for you somehow. Don't rely on that, however, since I think that's probably a bug and not all browsers will do it.
change to:
<select name = "newfreq">
<option value='1'>every week</option>
<option value='2'>every 2 weeks</option>
</select>
Have a form like:
<form name="myform" action="All.php" method="get">
<input type='text' id='tx' name='tx' value=''>
<td height="8" align="right" valign="middle">All Cities | Newyork | Police</td></form>
<script type="text/javascript">
function submitform(val)
{
$("#tx").val(val);
document.myform.submit();
}
</script>
And in All.php:
<form method="get" action="index1.php" id="frm1">
<select id="category" onchange="showSelected1();" style="width:150px">
<option></option>
<option value="1" <?php if($_GET["categoryText"] == "Marriages") echo "selected"; ?> >Marriages</option>
<option value="2" <?php if($_GET["categoryText"] == "Birthdays") echo "selected"; ?> >Birthdays</option></select>
<input type="hidden" id="categoryText" name="categoryText" value='<?= $_GET['categoryText']; ?>'/>
<select id="city" onchange="showSelected();" style="width:150px">
<option><?= $_GET['tx']; ?></option>
<option></option>
<option value="1" <?php if($_GET["cityText"] == "Newyork") echo "selected"; ?> >Newyork</option>
<option value="2" <?php if($_GET["cityText"] == "Police") echo "selected"; ?> >Police</option></select>
<input type="hidden" id="cityText" name="cityText" value='<?= $_GET['cityText']; ?>'/>
<input type="button" value="Submit" onclick="formSubmit()"/></form>
<script language="JavaScript" type="text/javascript">
<!--
function showSelected()
{
var selObj = document.getElementById('city');
var cityTextObj = document.getElementById('cityText');
var selIndex = selObj.selectedIndex;
cityTextObj.value = selObj.options[selIndex].text;
}
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
function showSelected1()
{
var selObj = document.getElementById('category');
var categoryTextObj = document.getElementById('categoryText');
var selIndex = selObj.selectedIndex;
categoryTextObj.value = selObj.options[selIndex].text;
}
//-->
</script>
Means, from first page contents filling into a form itself in All.php. If somebody clicks submit button without changing the selection city, in All.php, its not showing and not taking the city value to index1.php. Why is that?
you can try
document.getElementById("myform").submit();
You have write wrong variable name into your below code
<script type="text/javascript">
function submitform(val)
{
$("#hx").val(val);
document.myform.submit();
}
</script>
your have used hx insted of tx, so your code may be like this
<script type="text/javascript">
function submitform(val)
{
$("#tx").val(val);
document.myform.submit();
}
</script>
change this and try your code again.
I have seen many other problems into your code , learn how to use single quote (') and double quote("). You have written this
value='<?= $_GET['categoryText']; ?>' which is wrong.
correct way is value='<?php $_GET["categoryText"]; ?>'
Update you code according to this and run it again and come back here if there any problem.
in my code i am creating a drop down box and storing the changed value of the drop down in hidden variable.
<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select id="sweets">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<input type="hidden" id="inputfield">
<div></div>
<script type="text/javascript">
$(document).ready(function() {
$("#sweets").change(function() {
var var_name = $(this).val();
$('input[id=inputfield]').val(theValue);
}
});
});
});
</script>
</body>
</html>
<?php
if(isset($_POST['form']))
echo $_POST['inputfield'];
?>
once the combo box is changed the php should get the hidden field value and i ve to perform db transaction. again i need to load another drop down box based on the selected value.. Can you guide me
You can bypass all the horse trading with the hidden field and send it to php directly via ajax.
$(document).ready(function() {
$("#sweets").change(function() {
$.post('myphpfile.php', {sweet : $(this).val() });
});
});
myphpfile.php will receive the value as a post with the name of 'sweet'
Unless I'm misunderstanding, shouldn't
$('input[id=inputfield]').val(theValue);
be
$('input[id=inputfield]').val(var_name);
?
You can wrap the select and hidden elements in form element adding a post method and action attribute. Give the hidden field a name as in name="hidden field"
this way you can access it in the post variable.
<form action="currentpage.php" method="post">
<select id="sweets">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<input type="hidden" id="inputfield" name="hiddenfield"/>
<input type="submit" value="Submit" name="submit"/>
</form>
When the change event executes to update the hidden field and you submit in php you can do
if(isset($_POST["submit"]))
{
$val = $_POST["hiddenfield"] ;
}