JavaScript Editor Free JavaScript Editor     JavaScript Debugger 
↑



Main Page

Previous Page
Next Page

5.3. Tabular Information

As stated previously, the first two types of web pages required both deal in some way with tabular information, either for display or for updates.

When I was in high school, I took quite a few drafting classes, thinking that perhaps a career in architecture lay in my future. But I discovered computers, and, eh, a career in a different kind of architecture lay in my future. And that is exactly what we need now: an architecture upon which to build our creatureeh, er, e-commercesite. So let's send Igor to get a cold beverage and queue the storm sound effects before we start.

Back already?

Because programming is one of those fields, like politics, in which trotting out an old idea is a virtue, we'll drag the frameset from Chapter 2, "Introducing Ajax," into this chapter and use it again. If Congress can recycle the same bills year after year, surely we can do the equivalent with some code. Just in case you've forgotten what it looks like, Listing 5-11 shows it in its entirety, without commercial interruption.

Listing 5-11. Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
      <head>
            <title>MSAWSS</title>
      </head>
      <frameset rows="100%,*">
            <frame name="visible_frame" src="visible.html">
            <frame name="hidden_frame"
src="customer.php?email=ewoychowsky@yahoo.com">
            <noframes>
              Frames are required to use this web site.
       </noframes>
      </frameset>
</html>

Unfortunately, because of scope creep, the visible page from Chapter 2 doesn't make the grade for this chapter. It is almost there, but it needs a little more functionalitybasically, additional logic to make it bulletproof. By bulletproof, I mean able to withstand attack by Machinegun Kelly or any other "guest" who can click a mouse button upward of 200 times a minute.

But before adding the necessary logic, let's see what JavaScript functions we already have that can be cloned for our nefarious purpose. The first JavaScript function to be cloned is changeEvent, which itself does a little cloning. The sole purpose of this little cross-browser-capable function is to handle an onchange event for HTML input, textarea, and select tags. The second function that can be cloned is submitForm, which, surprisingly, is also cross-browser-capable.

At this point in designing the architecture, I have run out of code to clone and now must write code from scratch. But before I do, allow me to explain what I'd like to do. After all, explaining plots is a common weakness that we mad scientists all have, and if I can't explain it to you, I'll have to explain it to Igor, and the blank, glassy stare that he gets is so unnerving.

First I'd like a routine that ensures that the peasantseh, guestsdon't muck around with the Back button. This is because the Back button is like fire to Victor's monsterit causes unpredictable results. With any kind of HTML frames, hitting the Back button is just as likely to cause the hidden page to go back as the visible page. In short, it is not a good thing. Fortunately, in this instance, a little JavaScript goes a long way, as the following line of code shows:

window.history.forward(1);

Doesn't look like much, does it? Well, it isn't the size of the boat, but the, um, never mind. Let's just say that it is all that is necessary to ensure that the current page is always the top page in the history, which is exactly what this does. Of course, it needs to be included on every page, both visible and hidden. It is also important to remember to provide some means of navigation; otherwise, shoppers will be lost in a "twisty little maze of passages, all alike," which isn't real good for repeat business.

The next function isn't really a function at all; it is actually a Boolean global variable that merely indicates whether the web browser is Microsoft Internet Explorer or another browser. The reason this is an Internet Explorer indicator isn't because I'm in love with IE; it is because the larger the software company is, the more likely that it has wandered off the path when it comes to following standards. So with this in mind, the following code was written:

var _IE = (new RegExp('internet explorer','gi')).test(navigator.appName);

The third function that is necessary to this project is one that "clones" a form on the hidden frame to the visible. Although this sounds pretty simple, it is anything but simple. In fact, most developers never ask one major question unless they try this kind of thing for themselves:

When loading the frameset for the first time, which page loads first?

Fortunately, there is a simple answer to this question; unfortunately, the answer is that I don't know, which is a rather big stumbling block to overcome to complete the website. This means that not only will the function need to clone the hidden form to the visible form, but it might have to sit around waiting for the visible form to finish loading. The good thing is that the process of checking for frame completeness is very similar to what was done in Chapter 2, as shown in Listing 5-12.

Listing 5-12. initialize Function

