I have a page that has 2 forms on it.
It's an inventory system. One form is to add items to your inventory. The second form is to update your qty of each item.
The first one that adds items to the inventory works fine. But the second one will not work.
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
$(document).ready(function(){
$('#inventory_items').submit(function(){
// show that something is loading
$('#response').html("<b><center>Adding to database. Please wait...<br>Page will redirect automatically</center></b>");
$.ajax({
type: 'POST',
url: "<?php echo base_url('inventory/add_to_my_inventory');?>",
data: $(this).serialize()
})
.done(function(data){
// show the response
$('#response').html(data);
alert("Item Added to your Inventory");
window.location = "";
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
<script>
$(document).ready(function(){
$('#inventory_form_update').submit(function(){
// show that something is loading
$('#response').html("<b><center>Adding to database. Please wait...<br>Page will redirect automatically</center></b>");
$.ajax({
type: 'POST',
url: "<?php echo base_url('inventory/update_my_inventory');?>",
data: $(this).serialize()
})
.done(function(data){
// show the response
$('#response').html(data);
alert("Your inventory has been updated");
window.location = "";
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>
</head>
<body>
<div data-role="page" id="page1" data-url="true">
<div data-theme="b" data-role="header">
<a rel="external" href="<?php echo base_url();?>" data-role="button" data-icon="home" data-iconpos="left" data-inline="true">Back</a>
<h3>Mobile Site</h3>
</div>
<div data-role="content">
<p align="right"><a onclick ="javascript:ShowHide('inventory_item_form')" href="javascript:;" >Add items to my inventory</a></div>
<p align="right"><div align="right" id="inventory_item_form" style="DISPLAY: none">
<form id="inventory_items">
<input type="hidden" name="user_id" value="<?php echo $this->session->userdata('userid'); ?>">
<input type="hidden" name="group_id" value="<?php echo $this->uri->segment(3);?>">
<select name="item_id">
<?php
if($get_inventory_items):foreach($get_inventory_items as $GII):?>
<option value="<?php echo $GII->inventory_items_id;?>"><?php echo $GII->inventory_item_name;?></option>
<?php endforeach; else:?>
<b><i>Sorry there is no items in the database at this time</b></i>
<?php endif;?>
</select>
<br><input type="submit" value="Add to my Inventory">
</form>
</div>
</p>
<br>
<?php
if($group_name):foreach($group_name as $GN):?>
<div class="content" "container">
<div style="clear:both;"></div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading"><b><?php echo $GN->inventory_group_name;?>: Inventory</b><?php if($USER_LEVEL == 9){ ?><p class="text-right"><a href="<?php echo base_url();?>inventory/view_inventory_history/<?php echo $GN->inventory_groups_id;?>">Inventory History</a></p></text><?php } ?></div>
<div class="panel-body">
<table class="table table-striped">
<?php endforeach; else:?>
<b><i>Sorry couldn't select the group name</b></i>
<?php endif;?>
</select>
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Qty</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<?php
$date = date("Y-m-d");
?>
<form id="inventory_form_update">
<input type="hidden" name="group_id" value="<?php echo $this->uri->segment(3);?>">
<input type="hidden" name="user_id" value="<?php echo $this->session->userdata('userid'); ?>">
<input type="hidden" name="date" value="<?php echo $date;?>">
<?php
if($inventory):foreach($inventory as $INV):?>
<input type="hidden" name="inventory_id[]" value="<?php echo $INV->inventory_id;?>">
<input type="hidden" name="item_id" value="<?php echo $INV->item_id;?>">
<td><?php echo $INV->inventory_item_name;?></td>
<td><?php echo $INV->description;?></td>
<td><select name="qty[]">
<option value="<?php echo $INV->qty;?>"><?php echo $INV->qty;?></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
</td>
</tr>
<?php endforeach; else:?>
<b><i>You need to add items to your inventory. Check the top right area of the screen.<br>Look for Add Items to my Inventory</b></i>
<?php endif;?>
</tbody>
</table>
<input type="submit" value="Update Inventory"><br>
</form>
</div>
<div data-theme="b" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
The form that has inventory_form_update is the one I'm having issues with.
Even if I remove the iventory_items form I still can't submit for some reason and I'm not sure why
Any ideas?