Connecting Tech Pros Worldwide Forums | Help | Site Map

use javascript to build web page?

Newbie
 
Join Date: Jun 2009
Posts: 24
#1: Jun 9 '09
Hi all,

I have the following in my web form

<form name="enrollForm" method="post" onsubmit="return checkForm();" action="enroll.php" id="enrollForm">

I run some php code inside "enroll.php" and display feedback messages for the user when processing is done.

At the moment the messages are shown as text on a blank screen. I like to display the messages on screen nicely formatted like a proper web page, eg in a box with a colour background and a link back to the previous page.

I have seen on the net some one describing how to use Javascript to build a web page on the fly but when I try it I keep getting the error "Error: member not found" in the code below
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <script>
  6.     var body = document.createElement("body");
  7.     document.body = body;
  8. </script>
  9. </body>
  10. </html>
Do I need to install some software first? Can someone point me in the right direction?

thanks
Denis

Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,648
#2: Jun 9 '09

re: use javascript to build web page?


why so complicated? you can use PHP to output the HTML code. besides that, if javascript is disabled, you'll see nothing at all.
Atli's Avatar
Moderator
 
Join Date: Nov 2006
Location: Iceland
Posts: 3,748
#3: Jun 9 '09

re: use javascript to build web page?


Yea, why don't you just have PHP output the HTML?
(That is what it is designed to do, after all)

But, on the topic of building pages with Javascript...

Why are you trying to create a new body element?
You have a perfectly good body element already, ready to be used.

You should be adding to the body element, not trying to replace it.
Like:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.     <head>
  4.         <title>Test</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <script type="text/javascript">
  7.         window.onload = function() {
  8.             // Create a new DIV element
  9.             var newDiv = document.createElement('div');
  10.  
  11.             // Put some text inside the new element
  12.             newDiv.innerHTML = 'Hello, world!';
  13.  
  14.             // Set the background and font colors
  15.             newDiv.style.backgroundColor = "#550000";
  16.             newDiv.style.color = "#FFFFFF";
  17.  
  18.             // Add the new DIV to the body
  19.             document.body.appendChild(newDiv);
  20.         }
  21.         </script>
  22.     </head>
  23.     <body>
  24.     </body>
  25. </html>
Newbie
 
Join Date: Jun 2009
Posts: 24
#4: Jun 10 '09

re: use javascript to build web page?


Thanks a lot! Atli's sample is a good start. Is there an online tutorial?

I am very new to javascript and php.

What I was getting at before was I had a run time error "Error: member not found" where as when I ran Atli's code there was no error. What's missing in my code? The type="text/javascript" bit?

Now another question is where should I place the php and script code? Only after the php code to successfully update the database, for example, that I need to build and tailor the feedback for individual users, like "Hello Mr xxx. all done!"

Any further clues?

thanks
Denis
Atli's Avatar
Moderator
 
Join Date: Nov 2006
Location: Iceland
Posts: 3,748
#5: Jun 10 '09

re: use javascript to build web page?


There are lot of tutorials online.
w3schools.com has excellent tutorials on both PHP and Javascript.

Quote:

Originally Posted by dragon52 View Post

What I was getting at before was I had a run time error "Error: member not found" where as when I ran Atli's code there was no error. What's missing in my code? The type="text/javascript" bit?

There are several problems in that code.

The one causing the error was most likely that you were trying to use the body element before it was created.
This behavior is actually different in different browsers, but it seems that if you try to assign something to document.body, IE gives you that error.
Firefox doesn't complain tho.

There is also the fact that you are trying to re-create the body tag, which is generally not a very good idea. Use the existing one if you must, but I wouldn't try to create a new one.

You also forgot the type attribute on the <script> tag.
This tells the browser what kind of script the tag contains. Most browsers default to the latest Javascript version, but it is best not to assume that.