/*
      Update the visible frame with information from this page.
*/
function initialize()
{
  var hiddenForm = document.getElementById('hidden_form');

  if(_IE)
  {
    if(parent.document.frames.item('visible_frame').document.readyState
!= 'complete')
      window.setTimeout('initialize()',100);
    else

parent.frames['visible_frame'].document.getElementById('visible_form').
innerHTML = hiddenForm.innerHTML;
  }
  else
  {
    try
    {
      var node =
parent.frames['visible_frame'].document.getElementById('visible_form').
firstChild;

      try
      {

parent.frames['visible_frame'].document.getElementById('visible_form').
removeChild(node);
      }
      catch(e) { }

parent.frames['visible_frame'].document.getElementById('visible_form').
appendChild(hiddenForm.cloneNode(true));
    }
    catch(e)
    {
      window.setTimeout('initialize()',100);
    }
  }
}

The initialize() function is invoked by the hidden frame's onload event handler, and the first thing that it does is use the _IE Boolean that I created earlier. The reason for this is that occasionally I do give in to temptation and use a nonstandard browser feature. In this instance, the feature is the document object's readyState property. Just test it against "complete," and we're good to go (that is, if the browser is Microsoft Internet Explorer; otherwise, it is necessary to give it the old college try and catch).

If the visible frame isn't ready, it is necessary to use the window.setTimeout() method to invoke the initialize() function again after waiting the specified number of milliseconds. Don't confuse this method with the window. setInterval() method because setTimeout invokes the specified function only once. With setInterval(), the function repeats like salami does until it is stopped, which is bad, unless you are fond of debugging really weird client-side happenings.

The next function that I want to add is one to restrict keyboard input to numeric values. Although the appropriate elements can be tested at submission time, we're dealing with guests who could potentially unleash a plague of giant hedgehogs on Spotswood, New Jersey, when ticked off. So why not avoid any problems before they occur? Listing 5-13 shows this function in all its glory.

Listing 5-13. restrict Function

/*
      Restrict keyboard input for the provided object using the
       passed regular
                 expression and option.
*/
function restrict(obj,rex,opt) {
      var re = new RegExp(rex,opt);
      var chr = obj.value.substr(obj.value.length - 1);

      if(!re.test(chr)) {
            var reChr = new RegExp(chr,opt);

            obj.value = obj.value.replace(reChr,'');
      }
}

The final two functions are the changeEvent() and the submitForm() functions, which have been copied directly from Chapter 2. Listing 5-14 shows both of these functions.

Listing 5-14. changeEvent and submitForm Functions

/*
     Handle form visible form onchange events. Values from the
       visible form are copied to the hidden form.
*/
function changeEvent(obj)
{
     parent.frames[1].document.getElementById(obj.id).value = obj.value;
}

/*
     Submits the form in the hidden frame.
*/
function submitForm() {
     parent.frames[1].document.getElementById('hidden_form').submit();
}
          </script>
     </head>
     <body onload="initialize()">
          <form name="visible_form" id="visible_form"></form>
     </body>
</html>

5.3.1. Read Only

As strange as it sounds, when I'm creating a website from scratch, I often find it simpler to begin coding nearer to the end than the beginning. This is probably some sort of unique mental defect, but it works, so I'm not about to mess with it. So let's start with the page that shows the garbage that the sucker orderedeh, the items that the customer selected for purchase. In fact, let's play nice and try to refer to customers as "guests" instead of "users" or "suckers"at least, to their faces (remember the Moon-Mounted Death Ray).

So with my new and enlightened attitude, let's determine what information the guests require. Well, the order number would be nice, if only for our own protection. The same can be said for item numbers, item names, quantity, and both unit price and total item price. Showing the total along with any shipping charges and tax (at least, until our own Death Ray is operational) is an absolute must.

So let's see, we have the following:

  • One order number

  • A variable number of item lines consisting of item numbers, item names, quantity ordered, unit price, and total item price

  • One shipping total

  • One tax total, at least for the near future

  • One grand total

Now that we've got something that remotely resembles a plan, it is time to implement it. First there are the database tables that describe the guild (Mad Scientist, Alchemist, or Sorcerer), orders, items, and lines. From this SQL it is pretty easy to infer what some of the other tables are, but we ignore them for now because they're not needed at this point. Listing 5-15 shows the SQL necessary to define these tables.

Listing 5-15. SQL to Create MySQL Database Tables

CREATE TABLE guild (
      guild_id int(6) auto_increment NOT NULL,
      guild_name varchar(255) NOT NULL,
      PRIMARY KEY (guild_id),
      UNIQUE id (guild_id)
);

CREATE TABLE orders (
      orders_id int(6) auto_increment NOT NULL,
      customer_id int(6) NULL,
      ship_address_id int(6) NULL,
      orders_date datetime NOT NULL,
      PRIMARY KEY (orders_id),
      UNIQUE id (orders_id),
      KEY customer_key (customer_id),
      KEY ship_address_key (ship_address_id)
);

CREATE TABLE item (
      item_id int(6) auto_increment NOT NULL,
      item_name varchar(255) NOT NULL,
      item_description varchar(255) NULL,
      item_price decimal(10,2) NOT NULL,
      PRIMARY KEY (item_id),
      UNIQUE id (item_id)
);
CREATE TABLE line (
      line_id int(6) auto_increment NOT NULL,
      orders_id int(6) NOT NULL,
      item_id int(6) NOT NULL,
      line_quantity int NOT NULL,
      line_item_price decimal(10,2) NOT NULL,
      PRIMARY KEY (line_id),
      UNIQUE id (line_id),
      KEY orders_key (orders_id),
      KEY item_key (item_id)
);

If you recall, earlier I stated that MySQL version 5 and higher support stored procedures; in fact, I even gave you an example. We've just covered the tables we're using for this example, so now is a good time to cover the stored procedure. The stored procedure lineSelect (see Listing 5-16) is relatively simple, just a select statement with a bunch of inner joins. Although it isn't heavy dutyno cursors, transactions, or anything like thatit is an example of a stored procedure in MySQL, currently a thing only slightly more common than unicorns.

However, there are a number of reasons for the inclusion of stored procedures, especially in MySQL. The first of these is to avoid the use of Microsoft Access, which is technically a database; however, it really isn't very robust. Some might argue that Access is a replacement for SQL Server, which I agree to, but I'm on a budget here and a stripped-down developers' edition isn't what I want. Besides, both Access and SQL Server are Windows-only databases. Oracle, on the other hand, runs a number of platforms and is robust, but it isn't open source. As for my final reason for stored procedures, speed thrills.

Listing 5-16. lineSelect stored procedure

DELIMITER $$

DROP PROCEDURE IF EXISTS `ajax`.`lineSelect`$$
CREATE PROCEDURE `ajax`.`lineSelect`(
  ordersId INTEGER(6)
)
BEGIN
  SELECT    line_id,
            item_id,
            line_quantity,
            line_item_price
  FROM      line
  WHERE     (ordersId IS NULL OR ordersId = orders_id)
  ORDER BY  line_id ASC;
END$$

DELIMITER ;

Earlier I said that the examples would be in PHP, and because stored procedures are being used, it is necessary to use the mysqli library instead of the mysql library. This might not sound like a big deal, but it would be a good idea to provide some basic information on the parts ofmysqli that are used in this example. Table 5-1 outlines these "parts."

Table 5-1. mysqli

Method/Property

Type

Description

mysqli

Constructor

Returns a connection

connect_errno()

Property

Returns the result of the connection attempt

query

Method

Executes the provided SQL statement

error

Property

Returns the result of the command

fetch_array

Method

Returns the result of a query as an array

close()

Method

Closes the connection


The odd thing is that after all the little details are covered, such as the client-side JavaScript, database tables, and stored procedures, there is actually very little code to write. Mostly it comes down to putting the pieces together and using the Cascading Style Sheets (CSS) shown in Listing 5-17 to give the website a consistent look and feel.

Listing 5-17. CSS

A:active
{
  color: 0000FF
}
A:visited
{
  color: 0000FF
}
A:hover
{
  color: 800080;
  text-decoration: none
}
BODY
{
  background-color: F0F8FF;
  font-family: tahoma;
  font-size: 12px
}
BUTTON
{
  cursor: hand;
  font-family: tahoma;
  font-size: 12px
}
INPUT
{
  cursor: hand;
  font-family: tahoma;
  font-size: 12px
}
H1
{
  font-family: tahoma;
  font-size: 18px
}
TABLE
{
  border: collapse
}
TH
{
  font-family: tahoma;
  font-size: 12px
}
TD
{
  font-family: tahoma;
  font-size: 12px
}
.cellAlert
{
  color: FF0000;
  font-weight: bold
}
.pageHeader
{
  background-color: 000080
}
.pageCell
{
  color: FFFFFF;
  font-family: tahoma;
  font-size: 16px;
  font-weight: bold
}
.rowHeader
{
  background-color: 6495ED;
  color: FFFFFF;
  font-weight: bold
}
.rowData
{
  background-color: D3D3D3
}
.numeric
{
  font-family: tahoma;
  text-align: right
}

The end result of this endeavor is the page shown in Figure 5-2, whose code is shown in Listing 5-18 along with some common PHP variables and routines shown in Listing 5-19. While we're on the subject of common routines, I should state now that there are several different approaches to handling inclusion of common code. The first, which I'm using here, is to include everything that could possibly be of any use from a single file. Later, however, I switch to an approach that breaks up variables and routines by function. For example, database-related items are here and rendering-related items are there, and anything else is handled on a case-by-case basis. This might seem like overkill now, but it falls under the category of defensive programming.

Figure 5-2. The page resulting from our efforts

[View full size image]


Listing 5-18. Code for the Page in Figure 5-2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<?php
include('common.php');

$title="Order Detail";
$order = substr(@$_SERVER['QUERY_STRING'],6);
$order = 1;
$query = "CALL lineSelect(" . $order . ")";
$mysqli = new mysqli($server,$user,$password,$database);

if(mysqli_connect_errno())
{
  printf("Connect failed: %s\n", mysqli_connect_error());

  exit();
}

if(!$result = $mysqli->query($query))
{
  printf("Error: %s\n", $mysqli->error);

  exit();
}
?>
      <head>
            <link rel="stylesheet" type="text/css" href="common.css"/>
            <title><?php echo $title; ?></title>
            <script language="javascript" src="library.js"></script>
      </head>
      <body onload="initialize()">
            <form name="hidden_form" id="hidden_form" action="post.aspx">
<?php
pageHeader($system,$title);
?>
                  <table border="0" width="980px" ID="Table1" border="1"
cellpadding="2" cellspacing="2">
                        <tr class="rowHeader">
                              <th>Item Name</th>
                              <th>Description</th>
                              <th>Quanitity</th>
                              <th>Unit Price</th>
                              <th>Price</th>
                        </tr>
<?php
$total = 0;

