Why is save button in my modal does not work? - php

Question

osHome.php
this are parts of the code and the "Save Changes" button does not do anything. I want to save the data to the database and my code seem to do nothing. please help me anyone :(
//php code clip
<?php
session_start();
//Check whether the session variable User_name is present or not
if(!isset($_SESSION['User_name']) || (trim($_SESSION['User_name']) == '')) {
header("location: login.php");
exit();
}
include_once('../config.php');
if(isset($_POST['addNewOs'])){
$new_name = $_POST['newOs_name'];
$new_edition = $_POST['newOs_edition'];
$new_version = $_POST['newOs_version'];
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}else {
$sql = "INSERT INTO oslist (oslist_name, oslist_edition, oslist_version)
VALUES ('$new_name', '$new_edition','$new_version')";
mysqli_query($conn, $sql);
echo "<script type='text/javascript'>alert('New record created successfully');</script>";
}
}
?>
//modal
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title" id="myModalLabel">Add New OS</h4>
</div>
<div class="modal-body">
<form method="post" action="osHome.php">
<table style="width: 100%" class="table table-bordered" >
<tr><th><label>OS Name</label></th>
<td colspan="3" ><input type="text" name="newOs_name" class="form-control"></td>
</tr>
<tr><th><label>Edition</label></th>
<td colspan="3" ><input type="text" name="newOs_edition" class="form-control"></td>
</tr>
<tr><th><label>Version</label></th>
<td colspan="3" ><input type="text" name="newOs_version" class="form-control" ></td>
</tr>
</table>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal">Cancel</button>
<input type="submit" name="addNewOs" value="Save Changes" class="btn btn-primary">
</div>
</div>
</div>
</div>
<div id="selectOS"><b>Operating System info will be listed here.</b></div>
the modal and the button are included, maybe there might be some errors that I haven't noticed.. -_-
//button
Add New OS

Answer 1

Your button is outside the </form> tag and is not associated with the form. Either expand what is in the form or use the <button form="formid" > attribute after giving your form an id.
Buttons
Option 1
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title" id="myModalLabel">Add New OS</h4>
</div>
<form method="post" action="osHome.php"><!-- start form here-->
<div class="modal-body">
<table style="width: 100%" class="table table-bordered" >
<tr><th><label>OS Name</label></th>
<td colspan="3" ><input type="text" name="newOs_name" class="form-control"></td>
</tr>
<tr><th><label>Edition</label></th>
<td colspan="3" ><input type="text" name="newOs_edition" class="form-control"></td>
</tr>
<tr><th><label>Version</label></th>
<td colspan="3" ><input type="text" name="newOs_version" class="form-control" ></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal">Cancel</button>
<input type="submit" name="addNewOs" value="Save Changes" class="btn btn-primary">
</div>
</form><!-- end form here-->
</div>
</div>
</div>
Option 2
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title" id="myModalLabel">Add New OS</h4>
</div>
<div class="modal-body">
<form method="post" action="osHome.php" id="myForm"><!-- id = myForm -->
<table style="width: 100%" class="table table-bordered" >
<tr><th><label>OS Name</label></th>
<td colspan="3" ><input type="text" name="newOs_name" class="form-control"></td>
</tr>
<tr><th><label>Edition</label></th>
<td colspan="3" ><input type="text" name="newOs_edition" class="form-control"></td>
</tr>
<tr><th><label>Version</label></th>
<td colspan="3" ><input type="text" name="newOs_version" class="form-control" ></td>
</tr>
</table>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal">Cancel</button>
<input type="submit" name="addNewOs" value="Save Changes" class="btn btn-primary" form="myForm"> <!-- button associated with myform-->
</div>
</div>
</div>
</div>