Hello all, First things first: I'm very new to scripting/web-development, so please be kind and gentle with me. With that out of the way, I'd greatly appreciate any and all help that you guys can give me to help resolve a small problem I've encountered with the first WebApp I'm trying to develop. I'm sure it's something really small and simple, but since I don't have the knowledge/experience I have no idea how to fix it. Okay, so I've got a single file (index.php) which essentially displays four tabs (in the following sequence, and at the top of the page) to allow for (1) adding, (2) deleting, (3) updating, and (4) searching records in a MySQL database/table. Depending on the tab selected, the appropriate DIV/section (with corresponding form and submit button) is displayed. All of that seems to look and work just fine. The problem I'm having is that when I click the "submit" button on either the 2nd, 3rd or 4th tabs, I'm always being sent back to the very first tab. In other words, and as an example, if I'm on the "delete" tab - wanting to delete a number of rows individually - and I select a row to delete and press the "delete/submit" button, I'm taken right back to the "add" tab/section, and I then have to reselect the "delete" tab in order to continue deleting other rows. This is kinda bothersome and obviously not the most appropriate UI for such a situation. I would really like to remain on the same tab/section, till such time that I click a different tab/operation to perform. Once again, appreciate the help in getting me to end-of-job. Much thanks! Here's the code I have thus far:
<html>
<head>
<title>Stores WebApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="default.css">
<link href="demo.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script language="javascript">
function divHide(divToHideOrShow)
{
var div = document.getElementById(divToHideOrShow);
if (div.style.display == "block")
{
div.style.display = "none";
}
}
</script>
<script language="javascript">
function divShow(divToHideOrShow)
{
var div = document.getElementById(divToHideOrShow);
if (div.style.display == "none")
{
div.style.display = "block";
document.getElementById(divToHideOrShow).className = 'active';
}
}
</script>
<script language="javascript" type="text/javascript">
function makeActive(objDivID)
{
if(document.getElementById(objDivID).className=='')
{
document.getElementById(objDivID).className = 'active';
}
}
</script>
<script language="javascript" type="text/javascript">
function makeInactive(objDivID)
{
if(document.getElementById(objDivID).className=='active')
{
document.getElementById(objDivID).className = '';
}
}
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div class="wrapper">
<div class="body_wrapper">
<h1>Stores WebApp</h1>
<?php
$mysqli = new mysqli('localhost', 'store', 'b8skeu7jy5mv', 'store');
if ($mysqli->connect_error) {
die('Connect Error (' . $mysqli->connect_errno . ') '
. $mysqli->connect_error);
}
if(isset($_REQUEST["action"])){
switch($_REQUEST["action"]){
case "insert":
$SQL="INSERT INTO storelist (store_name) VALUES (";
$SQL=$SQL.");";
if ($mysqli->query($SQL)=== FALSE) {
printf("Error – Unable to insert data to table " . $mysqli->error);
}
break;
case "delete":
$SQL="DELETE FROM storelist WHERE";
for($i=0; $i < count($_REQUEST['checkboxes']); $i++){
$SQL=$SQL . " idnumber=" . $_REQUEST['checkboxes'][$i] . " or";
}
$SQL= rtrim($SQL, "or");
if ($mysqli->query($SQL)== FALSE) {
echo '<div class="highlight-error">Error: Unable to delete value (perhaps you have not selected anything to delete!)</div>';
}
break;
case "update":
$SQL="UPDATE storelist SET purchased = 'Y' WHERE";
for($i=0; $i < count($_REQUEST['checkboxes']); $i++){
$SQL=$SQL . " idnumber=" . $_REQUEST['checkboxes'][$i] . " or";
}
$SQL= rtrim($SQL, "or");
if ($mysqli->query($SQL)== FALSE)
{
echo '<div class="highlight-error">Error: Unable to update value (perhaps you have not selected anything to update!)</div>';
}
else
{
// echo mysqli_affected_rows($mysqli). ' Records UPDATED successfully<br />';
}
break;
}
}
?>
<ul class="simple-tabs" id="demo-tabs">
<li class="active" id="tabAdd">
<a href="javascript:divHide('divUpdate');divHide('divDelete');divShow('divAdd');divHide('divSearch');makeInactive('tabUpdate');makeInactive('tabDelete');makeActive('tabAdd');makeInactive('tabSearch');">Add</a>
</li>
<li id="tabUpdate">
<a href="javascript:divShow('divUpdate');divHide('divDelete');divHide('divAdd');divHide('divSearch');makeActive('tabUpdate');makeInactive('tabDelete');makeInactive('tabAdd');makeInactive('tabSearch');">Update/View</a>
</li>
<li id="tabDelete">
<a href="javascript:divHide('divUpdate');divShow('divDelete');divHide('divAdd');divHide('divSearch');makeInactive('tabUpdate');makeActive('tabDelete');makeInactive('tabAdd');makeInactive('tabSearch');">Delete/View</a>
</li>
<li id="tabSearch">
<a href="javascript:divHide('divUpdate');divHide('divDelete');divHide('divAdd');divShow('divSearch');makeInactive('tabUpdate');makeInactive('tabDelete');makeInactive('tabAdd');makeActive('tabSearch');">Search/View</a>
</li>
</ul>
<div class="clear-float"></div>
<div id="divAdd" style="display: block; top:0;">
<div>
<h3>Add Items:</h3>
<p>Use this section to add new item(s).</p>
<form class="add-data-form" action="index.php" method="POST">
<input type="hidden" name="action" value="insert" />
<div class="full-row">
<div class="field-label">
Store Name:
</div>
<select class="store-name" name="store_name">
<option value="No Frills">No Frills</option>
<option value="Super Store">Super Store</option>
<option value="Food Basics">Food Basics</option>
<option value="Freshco">Freshco</option>
<option value="Wal Mart">Wal Mart</option>
<option value="Giant Tiger">Giant Tiger</option>
<option value="Foodland">Foodland</option>
<option value="Metro">Metro</option>
<option value="Sobeys">Sobeys</option>
<option value="SDM">Shoppers Drug Mart</option>
<option value="Target">Target</option>
</select>
</div>
<input class="add-button" value="Add row" type="submit" />
</form>
</div>
</div>
<div id="divUpdate" style="display: none; top:0;">
<div>
<h3>View and Update Items:</h3>
<p>Use this section to update (highlight) items that have been purchased.</p>
<form class="update-data-form" action="index.php" method="POST">
<input type="hidden" name="action" value="update" />
<span class="full-row-heading">
<table>
<tr>
<th><span class="spacer-store-name">Store</span></th>
</tr>
</table>
</span>
<table>
<?php
$result = $mysqli->query("SELECT * FROM storelist");
while($row = $result->fetch_assoc()){
print '<tr>';
print '<td><span class="filler-checkbox"><input type="checkbox" name="checkboxes[]" value="' . $row["idnumber"] . '" /></span></td>';
if ($row["purchased"] == "Y")
{
print '<td><span class="highlight-purchased">' . $row["store_name"] . '</span></td>';
}
else
{
print '<td>' . $row["store_name"] . '</td>';
}
print '</tr>';
}
?>
</table>
<input class="update-button" value="Highlight selected item(s) as *Purchased*" type="submit"/>
</form>
</div>
</div>
<div id="divDelete" style="display: none; top:0;">
<div>
<h3>View and Delete Items:</h3>
<p>Use this section to delete items that are not needed.</p>
<form class="display-data-form" action="index.php" method="POST">
<input type="hidden" name="action" value="delete" />
<div class="full-row-heading">
<table>
<tr>
<th><span class="spacer-store-name">Store</span></th>
</tr>
</table>
</div>
<table>
<?php
$result = $mysqli->query("SELECT * FROM storelist");
while($row = $result->fetch_assoc()){
print '<tr>';
print '<td><span class="filler-checkbox"><input type="checkbox" name="checkboxes[]" value="' . $row["idnumber"] . '" /></span></td>';
if ($row["purchased"] == "Y")
{
print '<td><span class="highlight-purchased">' . $row["store_name"] . '</span></td>';
}
else
{
print '<td>' . $row["store_name"] . '</td>';
}
print '</tr>';
}
?>
</table>
<input class="delete-button" value="Delete selected row(s)" type="submit"/>
</form>
</div>
</div>
<div id="divSearch" style="display: none; top:0;">
<div>
<h3>Search and View Items:</h3>
<p>Use this section to search for specific store(s) or item(s).</p>
<form class="search-data-form" id="search-data-form" action="index.php" method="POST">
<div class="search-container">
<div class="full-row">
<div class="field-label">
Choose search field:
</div>
<div class="field-input">
<select name="searchtype">
<option value="store_name">Store Name</option>
</select>
</div>
<br />
</div>
<div class="full-row">
<div class="field-label">
Enter search term:
</div>
<div class="field-input">
<input name="searchterm" type="text" size="40"/>
</div>
<br />
</div>
</div>
<input class="search-button" type="submit" name="submit" value="Search"/>
<div class="full-row-heading">
<table>
<tr>
<th><span class="spacer-store-name">Store</span></th>
</tr>
</table>
</div>
<table>
<?php
// create short variable names
$searchtype=$_POST['searchtype'];
$searchterm=trim($_POST['searchterm']);
/*
if (!$searchtype || !$searchterm) {
echo '<div class="highlight-error">You have not entered any search details. Please try again.</div>';
exit;
}
*/
if (!get_magic_quotes_gpc()) {
$searchtype = addslashes($searchtype);
$searchterm = addslashes($searchterm);
}
$query = "select * from storelist where " . $searchtype . " like '%" . $searchterm . "%'";
$result = $mysqli->query($query);
$num_results = $result->num_rows;
for ($i=0; $i < $num_results; $i++) {
$row = $result->fetch_assoc();
print "<tr>";
echo "<td>" . stripslashes($row['store_name']) . "</td>";
print "</tr>";
}
$result->free();
$mysqli->close();
?>
</table>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
