I have a page running scrolling nav bootstrap theme which essentially means for me that I have multiple forms on one page. The problem I am having is whenever someone submits any of the 3 forms it sends data from all forms on the page. The code is below, I put a print line in the database.php page which prints the form Type which is a hidden field on each form. The field type is always searchForm which happens to be the last one whcih makes sense as it sends from all forms so the last form type field it gets sets it equal to searchForm. I am using ajax to send the information to the database page and them come back as a table and use a jquery paging function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Region V Systems Inventory</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="icon" type="img/ico" href="favicon.ico">
<!-- Custom CSS -->
<link href="css/scrolling-nav.css?ver=1" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
td{
padding: 15px;
}
</style>
<script>
</script>
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">Add Item</a>
</li>
<li>
<a class="page-scroll" href="#services">Review Items</a>
</li>
<li>
<a class="page-scroll" href="#contact">Update</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Add Item</h1>
<center><form action="javascript:void(0);" class="js-ajax-php-json" method="post" id="addform" accept-charset="utf-8">
<table cellpadding="10">
<tr>
<input type="hidden" name="type" value="FormSubmit">
<td><label>Item Type</label></td>
<td><select name="itemType" id="itemType" required><option></option><option value="Conference Room Chair">Conference Room Chair</option><option value="Conference Room Table">Conference Room Table</option><option value="Couch">Couch</option><option value="Credenza">Credenza</option><option value="Desk">Desk</option><option value="File Cabinet (2 Drawer)">File Cabinet (2 Drawer)</option><option value="File Cabinet (3 Drawer)">File Cabinet (3 Drawer)</option><option value="File Cabinet (4 Drawer)">File Cabinet (4 Drawer)</option><option value="Office Chair">Office Chair</option><option value="Phone">Phone</option><option value="Printer">Printer</option><option value="Projector">Projector</option><option value="Shelf">Shelf</option><option value="Side Chair">Side Chair</option><option value="Table">Table</option></select><br/></td>
</tr>
<tr>
<td><label>Location</label></td>
<td><input type="text" name="location" id="location" value="Enter Location" required /><br /></td>
</tr>
<tr>
<td><label>Approximate Location</label></td>
<td><select name="approxLoc" id="approxLoc" required><option></option><option value="Centeral Building">Central Building</option><option value="South 40">South 40</option><option value="Fiscal">Fiscal</option><option value="Lower Level">Lower Level</option></select></td>
</tr>
<tr>
<td><label>Extra Info</label></td>
<td><input type="text" name="extraInfo" id="extraInfo" value="Enter Extra Info" /><br /></td>
</tr>
<tr>
<td><label>Replacement Value</label></td>
<td><input type="Text" name="replacementValue" id="replacementValue" value="Enter Replacement Value"/><br /></td>
</tr>
</table>
<input type="submit" name="submit" id="submitForm" class="btn btn-primary" value="Submit form" />
</form></center>
<div class="the-return">
</div>
<br /> <br />
<a class="btn btn-default page-scroll" href="#about">View Data</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>View Items</h1>
<p>Here you can view a table with all the items.</p>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th><Center>ID</Center></th>
<th><Center>Item Type</Center></th>
<th><Center>Item Location</Center></th>
<th><Center>Extra Information</Center></th>
<th><Center>Replacement Value</Center></th>
<th><Center>Last Date Edited</Center></th>
</tr>
</thead>
<tbody id="myTable" class="tableAll">
<?php
try {
$dbh = new PDO('mysql:host=localhost;dbname=Item', '', '');
} catch(PDOException $e) {
echo $e->getMessage();
}
$getQuery = "SELECT * FROM items";
$prepared = $dbh->prepare($getQuery);
$prepared->execute();
$data = $prepared->fetchAll(PDO::FETCH_ASSOC);
foreach($data as $row){
$flag = 0;
if($flag == 1){
$flag = 0;
echo "<tr class='success'><td>" . $row['id'] . "</td><td>" . $row['ItemType'] . "</td><td>" . $row['Location'] . " (" . $row['approxLoc'] . ")</td><td>" . $row['ExtraInfo'] . "</td><td>" . $row['ReplaceValue'] . "</td><td>" . $row['DateEntered'] . "</td></tr>";
}else{
$flag++;
echo "<tr><td>" . $row['id'] . "</td><td>" . $row['ItemType'] . "</td><td>" . $row['Location'] . " (" . $row['approxLoc'] . ")</td><td>" . $row['ExtraInfo'] . "</td><td>" . $row['ReplaceValue'] . "</td><td>" . $row['DateEntered'] . "</td></tr>";
}
}
?>
</tbody>
</table>
</div>
<div class="col-md-12 text-center">
<ul class="pagination pagination-lg pager" id="myPager"></ul>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Sorted Tables</h1>
<center><form action="javascript:void(0);" class="js-ajax-php-json" method="post" id="sortform" accept-charset="utf-8">
<table cellpadding="10">
<tr>
<input type="hidden" name="type" value="tableSort">
<td><label>Sort By:</label></td>
<td><select name="sortBy" id="sortBy" required><option></option><option value="Item Type">Item Type</option><option value="Location">Location</option><option value="Approximate Location">Approximate Location</option><option value="Replacement Value">Replacement Value</option><option value="Date">Date</option></select><br/></td>
</tr>
<tr>
<td><label>Order By:</label></td>
<td><select name="orderBy" id="orderBy" required><option></option><option value="asc">Ascending</option><option value="desc">Descending</option></td>
</tr>
</table>
<input type="submit" name="submit" id="submitSort" class="btn btn-info" value="Generate Table" />
</form></center>
<span class="sort-Table-Return"></span>
<div class="col-md-12 text-center">
<ul class="pagination pagination-lg pager" id="mySortPager"></ul>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Advanced Search</h1>
<center><form action="javascript:void(0);" class="js-ajax-php-json" method="post" id="searchform" accept-charset="utf-8">
<table cellpadding="10">
<tr>
<input type="hidden" name="type" value="tableSearch">
<td><label>Item Type:</label></td>
<td><select name="itemType" id="itemType"><option></option><option value="Conference Room Chair">Conference Room Chair</option><option value="Conference Room Table">Conference Room Table</option><option value="Couch">Couch</option><option value="Credenza">Credenza</option><option value="Desk">Desk</option><option value="File Cabinet (2 Drawer)">File Cabinet (2 Drawer)</option><option value="File Cabinet (3 Drawer)">File Cabinet (3 Drawer)</option><option value="File Cabinet (4 Drawer)">File Cabinet (4 Drawer)</option><option value="Office Chair">Office Chair</option><option value="Phone">Phone</option><option value="Printer">Printer</option><option value="Projector">Projector</option><option value="Shelf">Shelf</option><option value="Side Chair">Side Chair</option><option value="Table">Table</option></select><br/></td>
<td><label>Location:</label>
<td><input type="text" name="location" id="location" /></td>
<td><label>Search Extra Information</label></td>
<td><input type="text" name="extraInfo" id="extraInfo" /></td>
</tr>
</table>
<input type="submit" name="submit" id="submitSearch" class="btn btn-info" value="Generate Table" />
</form></center>
<span class="search-Table-Return"></span>
<div class="col-md-12 text-center">
<ul class="pagination pagination-lg pager" id="mySortPager"></ul>
</div>
</div>
</div>
</div>
</section>
<!-- Select element-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script type='text/javascript'>
$.fn.pageMe = function(opts){
var $this = this,
defaults = {
perPage: 7,
showPrevNext: false,
hidePageNumbers: false
},
settings = $.extend(defaults, opts);
var listElement = $this;
var perPage = settings.perPage;
var children = listElement.children();
var pager = $('.pager');
if (typeof settings.childSelector!="undefined") {
children = listElement.find(settings.childSelector);
}
if (typeof settings.pagerSelector!="undefined") {
pager = $(settings.pagerSelector);
}
var numItems = children.size();
var numPages = Math.ceil(numItems/perPage);
pager.data("curr",0);
if (settings.showPrevNext){
$('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
}
var curr = 0;
while(numPages > curr && (settings.hidePageNumbers==false)){
$('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
curr++;
}
if (settings.showPrevNext){
$('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
}
pager.find('.page_link:first').addClass('active');
pager.find('.prev_link').hide();
if (numPages<=1) {
pager.find('.next_link').hide();
}
pager.children().eq(1).addClass("active");
children.hide();
children.slice(0, perPage).show();
pager.find('li .page_link').click(function(){
var clickedPage = $(this).html().valueOf()-1;
goTo(clickedPage,perPage);
return false;
});
pager.find('li .prev_link').click(function(){
previous();
return false;
});
pager.find('li .next_link').click(function(){
next();
return false;
});
function previous(){
var goToPage = parseInt(pager.data("curr")) - 1;
goTo(goToPage);
}
function next(){
goToPage = parseInt(pager.data("curr")) + 1;
goTo(goToPage);
}
function goTo(page){
var startAt = page * perPage,
endOn = startAt + perPage;
children.css('display','none').slice(startAt, endOn).show();
if (page>=1) {
pager.find('.prev_link').show();
}
else {
pager.find('.prev_link').hide();
}
if (page<(numPages-1)) {
pager.find('.next_link').show();
}
else {
pager.find('.next_link').hide();
}
pager.data("curr",page);
pager.children().removeClass("active");
pager.children().eq(page+1).addClass("active");
}
};
$(document).ready(function(){
$("#submitForm").click(function(){
$.ajax({type: 'post', data: $('#addform').serialize(), url: "database.php", success: function(info){
$(".the-return").html(
info
);
}});
});
$("#submitSort").click(function(){
$("#mySortPager").html("");
$.ajax({type: 'post', data: $('#sortform').serialize(), url: "database.php", success: function(info){
$(".sort-Table-Return").html(
info
);
$('#mySortedTable').pageMe({pagerSelector:'#mySortPager',showPrevNext:true,hidePageNumbers:false,perPage:10});
}});
});
$("#submitSearch").click(function(){
$("#mySearchPager").html("");
$.ajax({type: 'post', data: $('#searchform').serialize(), url: "database.php", success: function(info){
$(".search-Table-Return").html(
info
);
$('#mySearchTable').pageMe({pagerSelector:'#mySearchPager',showPrevNext:true,hidePageNumbers:false,perPage:10});
}});
});
$('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:10});
});
</script>
</body>
</html>
Any help? How do I only get the data to send from the form I submit from?