Creating Blank page for "document.writeln" [Archive]

View Full Version : Creating Blank page for "document.writeln"

vmars316

05-15-2010, 04:14 PM

Greetings;

In the following, what causes the js to create a new page,
for writing the "document.writeln" onto:
31: document.writeln("Price: $" + total_price + "<br>");....

Thanks...vmars316

---START--
1: <html>
2:
3: <head>
4: <title>JS input example.</title>
5: <script language="JavaScript">
6: 
40: </script>
41: </head>
42:
43: <body>
44:
45: <form>
46: <p>Product: <select name="product" size="1">
47: <option value="Brown Jacket - Size 35 - $58.99">Brown Pants - Size 31 - $58.99</option>
48: <option value="Blue Shirt - Size 32 - $69.99">Blue Shirt - Size 32 - $69.99</option>
49: </select><br>
50: Quantity: <input type="text" name="quantity" size="18" value="1"><br>
51: <input type="submit" value="Submit" name="submit" onClick="generate_page(this.form)"><input
52: type="reset" value="Reset" name="reset"></p>
53: </form>
54: </body>
55: </html>
---END----

jscheuer1

05-16-2010, 07:49 AM

That's what it does. In fact, it should be doing it at line 30.

In any case, whenever you use document.write or document.writeln, that will happen unless the page is still being parsed. Once the page has loaded, write and writeln both overwrite the existing content. It's not really a new page. It has some of the characteristics of a new page though. It is new content for the window.

What you may want to do is to write to an element like a division by using its innerHTML property or by altering it via DOM level 2 methods. The latter is preferred but is generally more complicated.

You have another thing going on that may cause a problem even if you use the DOM or innerHTML. Your form will probably submit. The way it is currently setup, that would reload the page, losing the calculations just made.

This will work, though some tweaks may be desired. I've altered both the script and the form as well as made a few minor corrections:

<html>

<head>
<title>JS input example.</title>
<script type="text/javascript">
/* Start of round_total function.
*/
function round_total (c) {
var pennies = c * 100;
pennies = Math.round(pennies);
var strPennies = "" + pennies;
var len = strPennies.length;
return parseFloat(strPennies.substring(0, len - 2) + "." + strPennies.substring(len - 2, len));
}
// End of round_total function.

/* Start of generate_page function. */
function generate_page (form) {
tax = 0.08;
delivery_p = 2.99;
var odate = new Date();
var qty = form.quantity.value;
var product_v = new String(form.product.value);
var total_price = product_v.substr(product_v.indexOf("$") + 1, product_v.length - product_v.indexOf("$"));
var price_without_tax = round_total(qty * total_price);
var ttax = round_total(price_without_tax * tax);
var delivery = round_total(qty * delivery_p);
var total_p = round_total(price_without_tax + ttax + delivery);
var resultHTML = "Quantity: " + qty + "<br>\n" +
"Price: $" + total_price + "<br>\n" +
"Tax: $" + ttax + "<br>\n" +
"Delivery: $" + delivery + "<br>\n" +
"Total: $" + total_p + "<br>\n" +
"Order placed on: " + odate.toGMTString();
document.getElementById('result').innerHTML = resultHTML;
}
// End of generate_page function.

</script>
</head>

<body>

<form action="#" onsubmit="generate_page(this); return false;">
<p>Product: <select name="product" size="1">
<option value="Brown Jacket - Size 35 - $58.99">Brown Pants - Size 31 - $58.99</option>
<option value="Blue Shirt - Size 32 - $69.99">Blue Shirt - Size 32 - $69.99</option>
</select><br>
Quantity: <input type="text" name="quantity" size="18" value="1"><br>
<input type="submit" value="Submit" name="submit"><input
type="reset" value="Reset" name="reset"></p>
</form>
<div id="result">

</div>
</body>
</html>

If you still want to overwrite the page, but only do so once:

<html>

<head>
<title>JS input example.</title>
<script type="text/javascript">
/* Start of round_total function.
*/
function round_total (c) {
var pennies = c * 100;
pennies = Math.round(pennies);
var strPennies = "" + pennies;
var len = strPennies.length;
return parseFloat(strPennies.substring(0, len - 2) + "." + strPennies.substring(len - 2, len));
}
// End of round_total function.

/* Start of generate_page function. */
function generate_page (form) {
tax = 0.08;
delivery_p = 2.99;
var odate = new Date();
var qty = form.quantity.value;
var product_v = new String(form.product.value);
var total_price = product_v.substr(product_v.indexOf("$") + 1, product_v.length - product_v.indexOf("$"));
var price_without_tax = round_total(qty * total_price);
var ttax = round_total(price_without_tax * tax);
var delivery = round_total(qty * delivery_p);
var total_p = round_total(price_without_tax + ttax + delivery);
var resultHTML = "Quantity: " + qty + "<br>\n" +
"Price: $" + total_price + "<br>\n" +
"Tax: $" + ttax + "<br>\n" +
"Delivery: $" + delivery + "<br>\n" +
"Total: $" + total_p + "<br>\n" +
"Order placed on: " + odate.toGMTString();
document.write(resultHTML);
}
// End of generate_page function.

</script>
</head>

<body>

<form action="#" onsubmit="generate_page(this); return false;">
<p>Product: <select name="product" size="1">
<option value="Brown Jacket - Size 35 - $58.99">Brown Pants - Size 31 - $58.99</option>
<option value="Blue Shirt - Size 32 - $69.99">Blue Shirt - Size 32 - $69.99</option>
</select><br>
Quantity: <input type="text" name="quantity" size="18" value="1"><br>
<input type="submit" value="Submit" name="submit"><input
type="reset" value="Reset" name="reset"></p>
</form>
</body>
</html>

vmars316

05-17-2010, 03:55 AM

yumpin' yimminy, that's good stuff:
Thank you very much!

I liked method [#2] the best, keep everything on one page.
The only thing I haven't been able to read up on is the [action="#"].
What does [action="#"] do?
Thanks...vmars316

djr33

05-17-2010, 04:27 AM

The action is the page that the form is submitted to.
If you don't see a full URL there (like http://example.com/page.htm), then it's a relative link. You use the relative path from your current location.
In this case, it becomes:
http://example.com/page.htm#

And the # at the end of a URL doesn't actually do anything-- it's a way to avoid having a true action (and going to a different page).

Technically the # is used for 'anchors' on a page, where you have:
<a name="anchor">
....
<a href="#anchor>Click</a>
And by clicking the link your page will jump to the section marked by the "anchor" named "anchor". [Note: links are technically a type of anchor, but not in this sense-- but that's what 'a' stands for.]

So anyway, this method is used to have a Javascript only response to the form: if Javascript is disabled, the page will just jump to the 'blank' anchor, meaning it won't do anything.

In fact, since jumping to an anchor is done WHILE on a page and without reloading it, this method will even avoid reloading the page (to the same page).