I've JavaScript and I want to run a include script in the JavaScript . I tried the following statement:

outputEl.innerHTML = '<?php include "./change/ud1.php";?>';

When I run the script I get no response.

Does someone know why I didn't get any response and how I can fix it?

I tried to replace the PHP include with an html iframe. That worked but that is not the best solution for me.

I've JavaScript and I want to run a include script in the JavaScript . I tried the following statement:

outputEl.innerHTML = '<?php include "./change/ud1.php";?>';

When I run the script I get no response.

Does someone know why I didn't get any response and how I can fix it?

I tried to replace the PHP include with an html iframe. That worked but that is not the best solution for me.

• javascript
• php

• What do you wanna include in innerHTML? HTML response? – Dolly Aswin Commented Jul 2, 2017 at 7:08
• I found some scripts on the internet and they where all using innerHTML – John Commented Jul 2, 2017 at 7:11
• You need to load it using window.location = 'page' The ref may help you – Murad Hasan Commented Jul 2, 2017 at 7:11
• what is outputEl ? some id ?? – Minar_Mnr Commented Jul 2, 2017 at 7:13
• 3 This question is too broad, as it can be understood in several ways. Do you want to include PHP code and interpret and run it through JS? Or do you expect to get HTML back from that PHP file? (Then why @include it?) Depending on what are you trying to do, you may need to learn something about AJAX or PHP interpreters in JavaScript. – feeela Commented Jul 11, 2017 at 14:10

13 Answers 13

No Need to use javascript in this case

you can use response directly where you want

<div id="outputEl"><?php include "./change/ud1.php";?></div>

You can't run php inside a .js file. As I understand it, you're going to need to fetch the content of the php file from your js file.

Here's a bare-bones implementation.

var xhr = new XMLHttpRequest();

xhr.onload = function () {
    outputEl.innerHTML = this.response;
};

xhr.open('GET', './change/ud1.php', true); // you may need to correct the url to be relative to the js file
xhr.send();

It might be easier and more robust to use jquery, in which case (once you've included the jquery library) you can just use something like this

$(outputEl).load("change/ud1.php");

• php is a server-side language.
• JavaScript is client side language.

so php can only execute on your server and JavaScript executes on user's browser.

there is no way in which php code going to run in JavaScript (browser). so you need to use ajax like this.

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // server sent data successfully in this.responseText variable
        document.getElementById("output1").innerHTML = this.responseText;
    }
};

//Request data from a server
xhttp.open("GET", "path/to/php/include-script.php", true);
xhttp.send();

Learn more about ajax here.

You can also use jquery to load the content of the php file in your specified html element.

 $.get("path/to/yourfile.php", function(data, status){  
    outputEl.innerHTML = data;
});

Simply Use

<script type="text/javascript" src="filename.php"></script>

Also pass this header("Content-type: text/javascript"); on top of the php file.

This is not right approach. You should take html into a php variable and then use that PHP variable into JavaScript. If you are using MVC then its quite easy. I posted answer without using MVC :

$html = file_get_contents('path/to/YOUR/FILE.php');

In Javascript

var html = '<?php echo $html; ?>';

make single quotes to double quotes and try

You can't do this directly. If you want to replace the contents in this manner you have following two options

1. send AJAX request to that file and then that file will send the entire html as the data parameter of success function and then you can use that data wherever you want.

2. Or else you have to redirect to that page and you want some data to be sent to that file, then you can have as a get request.

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   
   <script>    
       $.ajax({
          type: "POST",
          url: "<?php include "./change/ud1.php"; ?>",  //ensure URL is correct
          data: { }, //send some data if you want to that file or else remove this line
          dataType: "html",
          success: function(data) {
              if($.trim(data)) {
                   $('#outputEl').html(data);
              } else {
                   alert("Something went wrong!!");
              }
          }, error: function() {
              alert("ERROR!");
          }
      });
   </script>

And you can perform step 2 as

<script>
    window.location.href = "./change/ud1.php";  //And pass any parameters to that file if you wish as a GET request
</script>

Let me know if you require any further help

Two ways :

First:

 <script>
      document.write('<?php echo include_once "./change/ud1.php";?>');
   </script>

Second:

<script type="text/javascript" src="./change/ud1.php"></script>

Try this

$("#output1").load("change/ud1.php");

The PHP code is rendered on the server, with Javascript you are on the client and you can not render PHP if you are not on the server.

You can't do this because PHP code render before JavaScript. There are many alternative ways to do this:

if outputEl is a ID of a div element:

1- Without jQuery/JavaScript

<div id="outputEl"><?php include "./change/ud1.php";?></div>

2- Use jQuery load function

$("#outputEl").load('./change/ud1.php');

3- With JavaScript function

window.onload = function() {
  if (XMLHttpRequest)
    var x = new XMLHttpRequest();
  else
    var x = new ActiveXObject("Microsoft.XMLHTTP");
  x.open("GET", "./change/ud1.php", true);
  x.send();
  x.onreadystatechange = function() {
    if (x.readyState == 4) {
      if (x.status == 200)
        outputEl.innerHTML = x.responseText;
      else
        outputEl.innerHTML = "Error loading document";
    }
  }
}

this will work also. put this code in your .php, you can put script in your .php

<script type="text/javascript">
   outputEl.innerHTML = "<?php include './change/ud1.php';?>";
</script>