use javascript to build web page?

**Dormilich** · Jun 9 '09, 02:18 PM

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** · Jun 9 '09, 02:41 PM

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:
[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
window.onload = function() {
// Create a new DIV element
var newDiv = document.create Element('div');

// Put some text inside the new element
newDiv.innerHTM L = 'Hello, world!';

// Set the background and font colors
newDiv.style.ba ckgroundColor = "#550000";
newDiv.style.co lor = "#FFFFFF";

// Add the new DIV to the body
document.body.a ppendChild(newD iv);
}
</script>
</head>
<body>
</body>
</html>[/code]

**dragon52** · Jun 10 '09, 01:07 AM

good example

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** · Jun 10 '09, 02:19 AM

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

Originally posted by dragon52

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.)

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:
[code=php]
<?php $username = 'John Doe'; ?>
<html>
<head><title>Te st</title></head>
<body>
<?php echo "Hello, {$username}.";
</body>
</html>[/code]
And then visited that PHP page in your browser, all your browser would get is:
[code=html]
<html>
<head><title>Te st</title></head>
<body>
Hello, John Doe.
</body>
</html>[/code]
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:
[code=javascript]
/**
* File: script.js
*/
function SayHello() {
alert("Hello, World!");
}[/code]
[code=html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Extern al Javascript Test</title>
<script type="text/javascript" src="script.js" ></script>
</head>
<body>
<button onclick="SayHel lo();">Say Hello</button>
</body>
</html>[/code]
Clicking the button would then bring up a alert window with the message "Hello, World!"

**dragon52** · Jun 10 '09, 06:27 AM

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)

Code:

<html>
<head>
  <script type="text/javascript">
    window.onload = function(){
    .
    newDiv.innerHTML = 'Thanks $_POST[FamilyName]';
    .
    }
  </script>
</head>
<body>
  <?php
    .
    main processing code
    .
    if (mail($to,$subj,$body)
    {
      echo("Thanks Mr. $_POST[FamilyName], all done";
    }
    else
    {
      echo("Mr. $_POST[FamilyName], can't send email";
    }
  ?>
</body>
</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** · Jun 10 '09, 09:34 AM

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:
[code=html]newDiv.innerHTM L = 'Thanks <?php echo $_POST[FamilyName]; ?>';[/code]
Which would send your browser this:
[code=html]newDiv.innerHTM L = 'Thanks Mr .T';[/code]

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:
[code=php]
<html>
<head><title>wh atever</title></head>
<body>
<?php
// ... Mail processing code

echo "<p>";
if($mail(...)) {
echo("Thanks Mr. $_POST[FamilyName], all done";
}
else {
echo("Mr. $_POST[FamilyName], can't send email";
}
echo "</p>";
echo "<p>Thanks, ", $_POST[FamilyName], "</p>";
?>
</body>
</html>[/code]
No Javascript required.

Unless there is a specific reason you need to use Javascript?

**Dormilich** · Jun 10 '09, 11:22 AM

Originally posted by dragon52

Code:

echo("Mr. $_POST[FamilyName], can't send email";

this should rather be (better coding practice)

Code:

echo "Mr. [b]{$_POST['FamilyName']}[/b], can't send email";
# or
echo "Mr. [B]",  $_POST['FamilyName'], "[/B], can't send email";

note that $_POST[FamilyName] would give you an error notice (undefined constant)

Originally posted by dragon52

Code:

'Thanks $_POST[FamilyName]'

variables inside single quotaion marks ( ' ) are not parsed (i.e. it is printed as is). see PHP – Strings

**dragon52** · Jun 13 '09, 01:46 AM

thanks

Thanks a lot. You guys have been very helpful.

I have finally finished want I needed to do.

Denis

use javascript to build web page?

use javascript to build web page?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment