Hide/show html table rows

mpsn · June 29, 2011

Hi, I'm trying to build a simple online buying site, and the two php scripts I'm using are: 1)the first php script where shoppers checkbox the items they want to buy, then they click Proceed to checkout and 2)the other php script showing an html table of all the checked out items with a column for a checkbox to remove from the cart and a Remove from cart button. I want the items the shoppers decide to not buy to be "removed" in the sense of somehow using attribute display: none or something like this idea to hide a certain html row. Here is the two scripts, I hope I am clear as to what I am aiming for, thx.

shopper page:

<?php 
  include_once('config.php');
  require 'bellConnect.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bell Mobility by Andy 2: Public</title>
</head>

<body>
<form method="POST" action="buyTester.php"><?php
$result=mysql_query("SELECT ID, Image, Name, Manufacturer, Price, Description, SimSupport FROM bellProducts");
    //phpinfo(); 

    //NB: print table headings
    if(mysql_num_rows($result))//if there is at least one entry in bellProducts, make a table
    {
        //$counter+=1;
        print "<table border='border'>";
        print "<tr>     
        <th>Select products to buy</th> 
        <th>Image</th> 
        <th>Name</th>
        <th>Manufacturer</th>
        <th>Price</th>
        <th>Description</th>
        <th>Sim Support</th>
        <th>IMEI</th>    
           </tr>";

        //NB: now output each row of records
        while($row=mysql_fetch_assoc($result))//NB: while the current db table's row still has fields to extract 
        {
            //extract($row);
            
                print
                "<tr align='center'>
              
                    <td><input type='checkbox' name='modifyArray[]' value='$row[iD]' id=\"modifyArray[]\" /></td>
                    <td>";
                    if(!empty($row['Image']))
                    {
                        $curImage=$row['Image'];
                    }
                    else if(empty($row['Image']))
                    {
                        $curImage='fileUploadIcon.jpg';
                        //$title="please upload item image";
                    }
                       print "<img src=$curImage width='70px' height='90px' title='please upload product image' />
                    </td>
                    <td> $row[Name] </td>
                    <td> $row[Manufacturer] </td>
                    <td> $$row[Price]</td>
                    <td align='left'>$row[Description]</td>
                    <td>$row[simSupport]</td>
                     <td></td>
                   
                  </tr>";
            //}//END INNER IF
        }//END WHILE
             
  }//END BIG IF

?>
         
</table>
<input type='submit' value='Proceed to checkout' name='checkout' />
    </form>

</body>
</html>

user form page

<?php 
  include_once('config.php');
  require 'bellConnect.inc.php';
?>

<html>
<head>
  <title>Bell Mobility: Checkout Test</title>
</head>

<body>


<a href="http://localhost/bell/bellPublicHome.php">Return shopping</a>
<form method="post" action="success.php">
<?php 

//NB: show this checkout table if shopper clicks Proceed to Checkout button
if(isset($_POST["checkout"]) && !empty($_POST["modifyArray"]) )
{
  echo "<p>Your checked out items below</p>";
  $checkedItems=$_POST["modifyArray"];
  $jointIds="";
  foreach($checkedItems as $curCheckedItem)
  {
    $jointIds.=$curCheckedItem.",";
  }

  $jointIds=substr($jointIds,0,strlen($jointIds)-1);//NB: remove the last comma (",")
  $query=mysql_query("SELECT ID, Image, Name, Manufacturer, Price, Description, SimSupport FROM bellProducts 
    WHERE ID IN ($jointIds);"); 

  if(mysql_num_rows($query))//if at least one row exists
  {
    echo "<table border='border'>";
    echo "<tr>
          <th></th>
          <th>Remove from cart</th>
          <th>Image</th>
          <th>Name</th>
          <th>Manufacturer</th>
          <th>Price</th>
          <th>Description</th>
          <th>Sim Support</th>
        </tr>";

    while($curRow=mysql_fetch_assoc($query))//while this current row has fields to output to $curRow still
    {
      echo "<tr>
            <td></td>
            <td><input type='checkbox' name='checkedoutModifyArray' value=$curRow[iD] /></td>
            <td>$curRow[image]</td>
            <td>$curRow[Name]</td>
            <td>$curRow[Manufacturer]</td>
            <td>$curRow[Price]</td>
            <td>$curRow[Description]</td>
            <td>$curRow[simSupport]</td>
          </tr>";
  
    }//END HTML table WHILE display
  }//END BIG IF 

   
//NB:show the initial running total



//NB: show the user form w/ unfilled text fields

echo "</table>";

echo "<br /><br /><hr />";
echo "<div id='buySubmitButton'>";
echo  "<input type='submit' id='buyNow' value='BUY' name='buyNow' />";
echo "</div>";
echo "</form>";

}//END BIGGEST IF for showing initial checkout html table straight from Proceed to checkout submit-button

else
  echo "You have not selected any items. 
    <a href='http://localhost/bell/bellPublicHome.php'>Click here to return shopping.</a>";        

//NB: show this checkout html table if user clicked Remove from cart
//if(isset($_POST["removeFromCart"]) && !empty($_POST["checkoutModifyArray"]))
//{
//  echo "hello";
//NB:show the updating running total



//NB: show the user form w/ potential filled or unfilled text fields


//}

//else
//{ header("Location:http://localhost/bell/bellPublicHome.php"); exit; }


?>

</body>
</html>

vbconz · June 29, 2011

It sounds more like a client side function than a server side function unless you want the form to be submitted back to the server for (php) processing after the user clicks a check box.

My suggestion is add in a java script function to do what you want. An untested but 90% complete example

In the example html page: the minus.gif is a picture of a minus symbol.


<html>
<head>
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
   	item.className=(item.className=='visibleLine')?'hiddenLine':'visibleLine';
}
  }

