I have the following code to get the selected item value and post it to a DIV. That is okay, it is working fine, my DIV shows the selected value. But my question is how can I use that value in the DIV ? so that I can create a php msyql query.
<head>
<style>
.response {
padding:10px;
background-color:#9F9;
border:2px solid #396;
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#developer").change(onSelectChange);
});
function onSelectChange(){
var selected = $("#developer option:selected");
var output = "";
if(selected.val() != 0){
output = selected.val();
}
$("#output").html(output);
$('#output').slideDown("slow");
}
</script>
</head>
<select id="developer">
<option value="0">Select</option>
<option value="1">name</option>
<option value="2">name2</option>
</select>
<div align=center class=response id=output style="display:none;">
<?php
$sql = "SELECT * FROM users WHERE name='$name'";
$result = mysql_query($sql) or die("err");
while($row=mysql_fetch_array($result)){
$age = $row[age]; }
echo $age;
?>
</div>
Javascript executes on the front-end, in the user's browser. PHP and mysql are executed on the backend, on your server. If you want to use values from your javascript in PHP and mysql, you will need to make a request to the back-end.
You should read up on
http://api.jquery.com/jQuery.ajax/
and/or
http://api.jquery.com/jQuery.post/
The answer to your question is that you submit the form or send an ajax request back to your server. Your server using PHP, in your case, uses that data to form the DB query.
I think that you are mixing up the timing for when this code is being run.
PHP process and sends to Html loads
Javascript runs (hopefully after
HTML loads) Request is submited from
HTML or Javascript Back to the top
I think you can use $("#output").text(output) instead of $("#output").html(output).
Then you can use $("#output").text(output) to get the value your need.
Related
.net developer trying to do a php site for a friend, so far everything is going great but I was wondering if php has something like a textchanged event. Here is what I want to do, I want a drop down box to be appended with data retrieved from a database based on what the user enters in a textbox above(Using the text in the textbox as a parameter to retrieve data from a database and append it to the drop down without reloading the entire page.)
protected void TextBox1_TextChanged(object sender, EventArgs e)
{
//Do stuff
}
The block off code above is in asp.net but i want to implement something similar in php.
That is not how php works. however you can make a ajax call like this with jquery:
<?php
//array, object or db result you use to fill your dropdown
$array = array('pipo', 'kees', 'klaas', 'klaas1', 'jan', 'meneerje', 'poep', 'hessel', 'kaas', 'ietsandersd', 'smit', 'cowoy', 'nog zo iets');
//if we want to search we search and only return the new found options
if(isset($_REQUEST['keyword'])){
$new_array = array();
foreach($array as $value){
if(strpos($value, $_REQUEST['keyword']) !== false){
$new_array[] = $value;
}
}
}
else{
$new_array = $array;
}
$options = '';
foreach($new_array as $key => $option){
$options .= "<option value='$key'>$option</option>";
}
$selectbox = "<select name='selectbox' id='drop_down'>$options</select>";
if(isset($_REQUEST['keyword'])){
echo $options;
}
else{
// with the \ we escape the "
echo "<html>
<head>
<title>ajax selectbox</title>
<script src=\"http://code.jquery.com/jquery-latest.min.js\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
$(document).ready(function () {
$('body').on('keyup', '.search', function(){
var data = $('.search').serialize();
$.post('ajax_selectbox.php', data, function (data){
$('#drop_down').html(data);
});
});
});
</script>
</head>
<body>
<input type='text' name='keyword' class='search' />
$selectbox
</body>
</html>
";
}
?>
explanation:
java script,
first we include the online jquery library, you can also download the library and include it from your own web server.
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
// first we wait unit the html page is loaded
$(document).ready(function () {
//then we wait for a keyup event in the element with class="search" we use the css sector . for classes like .search
$('body').on('keyup', '.search', function(){
//when we type inside the .search textbox we serialize the element like a form would do. this takes the name and the value and puts it in a array.
var data = $('.search').serialize();
// then we post with ajax back to our php file or an other php file. its you own decision. the data variable is the serialized data form .search
$.post('ajax_selectbox.php', data, function (data){
// at least we use a calback for when the ajax event has finnest and we use the jquery html function to put the new options inside the drobbox with id="drop_down". we use the css id selector # to select the select box.
$('#drop_down').html(data);
});
});
});
</script>
note that I use jquery (and a lot of large players on the web use jquery) and if you know a little java-script the syntax can be disturbing.
In jquery we have a large set of methots we can use directly like:
$.post();
if you want to use the returned data from that function we create a calback function like:
$.post( function(param_ returned_by_parent_function){
//do stuf
});
An other way of using jquery and this is actually the idea behind it is query to a html element and then do stuff with it like this.
$('html_element_query').do_something_with_this();
of course this is just a basic basically explanation but maybe you get the idea.
You can use javascript onChange handler and send the current value to php via AJAX
https://developer.mozilla.org/en/docs/DOM/element.onchange
http://www.w3schools.com/ajax/
PHP does not know what happens on the client. If you want some events on the client to trigger actions, you have to code that yourself (usually in JavaScript).
PHP itself has no awareness of events happening on the front end. You can, however, plug the functionality (kind of) by using a mixture of Ajax and PHP. Ajax will watch for the events and PHP will process data sent to it from that Ajax.
I suggest using jQuery and checking out http://api.jquery.com/Ajax_Events/
I made a very simple PHP Event Dispatcher for myself, it is testable and has been used on my websites. If you need it, you can take a look.
I want to pass area name selected from drop down menu to query of MySQL through PHP. I retrieved name in JavaScript but I am unable to store value from JavaScript to PHP. My Code is As follows
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script>
function getIndex()
{
var x=document.getElementById("cmbArea").selectedIndex;
var y=document.getElementById("cmbArea").options
var z= y[x].text;
alert(z);
}
</script>
</head>
<body>
<form name ="form1" action="Demo1.php" method="post">
<select id="cmbArea" name="cmbArea">
<?php
include 'Connect.php';
$query = "SELECT varAreaName FROM tbArea" ;
$result = mysql_query($query);
while($row = mysql_fetch_assoc( $result )) {
echo '<option value="'.$row['varAreaName'].'">' . $row['varAreaName'] . '</option>';
}
?>
</select>
</form>
<input type="Button" onclick="getIndex()" value="Alert index of selected option">
</body>
</html>
You need to post your form. The value will be available in $_POST['cmbArea'].
If I am understanding you correctly I would use AJAX in this case. Something like this: http://openenergymonitor.org/emon/node/107
Yes, you can not 'store' value from javascript to PHP, as javascript is in client-side(literally in your Browser-side), not in the server-side.
You need to post the data using ajax(Jquery ajax may be), and post them in JSON format.
Check this thread..
PHP will run on server and then javascript will be run on the browser. So you cannot do both in the same page, as you try.
I think the best way is to submit the form, and read the value there using PHP. There you can execute your query.
If you don't want to submit you can check AJAX which will send an asynchronous server side request, without refreshing the webpage.
Here is my javascript code which is added in the tag of my php/html page:
<script type="text/javascript">
$(document).ready(function() {
$('#status').change(function(){
var status = $('#status').val();
var html = ''; //string variable for html code for fields
if( status=="closed"){
html += '<th>Close By :</th><td align="left"><select name="close_by">'+<?php $user=mysql_query("SELECT * FROM user");
while($data=mysql_fetch_array($user)){?>+'<option value="'+<?php echo $data['username'] ?>+'">'+<?php echo $data['username']; ?>+'</option>'+<?php } ?>+'</select></td>';
}
$('#close_by').html(html);
});
});
</script>
The code is for that, if Status=="closed" then a select tag will be appeared and the option values will be fetched from the database using mysql functions.But its not working. Please help to sort out this problem.
Thanks in advance.
You can't. PHP/MySQL reside on your server, while JS is executed in the browser.
Of course you may let the browser interact with your server by proper HTTP requests, after setting proper routes on your server.
You can mix PHP into Javascript. The PHP will execute on the server, and then the JS on the client. It's horrible though, extremely bad practice, and a nightmare to debug. Much better to seperate them out and use jQuery ajax to load the data.
Or use PHP to put the data into a JSON object at the start of the javascript, and process that with Javascript, rather than using PHP code to concatenate strings inside Javascript.
But in your example, what exactly is the problem? What is the end result of the PHP (in the HTML source) of the html variable? I suspect there's a bracket or quote wrong somewhere.
You can do it with ajax
$(document).ready(function() {
$('#status').change(function(){
var status = $('#status').val();
if( status=="closed"){
$.ajax({
url: 'ajax.php?',//if you have parameters
success:function (response) {
$('#close_by').html(response);
}
});
}
});
});
And you create a new php file for the ajax request
ajax.php
<th>Close By :</th>
<td align="left">
<select name="close_by">
<?php $user=mysql_query("SELECT * FROM user");
while($data=mysql_fetch_array($user)){?>
<option value="<?php echo $data['username'] ?>"><?php echo $data['username']; ?>
</option>
<?php } ?>
</select>
</td>
<button type="button" id="okButton" onclick="funk()" value="okButton">Order now </button>
<script type="text/javascript">
function funk(){
alert("asdasd");
<?php echo "asdasda";?>
}
</script>
When the button is pressed I want to execute PHP code (at this point to echo asadasda)
You could use http://phpjs.org/ http://locutus.io/php/ it ports a bunch of PHP functionality to javascript, but if it's just echos, and the script is in a php file, you could do something like this:
alert("<?php echo "asdasda";?>");
don't worry about the shifty-looking use of double-quotes, PHP will render that before the browser sees it.
as for using ajax, the easiest way is to use a library, like jQuery. With that you can do:
$.ajax({
url: 'test.php',
success: function(data) {
$('.result').html(data);
}
});
and test.php would be:
<?php
echo 'asdasda';
?>
it would write the contents of test.php to whatever element has the result class.
Interaction of Javascript and PHP
We all grew up knowing that Javascript ran on the Client Side (ie the browser)
and PHP was a server side tool (ie the Server side). CLEARLY the two just cant interact.
But -- good news; it can be made to work and here's how.
The objective is to get some dynamic info (say server configuration items) from the server into the Javascript environment so it can be used when needed - - typically this implies DHTML modification to the presentation.
First, to clarify the DHTML usage I'll cite this DHTML example:
<script type="text/javascript">
function updateContent() {
var frameObj = document.getElementById("frameContent");
var y = (frameObj.contentWindow || frameObj.contentDocument);
if (y.document) y = y.document;
y.body.style.backgroundColor="red"; // demonstration of failure to alter the display
// create a default, simplistic alteration usinga fixed string.
var textMsg = 'Say good night Gracy';
y.write(textMsg);
y.body.style.backgroundColor="#00ee00"; // visual confirmation that the updateContent() was effective
}
</script>
Assuming we have an html file with the ID="frameContent" somewhere,
then we can alter the display with a simple < body onload="updateContent()" >
Golly gee; we don't need PHP to do that now do we! But that creates a structure for
applying PHP provided content.
We change the webpage in question into a PHTML type to allow the server side PHP access
to the content:
**foo.html becomes foo.phtml**
and we add to the top of that page. We also cause the php data to be loaded
into globals for later access - - like this:
<?php
global $msg1, $msg2, $textMsgPHP;
function getContent($filename) {
if ($theData = file_get_contents($filename, FALSE)) {
return "$theData";
} else {
echo "FAILED!";
}
}
function returnContent($filename) {
if ( $theData = getContent($filename) ) {
// this works ONLY if $theData is one linear line (ie remove all \n)
$textPHP = trim(preg_replace('/\r\n|\r|\n/', '', $theData));
return "$textPHP";
} else {
echo '<span class="ERR">Error opening source file :(\n</span>'; # $filename!\n";
}
}
// preload the dynamic contents now for use later in the javascript (somewhere)
$msg1 = returnContent('dummy_frame_data.txt');
$msg2 = returnContent('dummy_frame_data_0.txt');
$textMsgPHP = returnContent('dummy_frame_data_1.txt');
?>
Now our javascripts can get to the PHP globals like this:
// by accessig the globals
var textMsg = '< ? php global $textMsgPHP; echo "$textMsgPHP"; ? >';
In the javascript, replace
var textMsg = 'Say good night Gracy';
with:
// using php returnContent()
var textMsg = '< ? php $msgX = returnContent('dummy_div_data_3.txt'); echo "$msgX" ? >';
Summary:
the webpage to be modified MUST be a phtml or some php file
the first thing in that file MUST be the < ? php to get the dynamic data ?>
the php data MUST contain its own css styling (if content is in a frame)
the javascript to use the dynamic data must be in this same file
and we drop in/outof PHP as necessary to access the dynamic data
Notice:- use single quotes in the outer javascript and ONLY double quotes in the dynamic php data
To be resolved: calling updateContent() with a filename and
using it via onClick() instead of onLoad()
An example could be provided in the Sample_Dynamic_Frame.zip for your inspection, but didn't find a means to attach it
You can't run PHP with javascript. JavaScript is a client side technology (runs in the users browser) and PHP is a server side technology (run on the server).
If you want to do this you have to make an ajax request to a PHP script and have that return the results you are looking for.
Why do you want to do this?
If you just want to echo a message from PHP in a certain place on the page when the user clicks the button, you could do something like this:
<button type="button" id="okButton" onclick="funk()" value="okButton">Order now</button>
<div id="resultMsg"></div>
<script type="text/javascript">
function funk(){
alert("asdasd");
document.getElementById('resultMsg').innerHTML('<?php echo "asdasda";?>');
}
</script>
However, assuming your script needs to do some server-side processing such as adding the item to a cart, you may like to check out jQuery's http://api.jquery.com/load/ - use jQuery to load the path to the php script which does the processing. In your example you could do:
<button type="button" id="okButton" onclick="funk()" value="okButton">Order now</button>
<div id="resultMsg"></div>
<script type="text/javascript">
function funk(){
alert("asdasd");
$('#resultMsg').load('path/to/php/script/order_item.php');
}
</script>
This runs the php script and loads whatever message it returns into <div id="resultMsg">.
order_item.php would add the item to cart and just echo whatever message you would like displayed. To get the example working this will suffice as order_item.php:
<?php
// do adding to cart stuff here
echo 'Added to cart';
?>
For this to work you will need to include jQuery on your page, by adding this in your <head> tag:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
Any server side stuff such as php declaration must get evaluated in the host file (file with a .php extension) inside the script tags such as below
<script type="text/javascript">
var1 = "<?php echo 'Hello';?>";
</script>
Then in the .js file, you can use the variable
alert(var1);
If you try to evaluate php declaration in the .js file, it will NOT work
put your php into a hidden div and than call it with javascript
php part
<div id="mybox" style="visibility:hidden;"> some php here </div>
javascript part
var myfield = document.getElementById("mybox");
myfield.visibility = 'visible';
now, you can do anything with myfield...
We can use php in JavaScript by creating a form element and put the action as a .php page.
Then we use JavaScript to submit that form.
EX:
<!doctype html>
<html>
<head>
<title>PHP Executed with JS</title>
</head>
<body>
<form action="phpCode.php" id="phpCode">.
</form> <!-- This is the form-->
<script>
function runPhp() {
var php =
document.getElementById("phpCode")
php.submit() //submit the form
}
</script>
</body>
The PHP file name would be phpCode.php.
In that file would be your PHP code.
May be this way:
<?php
if($_SERVER['REQUEST_METHOD']=="POST") {
echo 'asdasda';
}
?>
<form method="post">
<button type="submit" id="okButton">Order now</button>
</form>
If you do not want to include the jquery library you can simple do the following
a) ad an iframe, size 0px so it is not visible, href is blank
b) execute this within your js code function
window.frames['iframename'].location.replace('http://....your.php');
This will execute the php script and you can for example make a database update...
Use ajax to send request and echo the response
when successfully executed. Like this:
$.get("site.com/ajax", function(status,data){
alert(status);
});
This can be achieved with jquery library.
You could run PHP at the start of the Page and grap the results from inputs
<?php
c = a * b;
?>
<input type="hidden" name="c" value="<?php c ?>"/>
<button type="submit">Submit</button>
</form>
<script>
let cValue = $('input[name="c"]').val();
alert(cValue);
</script>
Right now, I have variables that default to the current d/m/y, which is then popped into a mySQL query that displays all data from a table WHERE date='$dday' AND month='$dmonth' AND year='$dyear'.
$ddate = date("d");
$dmonth = date("m");
$dyear = date("Y");
Instead, I'd like to have a select box that will change the variables based on the option selected. So the default option for the Day select will be the current date, but if I change that to day 12 for example, I want the variable to change when the select option changes, and then re-query the database automatically. I'm assuming this would be done with AJAX.
Is what I'm talking about even possible? If the automation of the query adds a big layer of complexity, I'd be fine with just changing the variable and updating based on the press of a submit button.
I promise to take a break from asking questions and start answering some, if questions below my simple level are even asked.
Yes, this is possible. jQuery even makes it easy.
Create your <select> element and give it an ID so it can be used in jQuery.
Add an event listener in jQuery that is fired when the <select> changes, like $("#date").change().
In the event handler for the change event, get the current value of the <select>, and then use jQuery's AJAX $.post() function to send that data to a PHP file.
In that PHP file, sanitize the data to prevent MySQL Injections, and then query the database for the new data.
Use PHP's echo function to send back the data.
In the jQuery $.post() callback function (third parameter), receive the echoed data and put it into a variable.
Use jQuery to update your HTML with the data.
Both of the solutions you suggest would work. You can send the values from the select box to a php script using AJAX, or you could just submit the form and access them that way via $_POST or $_GET depending on your form method.
Heres an example, ill leave you to do the query:
<?php
//Some pseudo data kinda as your receive it from your query
$datafromSql = array(
array('id'=>1,'date'=>1,'month'=>1,'year'=>2012,'theData'=>'This is some data when the user select 1/1/2012'),
array('id'=>2,'date'=>2,'month'=>2,'year'=>2012,'theData'=>'This is some data when the user select 2/2/2012'),
array('id'=>3,'date'=>3,'month'=>3,'year'=>2012,'theData'=>'This is some data when the user select 3/3/2012'),
);
//Super simple API to access the data
if($_SERVER['REQUEST_METHOD']=='POST' && isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'){
header('Content-Type: text/html');
//pseudo code, really you would just format your query result
$return=array();
foreach($datafromSql as $row){
//Select all from array which match select choice
if($row['date']==$_POST['day'] || $row['month']==$_POST['month'] || $row['year']==$_POST['year']){
$return[]=$row['theData'].'<br />';
}
}
//output, with a fancy horizontal rule
echo implode('<hr />',$return);
die;
}?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" charset="utf-8"></script>
<script type="text/javascript">
function update(){
$.post('./<?php echo basename(__FILE__)?>',
{
day: $("#day").val(),
month: $("#month").val(),
year: $("#year").val()
},
function(data) {
$('#result').replaceWith('<div id="result"><h1>The Result:</h1>'+ data +'</div>');
});
}
$(document).ready(function(){
update();
});
</script>
</head>
<body>
<form id="dateform" >
<p>Select Date:
<select size="1" name="day" id="day" onChange="update()">
<?php foreach(range(1,31) as $i){echo '<option value="'.$i.'">'.$i.'</option>';} ?>
</select>
<select size="1" name="month" id="month" onChange="update()">
<?php foreach(range(1,12) as $i){echo '<option value="'.$i.'">'.$i.'</option>';} ?>
</select>
<select size="1" name="year" id="year" onChange="update()">
<?php foreach(range(2008,2012) as $i){echo '<option value="'.$i.'">'.$i.'</option>';} ?>
</select>
</p>
</form>
<p id='result'></p>
</body>
</html>