[pikaz]

Ok, hoping I chose the right forum. Anyways I want to play around a bit with PHP/ JavaScript only I don't know how to go about doing it.

You see I'm using PHP on my current web page, but the reloading every time you want to do something is horrible. JavaScript’s ability to change the page without reloading is awesome! So combining the two would be great only I know its not an easy task.

For example I would love to run some php code on the click of a button but if I try to run this:

Code:

document.write("<?php echo 'hello!'; ?>");

nothing happens. I realize this is because PHP is server side and therefore it needs to contact the server.... but I want to alter variables using JavaScript and then get them back into my php to save them into a database. Can anyone guide me on how to do this?

If you need more of a demonstration of what I mean I'll draw of a dummy script.


Thanks!,


pikaz

[mab]

What you are describing is AJAX. See this link - http://w3schools.com/ajax/default.asp The tutorial at this link uses .asp on the server side, just change any urls to point to PHP code for the same task.

[TwoD]

[really quick reply]
JavaScript cannot directly execute serverside code, since it runs on the client, which you seem to have a grasp on already. What AJAX (just a fancy acronym for a variety of techniques) does is simple. The script indirectly executes serverside code by requesting a new page, preferably asynchronously and in the background so the client won't have to wait for a page reload etc.

Since the server must know what data it should send back, you need to send some kind of data/instructions. You can either append it to the url as a querystring (a GET request) or make a POST request, like forms do. The instruction telling the server what to do could just as well had been the name of the requested document or placed into a custom header (not guaranteed to reach the server), but grabbing GET or POST data serverside is a bit more convenient.

The reply from the server could be anything from partial (X)HTML, which could be inserted somewhere on the page, or some other form of data which the clientside script knows how to parse. XML is often used for this, which is why it got called Asynchronous JavaScript And XML.

http://en.wikipedia.org/wiki/AJAX
[/really quick reply]

[job0107]

This command alone will do nothing:

document.write("<?php echo 'hello!'; ?>"); 

But when combined with the script tags it will echo "Hello!'
providing you have PHP on the server you are using.

<script>
document.write("<?php echo 'hello!'; ?>");
</script> 

Just as pressing a button in html will output a value from PHP using Javascript
providing you have PHP on the server you are using.

Example:

PHP Code:

<!--  PHP Section -->
<?php>
$message1 = "You pressed the MESSAGE 1 button";
$message2 = "You pressed the MESSAGE 2 button";
$message3 = "You pressed the MESSAGE 3 button";
$message4 = "You pressed the MESSAGE 4 button";
?>

<!-- HTML Section -->
<button onclick="msg1()">MESSAGE 1</button>
<button onclick="msg2()">MESSAGE 2</button>
<button onclick="msg3()">MESSAGE 3</button>
<button onclick="msg4()">MESSAGE 4</button>
<button onclick="alert('<?php echo 'You pressed the MESSAGE 5 button' ?>')">MESSAGE 5</button>

<!-- Javascript Section -->
<script>
function msg1(){alert("<?PHP echo $message1 ?>");}
function msg2(){alert("<?PHP echo $message2 ?>");}
function msg3(){alert("<?PHP echo $message3 ?>");}
function msg4(){alert("<?PHP echo $message4 ?>");}
</script>

You can also use Javascript's Alert command to execute a PHP
function that has the database routine in it.
You can put any PHP code in a PHP function and let Javascript use it.
The only thing you have to remember is to echo something last that
the Alert command can use.

Here is a simple example that uses Javascript's Alert command to open
a file in write mode and write something to the file. Then echo a
message saying "Saving data to the file".

I think with a little practice you will find that you can get javascript
to have PHP do most anything you want it to do.:

PHP Code:

<?php
function create_file()
{
 $a = fopen("test_data_write_.txt", "w");
 fwrite($a, "Hello World.\r\n");
 fclose($a);
 echo "Saving data to the file";}
?>
<script>
alert("<?PHP create_file() ?>");
alert("You just created a file called \"test_data_write.txt\".\nYou could have as easily, written data to a database.");
</script>

[TwoD]

The above examples won't work as you might expect them to.
All the PHP code will execute on the server before the page is sent to the client, meaning all of the PHP calls have all been replaced by whatever text they returned once the JavaScript is able to execute.

<script>
document.write("<?php echo 'hello!'; ?>");
</script> 

will look like

<script>
document.write("hello!");
</script> 

when received by the client, so the browser won't ever know PHP has been involved at all.
The next piece of code would look like this:

<!--  PHP Section -->
<!-- HTML Section -->
<button onclick="msg1()">MESSAGE 1</button>
<button onclick="msg2()">MESSAGE 2</button>
<button onclick="msg3()">MESSAGE 3</button>
<button onclick="msg4()">MESSAGE 4</button>
<button onclick="alert('You pressed the MESSAGE 5 button')">MESSAGE 5</button>
 
<!-- Javascript Section -->
<script>
function msg1(){alert("You pressed the MESSAGE 1 button");}
function msg2(){alert("You pressed the MESSAGE 2 button");}
function msg3(){alert("You pressed the MESSAGE 3 button");}
function msg4(){alert("You pressed the MESSAGE 4 button");}
</script> 

