Results 1 to 4 of 4

Thread: Creating Blank page for "document.writeln"

  1. #1
    Join Date
    May 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Creating Blank page for "document.writeln"

    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: <!--
    7: /* Start of round_total function.
    8: */
    9: function round_total (c) {
    10: var pennies = c * 100;
    11: pennies = Math.round(pennies);
    12: var strPennies = "" + pennies;
    13: var len = strPennies.length;
    14: return parseFloat(strPennies.substring(0, len - 2) + "." + strPennies.substring(len - 2, len));
    15: }
    16: // End of round_total function.
    17:
    18: /* Start of generate_page function. */
    19: function generate_page (form) {
    20: tax = 0.08;
    21: delivery_p = 2.99;
    22: var odate = new Date();
    23: var qty = form.quantity.value;
    24: var product_v = new String(form.product.value);
    25: var total_price = product_v.substr(product_v.indexOf("$") + 1, product_v.length - product_v.indexOf("$"));
    26: var price_without_tax = round_total(qty * total_price);
    27: var ttax = round_total(price_without_tax * tax);
    28: var delivery = round_total(qty * delivery_p);
    29: var total_p = round_total(price_without_tax + ttax + delivery);
    30: document.writeln("Quantity: " + qty + "<br>");
    31: document.writeln("Price: $" + total_price + "<br>");
    32: document.writeln("Tax: $" + ttax + "<br>");
    33: document.writeln("Delivery: $" + delivery + "<br>");
    34: document.writeln("Total: $" + total_p + "<br>");
    35: document.writeln("Order placed on: " + odate.toGMTString());
    36: }
    37: // End of generate_page function.
    38:
    39: -->
    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----

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default What does [action="#"] do?

    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

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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).
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •