How to display result of php file in an html file

[Reem arfaj]

I need help please. I create html file with 2 tabs. The first tab contains form that takes user input and submit it to php file. I want the result of the php file to be displayed in the second tab.

<b>HTML </b>file
<ul class="nav">
    <li id="TAB0" class="selected"><a ><em>Run function</em></a></li>
    <li id="TAB1"><a ><em>Results</em></a></li>
    <li id="TAB2"><a ><em>Help</em></a></li>
</ul>
<div class="content" id="CONTENT">
    <!--TAB0-->
           <div id = "TAB0" class="active">
            <div class="MainContent">
              <form id='myform' enctype='multipart/form-data' name='myForm'  method='post' action="calculateResults.php">
                      SOME INPUTS HERE
                   <p><input type='button' name="mybut" value='Run'></p>
              </form></div></div>
     <!--TAB1-->
           DISPLAY THE RESULT HERE
     <!--TAB2-->

What is done actually with the above code is display the result in a new window. The php file is already print the output result in some texts and table. I want when I click the button in the first tab to execute .php file and display the result in the second tab not in a new window.

Any help please? Thanks,

[Peter Muster]

I'm pretty sure you cannot do this with a html form post. What you are looking for is called a partial submit. It will only update part of your content but not the whole window. You can use Ajax to achieve this. Other backends like Java EE / Java Server Faces also offer this functionality by default.

If I were you I would probably start with the w3schools Ajax tutorial.

Good luck!

[Reem arfaj]

Do you mean something like that:
<form action="" id="id" method="post" target="_blank" onsubmit="$j('#myinput').val('some value retrieved from the php script')">
<input type="hidden" id="myinput" name="myinput">
</form>
???
If yes, Where to tell execute the php script?

Thanks,

Christian Pflugradt wrote:I'm pretty sure you cannot do this with a html form post. What you are looking for is called a partial submit. It will only update part of your content but not the whole window. You can use Ajax to achieve this. Other backends like Java EE / Java Server Faces also offer this functionality by default.

If I were you I would probably start with the w3schools Ajax tutorial.

Good luck!

[Peter Muster]

Nope, I mean something like this.

The interactive example linked above will post two parameters to a backend (like your php script) which will return an output constructed from these parameters. The output will then be posted in a javascript alert message.

If you want to apply this to your situation you will have to call a javascript function when clicking your button which will post the code to your backend, for example a second php script. This script will have to take the parameters necessary to generate the content you want to see in your second tab. You will then have to accept the reply from your backend in a callback method and populate the respective elements in your html page. The w3schools example does not show this but only outputs the result in an alert. One example how to update your page with an Ajax response is this.

I really recommend you to go through the w3schools tutorial, try to build a small example yourself and then try to apply the necessary elements to your architecture step by step. I can't really give you a solution here and after all the goal here should be to help you getting informed, not copy a solution you don't understand. :-)

[Reem arfaj]

Why the need for javascript? Is it not possible to but the php call in the click of the button instead of send all parameters to the javascript and the javascript send it to the php?

Christian Pflugradt wrote:you will have to call a javascript function when clicking your button which will post the code to your backend, for example a second php script.

[Peter Muster]

I don't understand the question. HTML is for the most part a description language and not a programming language. You use it for displaying content and for submitting HTTP requests but you don't use it for program logic, that's where Javascript comes into play. Javascript is a client side programming language executed by your web browser.

PHP on the other hand is a server side backend language (in your case). Your server does nothing but accept requests and send replies. Replies can be made in HTML style if your server's purpose is to display HTML in a web browser. A web browser understands HTML and Javascript (but not PHP). But with HTML only your web browser can merely display the HTML content or send HTTP replies, if you submit a form. It cannot differentiate between full requests and partial requests. There are only HTTP requests that send the whole content as a request and receive a completely new page as a response. Even if in your response only the content of the second tab is changed, your web browser will always refresh the whole site.

With Javascript (specifically Ajax) you have the option to send asynchronous requests to a server that do not force a page refresh but can run in the background (like on a separate thread). You may also edit content from the DOM (HTML textfields, buttons, tabs, tables etc.) via Javascript at any time. You certainly know that you set a Javascript function as a target for an an action like clicking on HTML button so one way to achieve your desired result would be to call a Javascript function from your button which will send an Ajax request to a web server (for example PHP based) to evaluate some parameters and send a reply which Javascript can again evaluate and write into your target DOM elements to populate your second tab without refreshing the whole page.

To my knowledge with HTML and PHP alone it's simply not possible. I'd advice you take a bit of time to make yourself familiar with how HTML, Javascript, Ajax and web servers are related to each other.

[Reem arfaj]

Christian Pflugradt wrote:

To my knowledge with HTML and PHP alone it's simply not possible. I'd advice you take a bit of time to make yourself familiar with how HTML, Javascript, Ajax and web servers are related to each other.

Many many thanks for this clear clarification. I will go through the second example and try to implement it.
Thanks again.

