Help Needed With Displaying Table

HiEverybody · 07-14-2004, 08:27 AM

Hi
I want the table created by the functions (fill_table etc..) to display below this part of the code

Code:

<SCRIPT language="Javascript" type="text/javascript">
function userprompt()
{
 var Name = prompt("Enter your name:");
 var Id = prompt("Enter your customer ID:");  
 var Phone = prompt("Enter your phone number:");
    var Space = "";
document.write("<h1>Easy Credit Order Form<\/h1>"+ Space +"<br>");
document.write("Fax this form to Easy Credit at 555-3423."+ Space +"<br>");
document.write("Your Name: " + Name +"<br>");
document.write("Your Customer ID: "+ Id +"<br>");
document.write("Your Phone Number: "+ Phone +"<br>");

}
</SCRIPT>

And above this part of the code:

Code:

Click <a href = "cart.html"> here </a> to return to the shopping cart page

here is the complete code:

Code:

<HTML>
   <HEAD>
      <TITLE>
         Easy Credit Order Form
      </TITLE>
<SCRIPT language="Javascript" type="text/javascript">
var item_name = new Array();
item_name[0] = "T-Shirt - Small";
item_name[1] = "T-Shirt - Medium";
item_name[2] = "T-Shirt - Large";
item_name[3] = "Lime Green Cap";
item_name[4] = "Orange Cap";
item_name[5] = "Teddy Bear";

var item_price = new Array();
item_price[0] = 29.50;
item_price[1] = 34.50;
item_price[2] = 39.50;
item_price[3] = 18.75;
item_price[4] = 18.75;
item_price[5] = 66.50;

var item_number = [];

   if(document.cookie) process_cookie()

   function process_cookie() {
    var whole_cookie = unescape(document.cookie);
    var drop_name = whole_cookie.split("=");
    if(drop_name[1]) {
     item_number = drop_name[1].split("xxx");
     item_number.pop();
    }
   }

   function kill_cookies() {
    var kill_date = new Date("January 1, 1970");
    document.cookie = "stuff=stub;expires=" + kill_date.toGMTString();
   }

   function remove(which) {
    item_number.splice(which, 1);
    if(item_number.length) document.cookie = "stuff=" + item_number.join("xxx") + "xxx";
    else kill_cookies();
    process_cookie();
    fill_table();
   }

   function remove_table() {
    var elem;
    if(elem = document.getElementById("cart")) {
     while(elem.childNodes.length) {
      elem.removeChild(elem.childNodes[0]);
     }
     elem.parentNode.removeChild(elem);
    }
   }

   function fill_table() {
    remove_table();
    var cart = document.createElement("table");
    cart.id = "cart";
    cart.setAttribute("width", "70%");
    cart.setAttribute("border", 1);    
    var price_total = 0;
    for(var i = 0; i < item_number.length; i++) {
     var row = document.createElement("tr");
     var name = document.createElement("td");
     name.appendChild(document.createTextNode(item_name[item_number[i]]));
     var price = document.createElement("td");
     price.appendChild(document.createTextNode(item_price[item_number[i]]));
     var remove = document.createElement("td");
     var del_link = document.createElement("a");
     del_link.appendChild(document.createTextNode("Remove from cart"));
     del_link.setAttribute("href", "javascript:remove(" + i + ")");
     remove.appendChild(del_link);
     row.appendChild(name);
     row.appendChild(price);
     row.appendChild(remove);
     cart.appendChild(row);
     price_total += item_price[item_number[i]];
    }
    if(i) {
     var total = document.createElement("tr");
     total_msg = document.createElement("td");
     total_msg.appendChild(document.createTextNode("Total:"));
     total_price = document.createElement("td");
     total_price.appendChild(document.createTextNode("R" + price_total));
     total.appendChild(total_msg);
     total.appendChild(total_price);
     total.appendChild(document.createElement("td"));
     cart.appendChild(total);
    }
    else {
     var row = document.createElement("tr");
     var no_items = document.createElement("td");
     no_items.appendChild(document.createTextNode("No items in cart"));
     row.appendChild(no_items);
     cart.appendChild(row);
    }
    document.getElementById("cart_container").appendChild(cart);
    // let ie display the table.. *sigh*
    if(document.all && !window.opera) document.getElementById("cart_container").innerHTML = document.getElementById("cart_container").innerHTML;
      
   }
    window.onload = fill_table;

</SCRIPT>
   </HEAD>
   <BODY bgcolor="white" onload="userprompt()">
<SCRIPT language="Javascript" type="text/javascript">
function userprompt()
{
 var Name = prompt("Enter your name:");
 var Id = prompt("Enter your customer ID:");  
 var Phone = prompt("Enter your phone number:");
    var Space = "";
document.write("<h1>Easy Credit Order Form<\/h1>"+ Space +"<br>");
document.write("Fax this form to Easy Credit at 555-3423."+ Space +"<br>");
document.write("Your Name: " + Name +"<br>");
document.write("Your Customer ID: "+ Id +"<br>");
document.write("Your Phone Number: "+ Phone +"<br>");

}
</SCRIPT>


Click <a href = "cart.html"> here </a> to return to the shopping cart page
 
   </BODY>
</HTML>

glenngv · 07-14-2004, 09:04 AM

You have 2 conflicting onload handlers. There must be only one onload handler.

window.onload = fill_table;

</SCRIPT>
</HEAD>
<BODY bgcolor="white" onload="userprompt()">

The last onload handler will override the existing one, so in this case userprompt() will be executed but fill_table() won't be.
Since userprompt() uses document.write statements to display data, calling it after the page has loaded will erase the current content.
So it should be called AS the page is loading (and the window.onload=fill_table as is), though I don't generally advise to use prompts and later document.write the inputs, but I know this is the requirement of the assignment.

Code:

<BODY bgcolor="white">
<script type="text/javascript">
 function userprompt(){
   ...
 }
 userprompt();
</script>
</body>