Bootstrap Modal not Working on Click - php

Question

I'm trying to get the button to open up a modal on click of the button with label "Select Quantity and Sizes*:" but for some reason I can't get this working, I'll appreciate a heads up, Please note that I included additional jQuery for the updateSizes() function found in the modal in the footer.php file already.
I believe your expertise will help me solve this, i'm kinda stuck here, I copied the modal on getbootstrap . com,
The modal on my page is found just below the comment:
<-- Modal for Select Quantity and Sizes -->
PS: this is just a personal test project to sharpen up my skills, so security is undermined though a very important aspect.
<?php
require_once $_SERVER['DOCUMENT_ROOT'] . '/eCommerce/core/init.php';
include 'includes/head.php';
include 'includes/navigation.php';
if (isset($_GET['add'])) {
$brandQuery = $db->query("SELECT * FROM brand ORDER BY brand");
/* making query and putting in alphabetical order */
$parentQuery = $db->query("SELECT * FROM categories WHERE parent=0 ORDER BY Category");
?>
<h2 class="text-center">Add a New Product</h2>
<!-- Product upload form -->
<form action="products.php?add=1" method="POST" enctype="multipart/form-data">
<div class="form-group col-sm-3">
<label for="title">Title*:</label>
<input type="text" class="form-control" name="title" id="title" value="<?= ((isset($_POST['title'])) ? sanitize($_POST['title']) : ''); ?>">
</div><!-- end div Title -->
<div class="form-group col-sm-3">
<label for="brand">Brand*:</label>
<select class="form-control" id="brand" name="brand">
<option value=""<?= ((isset($_POST['brand']) && $_POST['brand'] == '') ? ' selected' : ''); ?>></option>
<?php while ($brand = mysqli_fetch_assoc($brandQuery)): ?>
<option value="<?= $brand['id'] ?>"<?= ((isset($_POST['brand']) && $_POST['brand'] == $brand['id']) ? ' selected' : ''); ?>><?= $brand['brand']; ?></option>
<?php endwhile; ?>
</select>
</div> <!-- end div Select Brand -->
<div class="form-group col-sm-3">
<label for="parent">Main Category*:</label>
<select class="form-control" id="parent" name="parent">
<option value=""<?= ((isset($_POST['parent']) && $_POST['parent'] == '') ? ' selected' : ''); ?>></option>
<?php while ($parent = mysqli_fetch_assoc($parentQuery)): ?>
<option value="<?= $parent['id'] ?>"<?= ((isset($_POST['parent']) && $_POST['parent'] == $parent['id']) ? ' selected' : ''); ?>><?= $parent['category']; ?></option>
<?php endwhile; ?>
</select>
</div> <!-- end div Select Main Category -->
<div class="form-group col-sm-3">
<label for="child">Child Category*:</label>
<select class="form-control" id="child" name="child">
</select>
</div> <!-- end div Select child Category -->
<div class="form-group col-sm-3">
<label for="price">Price*:</label>
<input type="text" id="price" name="price" class="form-control" value="<?= ((isset($_POST['price'])) ? $_POST['price'] : ''); ?>">
</div> <!-- end div Price -->
<div class="form-group col-sm-3">
<label for="list_price">List Price*:</label>
<input type="text" id="list_price" name="list_price" class="form-control" value="<?= ((isset($_POST['list_price'])) ? $_POST['list_price'] : ''); ?>">
</div> <!-- end div List Price -->
<div class="form-group col-sm-3">
<label for="price">Select Quantity and Sizes*:</label>
<button type="button" class="btn btn-success form-control" onclick="jQuery('#sizesModal').modal('toggle');return true;">Quantity $ Sizes</button>
</div> <!-- end div Select Quantity and Prices -->
<div class="form-group col-sm-3">
<label for="sizes">Sizes and Quantity Preview*:</label>
<input type="text" id="sizes" name="sizes" class="form-control" value="<?= ((isset($_POST['sizes'])) ? $_POST['sizes'] : ''); ?>" readonly>
</div> <!-- end div Select Sizes and Qty Preview -->
<div class="form-group col-sm-6">
<label for="photo">Product Photo: </label>
<input type="file" name="photo" id="photo" class="form-control">
</div> <!-- end div Product Photo -->
<div class="form-group col-sm-6">
<label for="description">Product Description: </label>
<textarea id="description" name="description" class="form-control" rows="6"><?= ((isset($_POST['description'])) ? sanitize($_POST['description']) : ''); ?></textarea>
</div> <!-- end div Product Description-->
<div class="form-group pull-right">
<input type="submit" value="Add Product" class="form-control btn btn-success pull-right">
</div>
<div class="clearfix"></div>
</form>
<!-- Modal for Select Quantity and Sizes -->
<div class="modal fade details-1" id="sizesModal" tabindex="-1" role="dialog" aria-labelledby="ModalSizesQuantityLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" onclick="closeModal()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center">Select quantity & Sizes</h4>
</div> <!-- end modal-header -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
...
</div>
</div> <!-- end container-fluid -->
</div> <!-- end modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="updateSizes();jQuery('#sizesModal').modal('toggle');return false;">Save changes</button>
</div>
</div><!-- end modal content -->
</div> <!-- end modal-dialog modal lg -->
</div> <!-- End Modal for Size & Quantity -- >
<?php
}else {
$sql = "SELECT*FROM products WHERE deleted = 0";
$product_results = $db->query($sql);
if (isset($_GET['featured'])) {
$id = (int) $_GET['id'];
$featured = (int) $_GET['featured'];
$sql_feature = "UPDATE products SET feature = '$featured' WHERE id='$id' ";
$db->query($sql_feature);
header('Location:products.php');
}
?>
<h2 class="text-center">Products</h2>
Add Product <div class="clearfix"></div>
<hr>
<!-- Table for products -->
<table class="table table-bordered table-condensed table-striped">
<thead>
<th></th>
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Featured</th>
<th>Sold</th>
</thead>
<tbody>
<?php
while ($product = mysqli_fetch_assoc($product_results)):
/* setting category of child element */
$childID = $product['categories'];
$category_sql = "SELECT * FROM categories WHERE id = '$childID' ";
$category_result = $db->query($category_sql);
$category_child = mysqli_fetch_assoc($category_result);
$parentID = $category_child['parent'];
$parent_sql = "SELECT * FROM categories WHERE id ='$parentID' ";
$parent_results = $db->query($parent_sql);
$parent_fetch = mysqli_fetch_assoc($parent_results);
$category = $parent_fetch['category'] . '-' . $category_child['category'];
?>
<tr>
<td>
<span class="glyphicon glyphicon-pencil"></span>
<a href="products.php?delete=<?= $product['id']; ?>" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-trash">
</span></a>
</td>
<td><?= $product['title']; ?></td>
<td><?= money($product['price']); ?></td>
<td><?= $category; ?></td>
<td> <span class="glyphicon glyphicon-<?= (($product['feature'] == 1) ? 'minus' : 'plus'); ?>"></span>&nbsp <?= (($product['feature'] == 1) ? 'Featured Product' : ''); ?>
</td>
<td>0</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<?php } include 'includes/footer.php'; ?>

Answer 1

Use bootstrap's data-toggle attribute instead on onclick attribute.
<button type="button" class="btn btn-success form-control"
onclick="jQuery('#sizesModal').modal('toggle');return true;">
Quantity $ Sizes
</button>
<button type="button" class="btn btn-success form-control"
data-toggle="modal" data-target="#sizesModal">
Quantity $ Sizes
</button>
Check out this link for detail explanation
Bootstrap Modal