Submiting form within model not saving data to database - php

Question

I am trying to do a simple save of data to the database. I have a form in a modal.
When I try to save the data to my database, it will not save. If i place my form out of the modal it will save the data to the database.
I have googled for a solution but found none. The submit button is in my form, so thats not causing the issue.
PHP code:
<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);
session_start();
include 'config.php';
if(!isset($_SESSION['user_id'])) {
header("Location: login.php");
}
//read out data from db
$query_string = "SELECT * FROM tbl_Category";
$query = mysqli_query($con, $query_string);
//save data to db
if(isset($_POST['saveCategory'])){
$category = mysqli_real_escape_string($con, $_POST['category']);
$query = "INSERT INTO tbl_Category(category) VALUES('$category')";
$result = mysqli_query($con, $query);
if(!$result){
echo mysqli_error();
}
else{
$category = '';
echo "YES";
}
}
?>
My config.php file:
<?php
$con = mysqli_connect("localhost", "root", "root", "challenger") or die("Error " . mysqli_error($con));
// if($con){
// echo"There is a connection";
// }
?>
Part of my html code:
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row bg-title">
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
<h4 class="page-title">Category</h4>
</div>
<div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
<ol class="breadcrumb">
<li>Category</li>
<li>Category</li>
</ol>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /row -->
<div class="row">
<div class="col-sm-12">
<div class="white-box">
<h3 class="box-title m-b-0">Overview Category</h3>
<button class="btn btn-danger btn-outline pull-right" data-toggle="modal" data-target="#addCategory">Add Category</button>
<br><br><br>
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>Number</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_assoc($query)){
echo "<tr>";
echo "<td>".$row['category_id']."</td>";
echo "<td>".$row['category']."</td>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
</div>
<!-- MODAL WINDOW -->
<div class="modal fade" id="addCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel1">Add a new category</h4>
</div>
<div class="modal-body">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<div class="form-group">
<label for="recipient-name" class="control-label">Category Name:</label>
<input type="text" class="form-control" id="recipient-name1" name="category">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="saveCategory" data-dismiss="modal">Create Category</button>
</div>
</form>
</div><!-- end modal body -->
</div>
</div>
</div>
<!-- END MODAL WINDOW -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /end Page Content -->

Answer 1

change this
$query = "INSERT INTO tbl_Category(category) VALUES('$category')";
to this
$query = "INSERT INTO tbl_Category(`category`) VALUES('$category')";