Good afternoon colleagues, I am in a web design course, this work was presented to me, which is a search page, which should show the user's information in a MODAL, obtaining it from the database.
I managed to make the Modal work, but, it throws all the information of the table, when I try to do the query, it does not show me anything.
I hope you can guide me with this detail
<?php
//Conexion para el Modal
$con =mysqli_connect("localhost", "root","");
$db = mysqli_select_db($con, 'requi');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="./">Search panel</a>
</nav>
<meta charset="UTF=8">
<hr weight= "100%">
<title>Buscar requisicion</titLe>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-5">
<h2>Buscar requisición</h2>
<div class="form-group">
<form class="form-outline">
<input class="form-control mr-sm-2" type="search" placeholder="Ingresa el ID" name ="id" aria-label="Search">
<!--<button class="btn btn-success my-2 my-sm-0" type="submit" name="search">Buscar</button>-->
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" name="smodal">Busqueda</button>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Mail Search</h4>
</div>
<div class="modal-body">
<p>Your data: </p>
</div>
<div>
<table style='border-collapse: collapse;'>
<tr>
<th>Email</th>
<th>Name</th>
<th> </th>
</tr>
<?php
if(isset($_POST['search'])) {
$id = $_POST['id'];
$query = "select * from info WHERE id = '$id'";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result)){
$id = $row['id'];
$correo = $row['correo'];
$nombre = $row['nombre'];
echo "<tr>";
echo "<td>".$correo."</td>";
echo "<td>".$nombre."</td>";
echo "</tr>";
}
}
?>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Related
so i have a while loop and i am fethcing the name and the description of them from my db
so when ever i click on one of the parts i want the modal to display the name of the item that i clicked on in the modal i hope this picture would describe it better
below is the code i have so far
at the moment when i click on the modal i get displayed the name of the item which is first on the list no matter where i click
while($row = mysqli_fetch_assoc($result))
{
$name= $row['name_of_product'];
$description = $row['description']
?>
<a href="#" data-toggle="modal" data-target="#mymodal">
<div class="col-sm-4">
<?php echo name; ?>
<?php echo description ; ?>
</div>
</a>
<div id="mymodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $name; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>
You are not doing things the way you have to do. You are re-creating your mymodal for every iteration of your while loop which is not a better way to achieve what you want.
Follow these steps:
Create your mymodal outside of your while loop.
Pass the ID of current row to a javascript function and populate the data of that id using javascript.
I have set the things which needs to be done. Try the following code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--- display table header row-->
<table style="width:100%">
<tr>
<th>name</th>
<th>description</th>
<th>Action</th>
</tr>
<?php
while($row = mysqli_fetch_assoc($result))
{
$name= $row['name_of_product'];
$description = $row['description'];
$id = $row['id']; // I am assuming that your table has auto incremented primary key column by the name of id, if not then replace that by $row['your_id_column']
?>
<!--- desplay the data in a table row -->
<tr>
<td id="<?php echo "name_".$id; ?>"><?php echo $name; ?></td>
<td id="<?php echo "description_".$id; ?>"><?php echo $description ; ?></td>
<td><div href="#" data-toggle="modal" data-target="#mymodal" onClick="showModal(<?php echo $id ; ?>)">Edit</div></td>
</tr>
<?php } ?>
</table>
<!--- Your modal -->
<div id="mymodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p id="name"></p> <!--- name will be shown here-->
<p id="description"></p><!--- description will be shown here-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
function showModal(id)
{
// setting the values of clicked item in the bootstrap Modal
$("#name").text($("#name_"+id).text());
$("#description").text($("#description_"+id).text());
}
</script>
Looks like you are not serializing the modals... If you wanted to do things that way your code should be something like;
<!-- language-all: lang-html -->
while($row = mysqli_fetch_assoc($result)) {
$procuct_id = $row['ID'];
$name = $row['name_of_product'];
$description = $row['description']
?>
<a href="#" data-toggle="modal" data-target="#mymodal_<?php echo $procuct_id;?>">
<div class="col-sm-4">
<?php echo name; ?>
<?php echo description ; ?>
</div>
</a>
<div id="mymodal_<?php echo $procuct_id;?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $name; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php }
<--
A Better way to do it would be to write a javascript function to show the generic modal window, then run an ajax call to load your info into the "modal-body" div. You would have to pass a unique id to the call in order to have your ajax script hit the db and get the info to display.
It's been almost 4 years but I'm writing for everyone; change data-target(id) as row id.
edited code:
while($row = mysqli_fetch_assoc($result))
{
$name= $row['name_of_product'];
$description = $row['description']
?>
<a href="#" data-toggle="modal" data-target="#<?php echo $row['id']; ?>">
<div class="col-sm-4">
<?php echo name; ?>
<?php echo description ; ?>
</div>
</a>
<div id="<?php echo $row['id']; ?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $name; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>
I have the following database:
| fund_name | fund_description | amount_received | actual_amount
Bootstrap With PHP :
<div class="card-deck">
<?php
$sql = "SELECT * FROM fundraiser;";
$result = mysqli_query($conn,$sql);
while($row = mysqli_fetch_assoc($result)){
echo '<div class="card">
<img class="card-img-top" >
<div class="card-body text-center">
<h5 class="card-title">'.$row['fund_name'].'</h5>
<div class="card-text">
<p>'.$row['fund_description'].'</p>
<h6>Amount:'.$row['actual_amount'].'</h6>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width:'.$row['amount_received'].'%;"aria-
valuenow="0" aria-valuemin="0" aria-
valuemax="1000">
</div>
</div>
<div class="mt-2">
<button type="button" class="btn btn-md btn-primary" data-
toggle="modal" data-target="#exampleModalCenter"> Donate
</button>
</div>
</div>
</div>
</div>';
}
?>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1"
role="dialog" aria-labelledby="exampleModalCenterTitle" aria-
hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal
title</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Enter Amount</label>
<input type="number" class="form-control" id="formGroupExampleInput"
placeholder="Enter Amount">
</div>
<div class="form-group">
<input type="submit" class="form-control btn btn-primary btn-small"
id="formGroupExampleInput" >
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Here In my above code im obtaining data from database and displaying the fundraisers using the bootstrap 4. Each fundraisers is displayed using the cards and each card has a donate button. Donate button links to a modal which has a form to pay amount to fundraisers.
My Question is how to differentiate the donate button of a particular card that payment is going on for that so that i can store 'amount_received' field in database for a particular row of fundraiser?
You can use data-id to store the id of each fundraiser. When a user click on the button to open the modal, you will get the value of data-id. In the modal form I add <input type="hidden" name="fundid" id="fundid"> to store the data-id. Try the following code:
Here is a replicate of your data in php array:
<?php
$fundraiser = array(
array('id'=>1,'fundname'=>"Anyname","description"=>"About fund","actual_amount"=>50.00,'amount_receive'=>40),
array('id'=>2,'fundname'=>"Anyname2","description"=>"About fund3","actual_amount"=>100.00,'amount_receive'=>90),
array('id'=>3,'fundname'=>"Anyname3","description"=>"About fund3","actual_amount"=>20.00,'amount_receive'=>10)
);
?>
The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="card-deck">
<?php
foreach($fundraiser as $key=>$val):
echo '<div class="card">
<img class="card-img-top" >
<div class="card-body text-center">
<h5 class="card-title">'.$val['fundname'].'</h5>
<div class="card-text">
<p>'.$val['description'].'</p>
<h6>Amount:'.$val['actual_amount'].'</h6>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width:'.$val['amount_receive'].'%;"aria-
valuenow="0" aria-valuemin="0" aria-
valuemax="1000">
</div>
</div>
<div class="mt-2">
<button type="button" class="btn btn-md btn-primary fundid" data-toggle="modal" data-target="#exampleModalCenter" data-id="'.$val['id'].'"> Donate
</button>
</div>
</div>
</div>
</div>';
endforeach; ?>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form method="POST" action='updatedb.php'>
<div class="modal-body">
<div class="form-group">
<label for="formGroupExampleInput">Enter Amount</label>
<input type="number" name="amount" class="form-control" id="formGroupExampleInput" placeholder="Enter Amount">
</div>
<input type="hidden" name="fundid" id="fundid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="form-control btn btn-primary btn-small" id="formGroupExampleInput">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
To get data-id and store in the form
<script type="text/javascript">
$('.fundid').on('click', function (e) {
$('#fundid').val($(this).attr("data-id"));
});
We don't want to leave trace of the data-id when we close the modal dialog
$('#exampleModalCenter').on('hidden.bs.modal', function () {
$('#fundid').val('');
});
</script>
When you submit the form, it will submit the data to updatedb.php. In updatedb.php, to get the form data:
the content of updatedb.php
<?php
$fundid = $_POST['fundid'];
$amount = $_POST['amount'];
echo "ID=>".$fundid."<br> Amount=>".$amount;
?>
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 -->
change this
$query = "INSERT INTO tbl_Category(category) VALUES('$category')";
to this
$query = "INSERT INTO tbl_Category(`category`) VALUES('$category')";
I have a link that when the user clicks it, a modal will show containing the following:
<?php
include ('dbcontroller.php');
if(isset($_GET['view_id']))
{
$id=$_GET['view_id'];
$sql = mysqli_query($conn, "SELECT * from press where id='$id'");
$row = mysqli_fetch_array($sql);
?>
<input type="hidden" value="<?php echo $row['id']; ?>" />
<?php echo $row['reason']; ?>
GO BACK
<?php
}
$conn->close();
?>
The code above is what I did so that when the user click the link, it will redirect him to that page. But i want it to be in modal dialog instead since it's not much content.
This is the link that the user clicks. How will I open this link into a modal dialog?
Click to view
I've seen some on this site and elsewhere but all they have is a link without an ID to view modal dialog. I didn't find an issue same with mine so I decided to ask for help.
hey you can use following code to get row value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<br><br><br><br>
<table id="prab" border="1">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td><button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="Jackson"><span class="glyphicon glyphicon-envelope"></span>Invite</button></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>50</td>
<td><button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="smith" ><span class="glyphicon glyphicon-envelope"></span>Invite</button></td>
</tr>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>clicked value </p>
<input type="text" id="valueof" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#prab').click(function(e){
// alert($(e.target).val());
document.getElementById("valueof").value = $(e.target).val();
})
</script>
</body>
</html>
I'm trying to pass my ID from a php file to another php file using $_SESSION but it's not working. It seems that the ID is not being passed. Basically, I use that ID in dbinsert.php to know whether to just update or insert the data I have to the database.
index.php:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="viewscorescss.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>Offsourcing Philippines Inc.</title>
<?php session_start();
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "offsourcing";
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
if((!empty($_POST['firstname'])) &&
(!empty($_POST['lastname'])) &&
(!empty($_POST['middlename']))) {
$fname = $_POST['firstname'];
$lname = $_POST['lastname'];
$mname = $_POST['middlename'];
$sql = mysqli_query($conn, "SELECT * FROM applicants WHERE lastName='$lname' AND fistName='$fname' AND midName='$mname';");
$searchid = mysqli_fetch_assoc($sql);
$id = $searchid['applicantID'];
$_SESSION['id'] = $id;
} ?>
<!--NAVIGATION TAB-->
<div class="row" align="center">
<img src="images/logo2.png" syle="margin-top:20px">
</div>
<hr>
<div class="container" id="testTabs">
<ul class="nav nav-tabs" role="tablist">
<li class= "active">Home</li>
<li>Grammar Test</li>
<li>Customer Service Test</li>
<li>Logical Reasoning Test</li>
<li>Idioms Test</li>
<li>Call Listening Test</li>
<li>View Scores</li>
</ul>
</div>
<div class="tab-content col-md-10" style="margin-left:105px; margin-top:10px">
<div style="background-color: #E9E9E9" class="tab-pane active" id="Home">
<div class="list-group">
<div id="fillup" class="col-md-12" >
<h4><span class="label label-default">Fill in all fields. </span></h4>
<form class="form-horizontal" method="post">
<div class="form-group" >
<label class="col-sm-2 control-label"><small>First name:</small></label>
<div class="col-sm-4">
<input type="text" name="firstname" autocomplete="off" placeholder="Firstname" id="firstname" class="form-control">
</div>
<div class="col-sm-6">
</div>
</div>
<div class="form-group" align="center" >
<label class="col-sm-2 control-label"><small> Last name:</small></label>
<div class="col-sm-4">
<input type="text" name="lastname" autocomplete="off" id="lastname" placeholder="Lastname" class="form-control">
</div>
<div class="col-sm-6">
</div>
</div>
<div class="form-group" align="center" >
<label class="col-sm-2 control-label"><small>Middle name:</small></label>
<div class="col-sm-4">
<input type="text" name="middlename" autocomplete="off" id="middlename" placeholder="middlename" class="form-control">
</div>
<div class="col-sm-6">
</div>
</div>
<button id="proceedToTest" name="proceedToTest" type="submit" class="btn btn-primary">Proceed</button>
</form>
</div>
<div id="tests" style="display:none">
<br>
<button style="margin-left:10px; width: 15%" class= "btn btn-success"><a role="button" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#startGrammar" style="color: rgb(255,255,255); text-decoration: none">Start Online Assessment</a></button>
<br>
<br>
<!-- comment out this part later
<a class="btn btn-primary" role="button" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#startCustomer">Start Customer Service Test</a>
<br>
<a class="btn btn-primary" role="button"data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#startLogical">Start Logical Reasoning Test</a>
<br>
<a class="btn btn-primary" role="button" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#startIdioms">Start Idioms Test</a>
<br>
<a class="btn btn-primary" role="button" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#startCall">Start Call Listening Test</a>
-->
<button style="margin-left:10px; width: 15%" class= "btn btn-primary"><a role="button" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#viewScores" style="color: rgb(255,255,255); text-decoration: none">View Scores</a></button>
<br>
<br>
<img src="images/border.png" width= "100%" height= "65%">
<div class="modal fade bs-example-modal-sm" id="startGrammar" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<b><p> Instructions:</p></b>
<p>You have 8 minutes to answer all questions. You can only take the test once. Click "Start" if you're ready</p>
</div>
<div class="modal-footer">
Start Grammar Test
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- need to link the view scores -->
<div class="modal fade bs-example-modal-sm" id="viewScores" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">View score?</h4>
</div>
<div class="modal-body">
<p>For authorized person only.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" data-backdrop="static" data-keyboard="false" data-toggle="modal" data-target="#passwordcl">Proceed</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="passwordcl" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Enter password</h4>
</div>
<div class="modal-body">
<input type="password" name="pass" placeholder="Enter Password here" id="passcl" class="form-control">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onClick="passCheckcl()">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
dbinsert.php:
<?php
session_start();
$id = $_SESSION['id'];
//DATABASE CONNECTION HERE
?>
You have to put the session_start() and your database connection on top of your html-code. Remove the PHP code for the connection in your <head> and then place it on top of your file.
So it would start like this:
<?php
session_start();
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "offsourcing";
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>
<html>
....
You also misspelled the fistname, it should be firstname. See comment below about this misspelling
$sql = mysqli_query($conn, "SELECT * FROM applicants WHERE lastName='$lname' AND firstName='$fname' AND midName='$mname';");
You may want to look at your input, it's vulnerable to SQL Injections. Use mysqli_real_escape_string or prepare() statement (recommended) to escape the input.