while($row = $result->fetch_array(MYSQLI_ASSOC))
{
  printf("<tr class='rowData'><td
align='center'>%s</a></td>",$row["item_name"]);
  printf("<td align='left'>%s</a></td>",$row["item_description"]);

  printf("<td class='numeric'>%s</td>",$row["line_quantity"]);
  printf("<td class='numeric'>$%s</td>",$row["line_item_price"]);
  printf("<td class='numeric'>$%s</td></tr>",($row["line_item_price"] *
$row["line_quantity"]));

  $total += ($row["line_item_price"] * $row["line_quantity"]);
}
?>
                <tr class="rowData">
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <th class='numeric'>Total</th>
<?
  printf("<td class='numeric'>$%s</td>",$total);
?>
                </tr>
                  </table>
            </form>
      </body>
<?php
$result->close();
?>
</html>

Listing 5-19. PHP Variables and Routines

<?php
$server="localhost";            //  MySQL database server
$user="root";                   //  MySQL user id
$password="wyvern";             //  MySQL password
$database="ajax";               //  MySQL database

$system="Mad Scientist-Alchemist-Sorcerer Sales & Services";

/*
      Write the header for a web page.
*/
function pageHeader($systemName,$pageName)
{
?>
<table border="0" height="60px" width="975px" ID="<?php $pageName ?>"
border="0" cellpadding="0" cellspacing="0">
    <tr class="pageHeader" height="40px">
        <td width="5%">&nbsp;</td>
        <th class="pageCell" width="45%" align="left">
<?php
  echo $systemName;
?>
        </th>
        <th class="pageCell" width="45%" align="right">
<?php
  echo $pageName;
?>
        </th>
        <td width="5%">&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
<?php
}
?>

5.3.2. Updateable

As with the previous page type, the next type of page to be generated is also tabular in nature. However, unlike the previous example, this page allows for input beyond the navigation to the next page type. In a nutshell, here is our first chance to use the majority of the architecture functions, and, in a nutshell, here is where there is a big chance that things can go seriously wrong.

The big question is, just how can things go seriously wrong? Is it a flaw in the underlying concepts of Ajax? Nope, it is more of what I refer to as a "Homer Simpson Moment." These moments are caused by coding while the brain is on autopilot, and for me it usually manifests itself in the form of using the wrong event handler or forgetting an event handler altogether. Fortunately, by coding the submitForm() handler to deal with changes to HTML objects, I've managed to avoid one of my more common points of failure.

Alright, now with that out of the way, I feel less likely to screw up in the same old way. If I am going to screw up, I want it to be in an entirely new and original way. After all, in most cases, more can be learned from getting something wrong than by getting something right.

Now that we've covered the basics of what can go wrong when working with forms, let's put it into practice. Hmm, that didn't sound right. Okay, take two. Now that we've covered some of the potential pitfalls of working with forms, let's create a web page avoiding them. Whew!

The purpose of the next page that we are working with is to display the contents of the guest's virtual shopping cart. As with its real-world counterpart, shoppers will have several possible actions available to them. First, they can remove individual items from the cart just like they do in the real world; how else do you suppose frozen peas find their way to the cookie aisle? The next possible action is to change the quantity, either up (yeah!) or down (pout!). Oh, I should mention that decreasing an item's quantity to zero has the same end result as removing the item from the cart. Finally, shoppers will have the option of giving up and just abandoning their shopping cart.

This is a good time to point out that, unlike some virtual shopping carts where the contents are stored on the server, this one doesn't. Instead, I chose to follow the "why bother the server any more than absolutely necessary?" philosophy, so the shopping cart is cached in a hidden text box in a form on the visible frame as item-quantity pairs. Why? Because after being loaded, with the exception of the cloned form, the visible frame doesn't change. Although it sounds somewhat strange, it has the advantage of reducing server traffic. When the time comes to display the shopping cart, it can simply be coded into the URL, which, although it does have a 4K limit, should be more than enough for our purpose.

Although we already have a lot of the code necessary for this to work (the numeric input function and the CSS), several bits of code are needed. First, there is the JavaScript function that builds the URL for displaying the shopping cart (see Listing 5-20). In addition, there is the stored procedure and two stored functions to retrieve all the necessary information from the tables shown in Listing 5-21. Finally, there is the page itself in Figure 5-3 and Listing 5-22.

Figure 5-3. The shopping cart page

[View full size image]


Listing 5-20. JavaScript Function That Builds the URL for Displaying the Shopping Cart

function displayCart() {
  if(document.getElementById('cartContents').value.length = 0)
    alert("Your shopping cart is empty.");
  else
    parent.frames['hidden_frame'].document.location =
'displayCart.php?cart=' + document.getElementById('cartContents').value;
}

Listing 5-21. The Stored Procedure and the Two Stored Functions

DELIMITER $$

DROP PROCEDURE IF EXISTS `ajax`.`shoppingCartSelect`$$
CREATE PROCEDURE `ajax`.`shoppingCartSelect`(
/*

  To display the contents of the shopping cart.
*/
itemIds LONGTEXT
)
BEGIN
  DECLARE work LONGTEXT;

  CREATE TEMPORARY TABLE search (
        id INTEGER(6) AUTO_INCREMENT NOT NULL,
        search_id INTEGER(6) NOT NULL,
    quantity INTEGER NOT NULL,
        PRIMARY KEY (id),
        UNIQUE id (id)
  );

  SET work = itemIds;

  WHILE INSTR(work,',') > 0 DO
    INSERT INTO search
                (search_id,
                quantity)
    VALUES      (CAST(f_substringBefore(work,'-') AS UNSIGNED),
                CAST(f_subStringAfter(work,'-') AS UNSIGNED));

    SET work = f_substringAfter(work,',');
  END WHILE;

  SELECT      s.id,
              i.item_name,
              i.item_description,
              i.item_price,
              s.quantity,
              i.item_price * s.quantity total_price
  FROM        search s
  INNER JOIN  guild_item_bridge b
  ON          s.search_id = b.guild_item_id
  INNER JOIN  item i
  ON          b.item_id = i.item_id
  ORDER BY    s.id ASC;

  DROP TEMPORARY TABLE search;
END$$

DELIMITER ;

DROP FUNCTION IF EXISTS `ajax`.`f_substringAfter`$$
CREATE FUNCTION `ajax`.`f_substringAfter`(
/*
  To return the text after a string.
*/
  stringOperand LONGTEXT,
  stringSearch LONGTEXT

) RETURNS longtext
BEGIN
  RETURN SUBSTRING(stringOperand,INSTR(stringOperand,stringSearch) + 1);
END$$

DELIMITER ;

DELIMITER $$

DROP FUNCTION IF EXISTS `ajax`.`f_substringBefore`$$
CREATE FUNCTION `ajax`.`f_substringBefore`(
/*
  To return the text before a string.
*/
  stringOperand LONGTEXT,
  stringSearch LONGTEXT
) RETURNS longtext
BEGIN
  RETURN SUBSTRING(stringOperand,1,INSTR(stringOperand,stringSearch) - 1);
END$$

DELIMITER ;

Listing 5-22. Code for the Shopping Cart Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<?php
include('common.php');

$title="Item Detail";
$id = substr(@$_SERVER['QUERY_STRING'],3);
$query = "CALL itemSelect(" . $id . ",NULL)";
$mysqli = new mysqli($server,$user,$password,$database);

if (mysqli_connect_errno())
{
  printf("Connect failed: %s\n", mysqli_connect_error());

  exit();
}

if(!$result = $mysqli->query($query))
{
  printf("Error: %s\n", $mysqli->error);

  exit();
}
?>
      <head>
            <link rel="stylesheet" type="text/css" href="common.css"/>
            <title><?php echo $title; ?></title>
            <script language="javascript" src="library.js"></script>
      </head>
      <body onload="initialize()">
            <form name="hidden_form" id="hidden_form" action="post.aspx">
<?php
pageHeader($system,$title);

$row = $result->fetch_array(MYSQLI_ASSOC);

$rowLabel ="<div class='rowHeader' style='position: absolute; left: 50px;
right: auto%; bottom: auto; width: 200px; top: ";
$rowData = "<div class='rowData' style='position: absolute; left: 255px;
right: auto; bottom: auto; width: 600px; top: ";

echo $rowLabel . "75px'>&nbsp;Guild Name:</div>";
echo $rowLabel . "92px'>&nbsp;Item Name:</div>";
echo $rowLabel . "110px'>&nbsp;Description:</div>";
echo $rowLabel . "127px'>&nbsp;Price:</div>";
echo $rowLabel . "144px'>&nbsp;Quantity:</div>";

printf($rowData . "75px'>&nbsp;%s</div>",$row["guild_name"]);
printf($rowData . "92px'>&nbsp;%s</div>",$row["item_name"]);
printf($rowData . "110px'>&nbsp;%s</div>",$row["item_description"]);
printf($rowData . "127px'>&nbsp;%s</div>",$row["item_price"]);
?>

            <input type='text' id='quantity' name='quantity' value=''
onkeyup='restrict(this,\'[0-9]\',\'gi\')' style='position: absolute; left:
255px; right: auto; bottom: auto; top: 144px; text-align: right'>
<?php
echo "<input type='button' value='Add to cart'
onclick='JavaScript:add2Cart(" . $row["guild_item_id"] . ")'
style='position: absolute; top: 175px; left: 50px; right: auto; bottom:
auto; height: 22px; width: 110px'>";
echo "<input type='button' value='Return to items'
onclick='JavaScript:itemsList()' style='position: absolute; top: 175px;
left: 175px; right: auto; bottom: auto; height: 22px; width: 110px'>";
echo "<input type='button' value='View Cart'
onclick='JavaScript:displayCart()' style='position: absolute; top: 175px;
left: 300px; right: auto; bottom: auto; height: 22px; width: 110px'>";
echo "<input type='button' value='Place Order'
onclick='JavaScript:itemsList()' style='position: absolute; top: 175px;
left: 425px; right: auto; bottom: auto; height: 22px; width: 110px'>";
?>
            </form>
      </body>
<?php
mysqli_close($mysqli);
?>
</html>


Previous Page
Next Page

→ R7


JavaScript Editor Free JavaScript Editor     JavaScript Debugger


©