The last example doesn't do much good since it creates the file BEFORE the page is sent to the client and any JavaScript execution can occurr. The file was indeed created and the message saying this will be displayed, but it all happened before the browser knew anything about it.
To the browser, it just looks like this:

<script>
alert("Saving data to the file");
alert("You just created a file called \"test_data_write.txt\".\nYou could have as easily, written data to a database.");
</script> 

[pikaz]

Very interesting way of doing that.. I can't seem to duplicate the results using an external JS file though. That method would work, as long as I can use the JavaScript variables to save to the database. Then, it will indeed still save the changes. But on that note, how secure is this? If I put values into table from PHP and then edit them using JavaScript, can the user easily hack the values and change them, and then submit, causing the browser to pass the changed values. If thats the case how secure is AJAX itself, because all the changes are done via JavaScript right?

[TwoD]

I'm not sure you understood what the code job0107 posted does, but most importantly, what it doesn't. It gives the appearance of PHP code on the server being executed by JavaScript on the client, which is impossible.

The serverside PHP code has already been executed by the server before ever reaching the client. And since the client isn't allowed to see servercode, it's never even sent there, hence the JavaScript cannot call it. The browser wouldn't understand the PHP code anyway since only servers need to do that.

Likewise, the server cannot use the JavaScript code meant for the browser, since it all runs on the client without any open connections. If you want to send a JavaScript variable to PHP, you must either send it as POST or GET data in a HTTP request.

You can ONLY "call" serverside code from the client indirectly, with a HTTP request for a new page. The PHP code will then execute and return something new, which the clientside code should know how to handle.

----
How secure AJAX is depends on the implementation and how it's used.
It's no more or less secure than having a user submitting data via a form or a querystring and then using that data on the server, since that's more or less exactly what happens.

Nothing really changes security-wise by using AJAX, you still have to be careful not to use any data sent by the client without first scanning it for malicious code (esp. when dealing with file or database access). Never trust the client, no matter what the interface on that end looks like, since you can't ever be sure they even used that interface when submitting the data.

[job0107]

This is just a method and a very basic example. I don't think you got the point.

What I said was,
that you could use any PHP command in the PHP FUNCTION that is being called by Javascript.
If you are programming in Javascript and you need the services of PHP,
then this is one way of doing it.
The only rule to doing it this way is to obey the rules of the command.
In this case it's an ALERT command.
You must echo something that ALERT understands as the last command
or else the program will stop functioning. Because you gave it a condition it can't do.

PHP Code:

<?php

function create_file()

{

 $a = fopen("test_data_write_.txt", "w");

 fwrite($a, "Hello World.\r\n");

 fclose($a);

 echo "Saving data to the file";}

?>

<script>

alert("<?PHP create_file() ?>");

alert("You just created a file called \"test_data_write.txt\".\nYou could have as easily, written data to a database.");

</script>

Why do you need to use variables in Javascript. Just let PHP do all the work.
And Javascript has another trick called innerHTML. http://developer.mozilla.org/en/docs...ment.innerHTML

[TwoD]

No, you don't get the point.
JavaScript doesn't call the create_file() function.
It is called on the server BEFORE the page is sent to the client.
The SERVER replaces the function call with the text "Saving data to the file".
The browser and JavaScript interpreter can only see this:

alert("Saving data to the file"); 

The code would do EXACTLY the same thing if you did:

<?php
function create_file()
{
 $a = fopen("test_data_write_.txt", "w");
 fwrite($a, "Hello World.\r\n");
 fclose($a);
 echo "Saving data to the file";}
?>
<?PHP create_file() ?> <!-- This function call is executed and replaced by the returned text as soon as the server encounters it. --> 

No JavaScript can ever call PHP code on the server, because the browser doesn't know the PHP code exists, nor could it ever get access to it.

If you don't believe me, try removing all JavaScript code in that example and it will still work.

[job0107]

Ok so your saying I can't do this:
Because the page has already been loaded and the the connection closed.
Yet this code does exactly what it says it will do.

The page has already loaded and waiting for a request from the user.
When you press a button and call a Javascript function Javascript starts it's session independant from the session your all ready in. When Javascript
requests a PHP function using the ALERT command it creates a data stream
for the ALERT command and on this data stream it sends a request to the PHP interpreter.

PHP Code:

<?php>
$message1 = "You pressed the MESSAGE 1 button";
$message2 = "You pressed the MESSAGE 2 button";
$message3 = "You pressed the MESSAGE 3 button";
$message4 = "You pressed the MESSAGE 4 button";
?>

<!-- HTML Section -->
<button onclick="msg1()">MESSAGE 1</button>
<button onclick="msg2()">MESSAGE 2</button>
<button onclick="msg3()">MESSAGE 3</button>
<button onclick="msg4()">MESSAGE 4</button>
<button onclick="alert('<?php echo 'You pressed the MESSAGE 5 button' ?>')">MESSAGE 5</button>

<!-- Javascript Section -->
<script>
function msg1(){alert("<?PHP echo $message1 ?>");}
function msg2(){alert("<?PHP echo $message2 ?>");}
function msg3(){alert("<?PHP echo $message3 ?>");}
function msg4(){alert("<?PHP echo $message4 ?>");}
</script>