</script>
</head>
<body>
<h1>my purchased goods page</h1>
<!-- Start laying oput the lines of purchased goods here -->
<div id="item_1" class="visibleLine">
		<a href="javascript:unhide('item_1');">
			<img style="float:left;margin-right:10px;" src="img/minus.gif" />
		</a>
     Item_1 Name:   Item_1 Description: Item_1 Price : Item_1 Tax
</div>
<br />
<div id="item_2" class="visibleLine">
		<a href="javascript:unhide('item_2');">
			<img style="float:left;margin-right:10px;" src="img/minus.gif" />
		</a>
     Item_2 Name:   Item_2 Description: Item_2 Price : Item_2 Tax
</div>
etc etc etc
</body>
</html>

The css that needs to go with it is as follows:

.hiddenLine { 
display: none; 
}
.visibleLine{ 
display: block; 
}

Clicking on the minus sign (or the whole row if you move the </a> tag - sets off the java script which then changes the class making the css hide or unhide that div.

Setting the item name in the href="javascript:unhide('item_1'); lines is a matter of appending the row number to each item e.g.

<?php>
echo 'href="javascript:unhide("item_'.$rowNum.'1");';
</php>

Lastly - you can use the javascript you run to remove quantity ordered in that div line using firstItem or firstChild or something similar - you may want to also look at how to let the customer re-add the line (e.g. move the quantity from textbox_item1_quantity to textbox_item1_old_quantity when the line is deleted / hidden and then put it back if it is restored. changing the minus.gof to a plus.gif as well or similar.

I used similar code to hide and unhide paragraphs of text in a Cv / bio.

If you want to use check boxes instead of a minus.gif then dont use <a href=...> but capture the onclick of a check box instead.

HTH

Shane

mpsn · June 29, 2011

Thanks for your elaborate reply, but isn't it bad practice to mix server side (php) w/ client side (javascript) scripting languages, that's why I was thinking along the lines of keeping it strictly with php/html/css, but I will try your method first, thanks.

vbconz · June 30, 2011

Thanks for your elaborate reply, but isn't it bad practice to mix server side (php) w/ client side (javascript) scripting languages, that's why I was thinking along the lines of keeping it strictly with php/html/css, but I will try your method first, thanks.

The php server side language only generates the client side page. The client side page (example given above) is what is presented to the browser. If you want a response to your clicks / check box to hide a row you have two options:

1 - Client side code as shown above (or similar)

2 - php server side only

If you go for php server side only then each time someone clicked a check box to hide a row you would need to submit the form with the check box clicked back to the php server, get the server to figure out which row was now hidden, the server would have to re-send the page back out to the browser minus the hidden row.

That means every click of a check box to hide a row would require a round trip from the browser, to the server and back to the browser with page details amended. It would be a very slow and server intensive way of doing it.

The only time you should need to go back to the server and use PHP (IMHO) is if there is data updating to do in the back end or if part of a work flow that interacts with your data needs to be set off.

Where possible keep your teir three code (display and layout code) as close to the browser as possible unless it affects security ( and layout almost never affects security) or data integrity. By using browser based code such as javascript, dhtml, css etc you increase speed of response, reduce network traffic and reduce server load.

An example would be if you had a simple contact form on your web page to be filled out:

Say your contact form contained name, address, email , phone number and message fields.

The name and email address fields are mandatory / required but the others are optional.

If the client fills in only name and a message but leaves no email address you want to ensure you have an email address so you can return their message.

If you have only php / server side code, they fill in the name and message and submit the form. The form travels back to the server, it is processed by the server, the missing email address is discovered, a reposnse page is generated (with a warning about a missing email address) it travels back across the internet and then is displayed as an error to the user. Two slow network trips, server load etc.

If you have client side code (e.g. javascript)

Client pushed the submit button, javascript checks are all three fields filled in, finds no they aren't, changes the colour of the email field to red, pops a message box saying - hey dumb ass - how about an email address and cancels the submit. No server load , no round trip across the network to the server and an instantaeneous response for the client.

The strength of php is its ability to be mixed in with other w3 languages.

HTh

Shane

Sign In

Hide/show html table rows

Recommended Posts

mpsn

Link to comment

Share on other sites

vbconz

Link to comment

Share on other sites

mpsn

Link to comment

Share on other sites

vbconz

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information