Why I do not get any printing on the screen (m1, m2 or m3)?
i.e. how can I pass JavaScript var to PHP Session.
<?php session_start(); ?>
<html>
<head>
<script type="text/javascript">
function disp_text()
{
var p = document.myform.mylist.value;
<?php $_SESSION['color'] ?> = p;
<?php echo $_SESSION['color'] ?>;
}
</script>
</head>
<body>
<FORM NAME="myform">
<SELECT NAME="mylist" onChange="disp_text()">
<OPTION VALUE="m1">Red
<OPTION VALUE="m2">Blue
<OPTION VALUE="m3">Green
</SELECT>
</FORM>
Thanks for any help.
And another one for the count... JavaScript runs on the user's computer, PHP runs on the server. View the page source (right-click, View Source) and you will see exactly why it doesn't work:
<script type="text/javascript">
function disp_text()
{
var p = document.myform.mylist.value;
= p;
;
}
</script>
The only way to get JS variables into PHP is via a form (which I am using loosely to include AJAX).
Try this
<html>
<head>
<script type="text/javascript">
function disp_text()
{
var e = document.getElementsByName("mylist")[0];
var p = e.options[e.selectedIndex].value;
sessionStorage.color = p;
document.write(p);
}
</script>
</head>
<body>
<FORM NAME="myform">
<SELECT NAME="mylist" onChange="disp_text()">
<OPTION VALUE="m1">Red</OPTION>
<OPTION VALUE="m2">Blue</OPTION>
<OPTION VALUE="m3">Green</OPTION>
</SELECT>
</FORM>
</body>
</html>
index.php:
<script type="text/javascript">
var time = "OK then, let's do this!";
sessionStorage.setItem("time", time);
window.location.href = "test.php";
</script>
test.php
<script type="text/javascript">
var time = sessionStorage.getItem("time");
console.log(time);
<?php $abc = "<script>document.write(time)</script>"?>
</script>
<?php
echo $abc;
?>
Related
Goodday, recently ive tried to learn AJAX. Ive made up an example that captures the data selected from the 1st dropdown box and filter into the 2nd dropdown box. However, the AJAX request doesnt seem to run.
HTML
<?php include 'conn.php' ?>
<!DOCTYPE html>
<html>
<head>
<title>
AJAX for extensions!
</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
function fetch_select(val)
{
$.ajax({
type: 'post',
url: 'fetch_data.php',
data: {
get_option:val
},
success: function (response) {
document.getElementByID("owner_id").innerHTML=response;
}
});
}
</script>
</head>
<body>
<p id="heading">Dynamic Select Option Menu Using Ajax and PHP for Extensions</p>
<center>
<div id="select_box">
<select name="department" id="department" onchange="fetch_select(this.value);">
<option value="">Select Option</option>
<?php
$sql="SELECT Department1 FROM PIC_Approval";
$result=odbc_exec($conn,$sql);
while($row=odbc_fetch_array($result)){
$department=$row['Department1']; ?>
<option value="<?php echo $department;?>"><?php echo $department;?></option>
<?php }
?>
</select>
<select name="ownerid" id="owner_id">
</select>
</div>
</center>
</body>
</html>
fetch_data.php
<?php
include 'conn.php';
if(isset($_POST['get_option']))
{
echo $_POST['get_option'];
$department = $_POST['get_option'];
$sql1="SELECT Owner_I_Employee_ID FROM masterlist1 WHERE Department1='$department'";
$result1=odbc_exec($conn,$sql1);
while($row=odbc_fetch_array($result1))
{
$id=$row['Owner_I_Employee_ID']; ?>
<option value="<?php echo $id;?>"><?php echo $id;?></option>
<?php
}
exit;
}
?>
I am not sure what is wrong with the Request. I followed as in the tutorials i found online. I am using odbc.
Turns out it's because
document.getElementByID("owner_id")
should be
document.getElementById("owner_id")
because JavaScript is case-sensitive. The code works fine after the error is fixed.
Below is my code.
Firstly, run the index.php Then there is a dropdown list will display and need to select a value from the dropdown. so far, dropdown will display value 1 or 2. If you select 2 it will display the value that has been selected together with the "date" field called from the display-date.php and from the "date" field, you may choose the date from calendar which called using datepicker plugin.
Now.. the problem is...I had select the date from calendar but the date selected didn't appear in the date input field. where am I wrong?
Hope anyone could help me please... :)
Thanks.
Here is index.php
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<script>
function getData(str){
var xhr = false;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
}
else {
// IE5/IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("results").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "display-date.php?q="+str, true);
xhr.send(null);
}
}
</script>
<div>
<?php
echo '<select title="Select one" name="selectcat" onChange="getData(this.value)">';
echo '<option value="None">-- Select Option --</option>';
echo '<option value="1">One</option>';
echo '<option value="2">Two</option>';
echo '</select>';
?>
</div>
<br/><br/>
<p>You selected: <span id="results"></span></p>
</body>
</html>
Here is display-date.php
<?php
$Q = $_GET["q"];
echo $Q;
?>
<?php
if ($Q == '2'){
?>
<html>
<head>
<style>
#date_input{
text-indent: -500px;
height:25px;
width:200px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id ="date_input" dateformat="dd-M-yy" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>
<script type="text/javascript">
$("#date_input").on("change", function () {
$(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px",
top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" :
($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
});
</script>
</body>
</html>
<?php
}
?>
Modify the display-date.php . Html base structure is no longer needed.
<?php
$Q = $_GET["q"];
echo $Q;
?>
<?php
if ($Q == '2'){
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id ="date_input" dateformat="dd-M-yy" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>
<script type="text/javascript">
$("#date_input").on("change", function () {
$(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px",
top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" :
($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
});
</script>
<?php
}
?>
There is no need to use ajax in your case, Ajax must not be used the way you showed in your question.
Ajax not used to draw html in DOM
No need to use ActiveXObject , It is insecure and I don't think we should support IE 5 or IE 6 anyways in modern development.
If you need to use ajax, Use JQuery's ajax function instead of XMLHttpRequest, As i see you are already using it.
Here is the code which works without ajax and works as it should be.
function getData(str){
$('.showInput').hide();
$('.showText').text('');
if(str != ""){
str = parseInt($.trim(str));
if(str == 2){
$('.showInput').show();
}else{
$('.showText').text(str);
}
}
}
$(document).ready(function(){
$("#date_input").datepicker({ dateFormat: 'dd-M-yy' });
});
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
</head>
<body>
<style>
.showInput{
display:none;
}
</style>
<div>
<select title="Select one" name="selectcat" onChange="getData(this.value)">
<option value="">-- Select Option --</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<br/><br/>
<p>You selected: <span id="results">
<span class="showText"></span>
<span class="showInput">
<input id="date_input" dateformat="dd-M-yy" type="text"/>
</span>
</p>
</body>
</html>
I want to pass a text box value in parent.php to my popup window(child_page.php). Following is my code.
parent.php-
<html>
<head>
<script type="text/javascript">
var popupWindow=null;
function child_open()
{
popupWindow =window.open('child_page.php',"_blank","directories=no, status=no, menubar=no, scrollbars=yes, resizable=no,width=600, height=280,top=200,left=200");
}
function parent_disable() {
if(popupWindow && !popupWindow.closed)
popupWindow.focus();
}
</script>
<input type="text" name="myTextField" id="myTextField" required="required"/>
</head>
<body onFocus="parent_disable();" onclick="parent_disable();">
Click me
</body>
</html>
child_page.php
<h1>child page</h1>
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
var x=parent.document.getElementById('myTextField').value
<?php echo x; ?>
</script>
<?php
//how do I get the textbox value here.
?>
I googled it and tried to do it. Since I know little about java script couldn't pull those answers together as a solution.
There are many errors in your html. You are writing input element before closing head tag. Move it inside body. And try something like this:
<html>
<head>
<script type="text/javascript">
var popupWindow=null;
function child_open(val){
popupWindow =window.open('child_page.php' + "?val=" + val,"_blank","directories=no, status=no, menubar=no, scrollbars=yes, resizable=no,width=600, height=280,top=200,left=200");
}
function parent_disable() {
if(popupWindow && !popupWindow.closed)
popupWindow.focus();
}
</script>
</head>
<body onFocus="parent_disable();" onclick="parent_disable();">
<input type="text" name="myTextField" id="myTextField" required="required"/>
Click me
</body>
</html>
Now in your child_page.php you can get the value using $_GET['val'].
//child_page.php
<h1>child page</h1>
<?php $x = $_GET['val']; ?>
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
</script>
<?php echo $x; ?>
I’m using below a simple Jquery code to call a PHP page and get the button information back in a div:
<head>
<script>
$(document).ready(function(){
$('#myButtons input:radio').change(function() {
var buttonValue = $("#myButtons input:radio:checked").val();
$("#myDiv").load('myPHPfile.php', {selectedButtonValue : buttonValue});
});
});
</script>
</head>
<body>
<div id="myButtons">
<input type="radio" name="category" value="10" />ButtonA
<input type="radio" name="category" value="20" />ButtonB
</div>
<div id="myDiv">Click the button to load results</div>
</body>
myPHPfile.php
<?php
if( $_REQUEST["selectedButtonValue"] )
{
$buttonPHP = $_REQUEST['selectedButtonValue'];
echo "Value button is ". $buttonPHP;
}
?>
How can I get the PHP information inside JavaScript, as follows:
alert(<?php echo('buttonPHP'); ?>);
Note: The following code shows the alert box message, but I can’t use it since I need the $buttonPHP value:
$("#myDiv").load('myPHPfile.php', {selectedButtonValue : buttonValue}, function(data){ alert(data); });
I’ve tried $_SESSION in myPHPfile.php, and also all jQuery AJAX functions: load(), get(), post() and the ajax() method, none of them is giving the PHP value inside JavaScript.
I looked all over but I couldn’t find an answer.
You would be better with an $.ajax request. Don't echo the 'Value of button is' part, just echo the actual value. For example:
$.ajax({
url: "myPHPfile.php",
context: document.body
}).done(function(data) {
var buttonValue = data;
// Whatever you want to do with the data goes here.
});
See the jQuery docs http://api.jquery.com/jQuery.ajax/
Alternatively, if you are generating the page with PHP, just echo the PHP variable into the JavaScript
<script>
...
var buttonValue = "<?php echo $buttonPHP; ?>";
...
</script>
Encode it in JSON instead of trying to echo the data :
<?php
if( $_GET["selectedButtonValue"] )
{
$buttonPHP = $_GET['selectedButtonValue'];
header('Content-Type: application/json');
echo json_encode($buttonPHP);
}
?>
Then use jquery get json to grab the data
$.get('myPHPfile.php?selectedButtonValue='+buttonvalue, function(data){
console.log(data);
});
Try:
alert('<?php echo $buttonPHP; ?>');
As a temporary solution, you could quickly merge both into a dirty code like this:
index.php:
<?php
$buttonPHP = "10"; //Set up your default button variable
if( $_REQUEST["selectedButtonValue"] == 10 )
{
echo "Selected button value: 10"; //You can also print $_REQUEST["selectedButtonValue"] here directly, but what's the point if you can select it from DOM through jQuery?
exit;
} else if ($_REQUEST["selectedButtonValue"] == 20) {
echo "Selected button value: 20";
exit;
}
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var buttonValue = <?php echo $buttonPHP ?>; //Duplicate default value from PHP to JS
$(document).ready(function(){
$('#myButtons input:radio').change(function() {
var buttonValue = $("#myButtons input:radio:checked").val();
$("#myDiv").load('index.php', {selectedButtonValue : buttonValue});
});
});
</script>
</head>
<body>
<div id="myButtons">
<input type="radio" name="category" value="10" />ButtonA
<input type="radio" name="category" value="20" />ButtonB
</div>
<div id="myDiv">Click the button to load results</div>
</body>
</html>
index.php rendered in browser:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var buttonValue = 10; //Duplicate default value from PHP to JS
$(document).ready(function(){
$('#myButtons input:radio').change(function() {
var buttonValue = $("#myButtons input:radio:checked").val();
$("#myDiv").load('index.php', {selectedButtonValue : buttonValue});
});
});
</script>
</head>
<body>
<div id="myButtons">
<input type="radio" name="category" value="10" />ButtonA
<input type="radio" name="category" value="20" />ButtonB
</div>
<div id="myDiv">Click the button to load results</div>
</body>
</html>
EDIT: Stored session
<?php
session_start();
if (isset($_REQUEST['selectedButtonValue'])) {
$_SESSION['selectedButtonValue'] = $_REQUEST['selectedButtonValue'];
echo $_REQUEST['selectedButtonValue'];
exit;
} else if (!isset($_SESSION['selectedButtonValue'])) {
$_SESSION['selectedButtonValue'] = 10;
}
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var buttonValue = <?php echo $_SESSION['selectedButtonValue']; //Get input value from session ?>;
$(document).ready(function(){
$('#myButtons input:radio').change(function() {
var buttonValue = $("#myButtons input:radio:checked").val();
$("#myDiv").load('index.php', {selectedButtonValue : buttonValue});
});
});
</script>
</head>
<body>
<div id="myButtons">
<input type="radio" name="category" value="10" />ButtonA
<input type="radio" name="category" value="20" />ButtonB
</div>
<div id="myDiv"><?php echo $_SESSION['selectedButtonValue']; //Get input value from session ?></div>
</body>
</html>
Also make sure you filter the $_REQUEST variable, because as of now, it will print anything. See http://en.wikipedia.org/wiki/Cross-site_scripting for details.
i have a form that users can fill out and i need the users to be able to generate a pdf with their results using query string
example
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<form id="form">
<select name="test" id="test">
<option id="op1" value="1">1234</option>
<option id="op2" value="2">2134</option>
</select>
</form>
click here
</body>
Thanks!
HTML:
click here
jQuery
$(document).ready(function(){
$('#pdf_a').click(function(){
$(this).attr('href', 'url.pdf?'+$('#form').serialize());
});
});
Example:
http://jsfiddle.net/NeL5X/
This will take the values opt1 and opt2 and put it in the url as opt1=x&opt2=y.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my_link").click(function(){
opt1 = $("#opt1").val(); // Stores the value of id-opt1 in the variable opt1
opt2 = $("#opt2").val(); // Stores the value of id-opt2 in the variable opt2
url = "url.pdf?opt1=" + opt1 + "&opt2=" + opt2; // Takes the above variables and creates the query to send to your file.
window.location = url;
});
});
</script>
</head>
<body>
<form id="form">
<select name="test" id="test">
<option id="op1" value="1">1234</option>
<option id="op2" value="2">2134</option>
</select>
</form>
<a id="my_link"> click here</a>
</body>