Just echo the javascript out inside the if function
<form name="testForm" id="testForm" method="POST" >
<input type="submit" name="btn" value="submit" autofocus onclick="return true;"/>
</form>
<?php
if(isset($_POST['btn'])){
echo "
<script type=\"text/javascript\">
var e = document.getElementById('testForm'); e.action='test.php'; e.submit();
</script>
";
}
?>
Answer from keto23 on Stack OverflowJust echo the javascript out inside the if function
<form name="testForm" id="testForm" method="POST" >
<input type="submit" name="btn" value="submit" autofocus onclick="return true;"/>
</form>
<?php
if(isset($_POST['btn'])){
echo "
<script type=\"text/javascript\">
var e = document.getElementById('testForm'); e.action='test.php'; e.submit();
</script>
";
}
?>
Lately I've come across yet another way of putting JS code inside PHP code. It involves Heredoc PHP syntax. I hope it'll be helpful for someone.
<?php
$script = <<< JS
$(function() {
// js code goes here
});
JS;
?>
After closing the heredoc construction the $script variable contains your JS code that can be used like this:
<script><?= $script ?></script>
The profit of using this way is that modern IDEs recognize JS code inside Heredoc and highlight it correctly unlike using strings. And you're still able to use PHP variables inside of JS code.
There are actually several approaches to do this. Some require more overhead than others, and some are considered better than others.
In no particular order:
- Use AJAX to get the data you need from the server.
- Echo the data into the page somewhere, and use JavaScript to get the information from the DOM.
- Echo the data directly to JavaScript.
In this post, we'll examine each of the above methods, and see the pros and cons of each, as well as how to implement them.
1. Use AJAX to get the data you need from the server
This method is considered the best, because your server side and client side scripts are completely separate.
Pros
- Better separation between layers - If tomorrow you stop using PHP, and want to move to a servlet, a REST API, or some other service, you don't have to change much of the JavaScript code.
- More readable - JavaScript is JavaScript, PHP is PHP. Without mixing the two, you get more readable code on both languages.
- Allows for asynchronous data transfer - Getting the information from PHP might be time/resources expensive. Sometimes you just don't want to wait for the information, load the page, and have the information reach whenever.
- Data is not directly found on the markup - This means that your markup is kept clean of any additional data, and only JavaScript sees it.
Cons
- Latency - AJAX creates an HTTP request, and HTTP requests are carried over network and have network latencies.
- State - Data fetched via a separate HTTP request won't include any information from the HTTP request that fetched the HTML document. You may need this information (e.g., if the HTML document is generated in response to a form submission) and, if you do, will have to transfer it across somehow. If you have ruled out embedding the data in the page (which you have if you are using this technique) then that limits you to cookies/sessions which may be subject to race conditions.
Implementation Example
With AJAX, you need two pages, one is where PHP generates the output, and the second is where JavaScript gets that output:
get-data.php
/* Do some operation here, like talk to the database, the file-session
* The world beyond, limbo, the city of shimmers, and Canada.
*
* AJAX generally uses strings, but you can output JSON, HTML and XML as well.
* It all depends on the Content-type header that you send with your AJAX
* request.
*/
// In the end, you need to `echo` the result.
// All data should be run through the built-in json_encode() function.
// You can encode any value in PHP, arrays, strings, and objects as JSON.
echo json_encode(42);
index.php (or whatever the actual page is named like)
<script>
fetch("get-data.php")
.then((response) => {
// Before parsing (i.e. decoding) the JSON data,
// check for any errors.
if(!response.ok){
// In case of an error, throw.
throw new Error("Something went wrong!");
}
// Parse the JSON data.
return response.json();
})
.then((data) => {
// This is where you handle what to do with the response.
// Will alert: 42
alert(data);
})
.catch((error) => {
// This is where you handle errors.
})
</script>
The above combination of the two files will alert 42 when the file finishes loading.
Some more reading material
- Using the Fetch API
- How do I return the response from an asynchronous call?
2. Echo the data into the page somewhere, and use JavaScript to get the information from the DOM
This method is less preferable to AJAX, but it still has its advantages. It's still relatively separated between PHP and JavaScript in a sense that there is no PHP directly in the JavaScript.
Pros
- Fast - DOM operations are often quick, and you can store and access a lot of data relatively quickly.
Cons
- Potentially Unsemantic Markup - Usually, what happens is that you use some sort of
<input type=hidden>to store the information, because it's easier to get the information out ofinputNode.value, but doing so means that you have a meaningless element in your HTML. HTML has the<meta>element for data about the document, and HTML 5 introducesdata-*attributes for data specifically for reading with JavaScript that can be associated with particular elements. - Dirties up the Source - Data that PHP generates is outputted directly to the HTML source, meaning that you get a bigger and less focused HTML source.
- Harder to get structured data - Structured data will have to be valid HTML, otherwise you'll have to escape and convert strings yourself.
- Tightly couples PHP to your data logic - Because PHP is used in presentation, you can't separate the two cleanly.
Implementation Example
With this, the idea is to create some sort of element which will not be displayed to the user, but is visible to JavaScript.
index.php
<div id="dom-target" style="display: none;">
<?php
// Again, do some operation, get the output.
$output = "42";
// You have to escape because the result
// will not be valid HTML otherwise.
echo htmlspecialchars($output);
?>
</div>
<script>
const targetDiv = document.getElementById("dom-target")
const myData = targetDiv.textContent
</script>
3. Echo the data directly to JavaScript
This is probably the easiest to understand.
Pros
- Very easily implemented - It takes very little to implement this, and understand.
- Does not dirty source - Variables are outputted directly to JavaScript, so the DOM is not affected.
Cons
- Tightly couples PHP to your data logic - Because PHP is used in presentation, you can't separate the two cleanly.
Implementation Example
Implementation is relatively straightforward:
<script>
const myData = <?= json_encode("42", JSON_HEX_TAG); ?>
</script>
I usually use data-* attributes in HTML.
<div
class="service-container"
data-service="<?= htmlspecialchars($myService->getValue()) ?>"
>
</div>
<script>
$(document).ready(function() {
$('.service-container').each(function() {
var container = $(this);
var service = container.data('service');
// Var "service" now contains the value of $myService->getValue();
});
});
</script>
This example uses jQuery, but it can be adapted for another library or vanilla JavaScript.
You can read more about the dataset property here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset
You can't run PHP code with Javascript. When the user recieves the page, the server will have evaluated and run all PHP code, and taken it out. So for example, this will work:
alert( <?php echo "\"Hello\""; ?> );
Because server will have evaluated it to this:
alert("Hello");
However, you can't perform any operations in PHP with it.
This:
function Inc()
{
<?php
$num = 2;
echo $num;
?>
}
Will simply have been evaluated to this:
function Inc()
{
2
}
If you wan't to call a PHP script, you'll have to call a different page which returns a value from a set of parameters.
This, for example, will work:
script.php
$num = $_POST["num"];
echo $num * 2;
Javascript(jQuery) (on another page):
$.post('script.php', { num: 5 }, function(result) {
alert(result);
});
This should alert 10.
Good luck!
Edit: Just incrementing a number on the page can be done easily in jQuery like this: http://jsfiddle.net/puVPc/
I think you're confusing server code with client code.
JavaScript runs on the client after it has received data from the server (like a webpage).
PHP runs on the server before it sends the data.
So there are two ways with interacting with JavaScript with php.
Like above, you can generate javascript with php in the same fashion you generate HTML with php.
Or you can use an AJAX request from javascript to interact with the server. The server can respond with data and the javascript can receive that and do something with it.
I'd recommend going back to the basics and studying how HTTP works in the server-client relationship. Then study the concept of server side languages and client side languages.
Then take a tutorial with ajax, and you will start getting the concept.
Good luck, google is your friend.
I'm very new to PHP, and I haven't entirely understood how it works yet. I tried searching if you could run JS in PHP, but I got a no. When I searched for the other part, I got nothing. If someone could help me understand what I want to know, let me know.