onClick, create php variable and echo out

Smudly

I have a form, that when the user click Submit, I need a php variable to be echoed to the page.
This is for an upload page. So when they are waiting for the file to upload, it will say "Uploading..." until the upload is complete.

All I know so far is I need to create a javascript function and include it in the submit button. This is all I have so far in the submit button tag:
onClick="Transferring();"

Now I need to figure out the code to include in this function.

Any ideas?

Krik

onClick, create php variable and echo out

Your title is not possible, as php can only run on the web server. The average computer can not process php.

However there is a couple things you could do. A real simpl one is to just have your function place a line of text into an existing element (including hidden elements) on your page using the innerHTML method.

Or for a bit fancier option create a <div> in your function. Then apply CSS to that div to set its position, top, float, padding, margin, borders, background, z-index, ect. And then place the text you want in the div, with some style. Then insert the div into the body with "document.body.innerHTML" to make the it look like its floating above your content.

In case you have never done the second option you will want to brush up on your CSS as while you are using javascript it will be CSS that does the real work.

Smudly

Hey thanks for the nice idea.

So I decided I just need it to be very simple. My javascript function will be something like this:

function transferring() {
document.write("Hello World!");
}

And my submit button will be something like this:

So when I click the submit button, the message will display. The problem I'm having is the "Hello World!" is displayed on a new blank page. How do I just display the text on the same page? The form's action is the same page the form is on.

Krik

It is better to use the onsubmit event in the <form> tag just add the "return true;" line to the end of your function.

Smudly

Alright, I'm now using the onSubmit, and returning true.

But once I hit submit, "Hello World!" shows up on the top left of a new page that is completely white.

Instead of the page doing this, how can I have this message display underneath the submit button?

johanafm

Smudly;10964775 wrote:
But once I hit submit, "Hello World!" shows up on the top left of a new page that is completely white.

Because your call to document.write creates a new document, which obviously has to replace the existing one.

Smudly;10964775 wrote:
Instead of the page doing this, how can I have this message display underneath the submit button?

As Krik suggested, you could use innerHTML. But it has its limits, and behviour between browsers differ which is why I avoid it, and would rather do something like

var d = document;
// create a new div element and append a new text node to it
var div = d.createElement('div');
div.appendChild(d.createTextNode('Hello World'));

// get the submit button element
var submit = d.getElementById('submit_btn');

// You wanted the text to appear below the submit button
if (submit == submit.parentNode.lastChild) {
	submit.parentNode.appendChild(div);
}
else {
	submit.parentNode.insertBefore(div, submit.nextSibling);
}

But if all you have is static content, then you might as well

<input type="button" />
<div style="display: none;" id="hello_world">
	Hello World!
</div>

var div = document.getElementById('hello_world');
if (div) {
    div.style.display = 'block';
}