[Reem arfaj]

Christian Pflugradt wrote:one way to achieve your desired result would be to call a Javascript function from your button which will send an Ajax request to a web server (for example PHP based) to evaluate some parameters and send a reply which Javascript can again evaluate and write into your target DOM elements to populate your second tab without refreshing the whole page.

I am implementing what you explain in above. As a conclusion:
1- I should create javascript function that will be called when I press some button in the form.
2- javascript will send Ajax request to php file.
3- php file will send replay to the javascript.
4- javascript will change the content of the second tab with the result got from the php.

Now, my question is: what about the form in html that collect user input? How can I determine the "action" parameter?

<form id='myform' enctype='multipart/form-data' name='myForm' method='post' action="calculateResults.php">

SOME INPUTS HERE

<p><input type='button' name="mybut" value='Run' onclick="[color=red]jsFunction()"></p>
</form>[/color]

Do you mean that I should remove the form tag and pass all inputs as parameters of jsFunction?

Hope you getting my point.
Thanks a lot

[Reem arfaj]

Reem arfaj wrote:

Christian Pflugradt wrote:one way to achieve your desired result would be to call a Javascript function from your button which will send an Ajax request to a web server (for example PHP based) to evaluate some parameters and send a reply which Javascript can again evaluate and write into your target DOM elements to populate your second tab without refreshing the whole page.

I am implementing what you explain in above. As a conclusion:
1- I should create javascript function that will be called when I press some button in the form.
2- javascript will send Ajax request to php file.
3- php file will send replay to the javascript.
4- javascript will change the content of the second tab with the result got from the php.

Now, my question is: what about the form in html that collect user input? How can I determine the "action" parameter?

<form id='myform' enctype='multipart/form-data' name='myForm' method='post' action="calculateResults.php">

SOME INPUTS HERE

<p><input type='button' name="mybut" value='Run' onclick="[color=red]jsFunction()"></p>
</form>
[/color]
Do you mean that I should remove the form tag and pass all inputs as parameters of jsFunction?

Hope you getting my point.
Thanks a lot

[Reem arfaj]

Reem arfaj wrote:

Reem arfaj wrote:

Christian Pflugradt wrote:one way to achieve your desired result would be to call a Javascript function from your button which will send an Ajax request to a web server (for example PHP based) to evaluate some parameters and send a reply which Javascript can again evaluate and write into your target DOM elements to populate your second tab without refreshing the whole page.

I am implementing what you explain in above. As a conclusion:
1- I should create javascript function that will be called when I press some button in the form.
2- javascript will send Ajax request to php file.
3- php file will send replay to the javascript.
4- javascript will change the content of the second tab with the result got from the php.

Now, my question is: what about the form in html that collect user input? How can I determine the "action" parameter?

<form id='myform' enctype='multipart/form-data' name='myForm' method='post' action="calculateResults.php">

SOME INPUTS HERE

<p><input type='button' name="mybut" value='Run' onclick="jsFunction()"></p>
</form>

Do you mean that I should remove the form tag and pass all inputs as parameters of jsFunction?

Hope you getting my point.
Thanks a lot

[Reem arfaj]

Christian Pflugradt wrote:one way to achieve your desired result would be to call a Javascript function from your button which will send an Ajax request to a web server (for example PHP based) to evaluate some parameters and send a reply which Javascript can again evaluate and write into your target DOM elements to populate your second tab without refreshing the whole page.

Please, ignore my previous three posts. I am implementing what you explain above and it looks like it works but with few issues.

1- First, I delete Form tag from the HTML.
2- Then, I call jsFunction() "javascript function" when clicking "Run" button. onclick="jsFunction();"
3- I create javascript function:

jsFunction()
      {
                var url = "calculateResult.php";
		var params = "querySeq=querySeq&program=program&patientIDarray=patientIDarray&blast_flag=blast_flag";
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() 
		{
			if (xhttp.readyState == 4 && xhttp.status == 200) 
		       {
			document.getElementById("result").innerHTML = xhttp.responseText;     // chage the content of the div in second tab
			}
		};
		xhttp.open("POST", url+"?"+params, true);
		xhttp.send();
}

4-PHP file send replay to the javascript via echo.

Now, I think PHP does not receive the parameters from javascript!

[Bear Bibeault]

1) POST expects parameter encoded in the body, not on the URL.

2) Use jQuery to make all this much much easier.

[Reem arfaj]

Bear Bibeault wrote:1) POST expects parameter encoded in the body, not on the URL.

2) Use jQuery to make all this much much easier.

Could you please explain more!

[Reem arfaj]

Christian Pflugradt wrote:one way to achieve your desired result would be to call a Javascript function from your button which will send an Ajax request to a web server (for example PHP based) to evaluate some parameters and send a reply which Javascript can again evaluate and write into your target DOM elements to populate your second tab without refreshing the whole page.

I implement what you decide me. it seem that it is working but the php receive the parameter from javascript as empty parameter! the action in both javascript and php is "post".