(Hint: Don't use IE! Use a standard supporting browser, like Firefox. Test your code on that and then when your done, make sure it works in IE to.)
Quote:
Now another question is where should I place the php and script code? Only after the php code to successfully update the database, for example, that I need to build and tailor the feedback for individual users, like "Hello Mr xxx. all done!"
You place PHP code... wherever it is needed.
Keep in mind that PHP is not a part of the website. It is what creates the website.

PHP speaks HTML. It generates the HTML on the server and then sends it to the browser. The browser never knows PHP had anything to do with creating the HTML. So it doesn't really matter where your PHP code is, as long as it generates valid HTML.

Like, if you put this into a PHP page:
Expand|Select|Wrap|Line Numbers
  1. <?php $username = 'John Doe'; ?>
  2. <html>
  3.   <head><title>Test</title></head>
  4.   <body>
  5.     <?php echo "Hello, {$username}.";
  6.   </body>
  7. </html>
And then visited that PHP page in your browser, all your browser would get is:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.   <head><title>Test</title></head>
  3.   <body>
  4.     Hello, John Doe.
  5.   </body>
  6. </html>
The browser never knows PHP had anything to do with putting the name there.
It just displays the HTML, ignorant of it's origins.


Javascript, on the other hand, is a part of the website.
It is executed by the browser, long after the PHP code has been executed.

You should always try to put your Javascript code inside the <header> tag, like I did, or better yet, into external Javascript files.
For example:
Expand|Select|Wrap|Line Numbers
  1. /**
  2.  * File: script.js
  3.  */
  4. function SayHello() {
  5.   alert("Hello, World!");
  6. }
Expand|Select|Wrap|Line Numbers
  1. <!--
  2.   - File: index.html
  3.   -->
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html>
  6.   <head>
  7.     <title>External Javascript Test</title>
  8.     <script type="text/javascript" src="script.js"></script>
  9.   </head>
  10.   <body>
  11.     <button onclick="SayHello();">Say Hello</button>
  12.   </body>
  13. </html>
Clicking the button would then bring up a alert window with the message "Hello, World!"
Newbie
 
Join Date: Jun 2009
Posts: 24
#6: Jun 10 '09

re: use javascript to build web page?


Atli, thanks for taking the time to help me.

I haven't explained myself very well.

Here is the problem I need to resolve (code simplified)
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.   <script type="text/javascript">
  4.     window.onload = function(){
  5.     .
  6.     newDiv.innerHTML = 'Thanks $_POST[FamilyName]';
  7.     .
  8.     }
  9.   </script>
  10. </head>
  11. <body>
  12.   <?php
  13.     .
  14.     main processing code
  15.     .
  16.     if (mail($to,$subj,$body)
  17.     {
  18.       echo("Thanks Mr. $_POST[FamilyName], all done";
  19.     }
  20.     else
  21.     {
  22.       echo("Mr. $_POST[FamilyName], can't send email";
  23.     }
  24.   ?>
  25. </body>
  26. </html>
I build the web page in the script section at the top and I do my processing in the php section at the bottom. Can you see that not only I need to tailor the message to each user but also the result of the php processing. How do I put the 2 different php echo() lines to the top where the web page is built.

The above produces the result

Mr. T, all done
Thanks $_POST[FamilyName]

Only the 2nd line is formatted with background colour as in your sample code (here user name not displayed correctly).

Denis
Atli's Avatar
Moderator
 
Join Date: Nov 2006
Location: Iceland
Posts: 3,748
#7: Jun 10 '09

re: use javascript to build web page?


There are two ways to deal with that.

First, let me point out that Javascript is executed client-side, much like the HTML, whereas PHP is servers-side.

Which means that your Javascript can not directly access PHP values. They simply don't exist once the Javascript is executed by the browser.
But you can use PHP to build Javascript code. (Like it does with HTML.)

Like, in your code, you could do:
Expand|Select|Wrap|Line Numbers
  1. newDiv.innerHTML = 'Thanks <?php echo $_POST[FamilyName]; ?>';
Which would send your browser this:
Expand|Select|Wrap|Line Numbers
  1. newDiv.innerHTML = 'Thanks Mr .T';
But...
I wouldn't use Javascript in this case.
Javascript can be ignored by your browser, so relying on for critical functionality, like building the page, is never a good idea.

You could simply do:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head><title>whatever</title></head>
  3. <body>
  4. <?php
  5.     // ... Mail processing code
  6.  
  7.     echo "<p>";
  8.     if($mail(...)) {
  9.         echo("Thanks Mr. $_POST[FamilyName], all done";
  10.     }
  11.     else {
  12.         echo("Mr. $_POST[FamilyName], can't send email";
  13.     }
  14.     echo "</p>";
  15.     echo "<p>Thanks, ", $_POST[FamilyName], "</p>";
  16. ?>
  17. </body>
  18. </html>
No Javascript required.

Unless there is a specific reason you need to use Javascript?
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,648
#8: Jun 10 '09

re: use javascript to build web page?


Quote:

Originally Posted by dragon52 View Post

Expand|Select|Wrap|Line Numbers
  1. echo("Mr. $_POST[FamilyName], can't send email";

this should rather be (better coding practice)
Expand|Select|Wrap|Line Numbers
  1. echo "Mr. {$_POST['FamilyName']}, can't send email";
  2. # or
  3. echo "Mr. ",  $_POST['FamilyName'], ", can't send email";
note that $_POST[FamilyName] would give you an error notice (undefined constant)

Quote:

Originally Posted by dragon52 View Post

Expand|Select|Wrap|Line Numbers
  1. 'Thanks $_POST[FamilyName]'

variables inside single quotaion marks ( ' ) are not parsed (i.e. it is printed as is). see PHP – Strings
Newbie
 
Join Date: Jun 2009
Posts: 24
#9: Jun 13 '09

re: use javascript to build web page?


Thanks a lot. You guys have been very helpful.

I have finally finished want I needed to do.

Denis
Reply