Scribd
Upload
32 views

Lab 3

The document describes an HTML/CSS form that allows a user to enter their name, email, phone, and city. It uses AJAX to submit the form data to a MySQL database without refreshing the page. Data can also be fetched from the database and displayed in a table using AJAX. The form uses jQuery, Bootstrap, and PHP scripts to connect to the database and perform insert and select queries.

Uploaded by

Mushahid khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
32 views

Lab 3

The document describes an HTML/CSS form that allows a user to enter their name, email, phone, and city. It uses AJAX to submit the form data to a MySQL database without refreshing the page. Data can also be fetched from the database and displayed in a table using AJAX. The form uses jQuery, Bootstrap, and PHP scripts to connect to the database and perform insert and select queries.

Uploaded by

Mushahid khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Group Members: Mushahid khan (215195)

Submitted To: Sir Haris

Subject: FSD Lab

Date: 13-03-2024

HTML/CSS DESIGN:

<html>
<head>
<title>Insert data in MySQL database using Ajax</title>
<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.2.1/jquery.min.js"></
script>
</head>
<body>
<div style="margin: auto;width: 60%;">
<div class="alert alert-success alert-dismissible" id="success"
style="display:none;">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
</div>
<form id="fupForm" name="form1" method="post">
<div class="form-group">
<label for="email">Name:</label>
<input type="text" class="form-control" id="name"
placeholder="Name" name="name">
</div>
<div class="form-group">
<label for="pwd">Email:</label>
<input type="email" class="form-control" id="email"
placeholder="Email" name="email">
</div>
<div class="form-group">
<label for="pwd">Phone:</label>
<input type="text" class="form-control" id="phone"
placeholder="Phone" name="phone">
</div>
<div class="form-group" >
<label for="pwd">City:</label>
<select name="city" id="city" class="form-control">
<option value="">Select</option>
<option value="WahCantt">WahCantt</option>
<option value="Rawalpindi">Rawalpindi</option>
<option value="Lahore">Lahore</option>
</select>
</div>
<input type="button" name="save" class="btn btn-primary" value="Save
to database" id="butsave">
</form>
<br>

</div>

<script>
$(document).ready(function() {
$('#butsave').on('click', function() {
$("#butsave").attr("disabled", "disabled");
var name = $('#name').val();
var email = $('#email').val();
var phone = $('#phone').val();
var city = $('#city').val();
if(name!="" && email!="" && phone!="" && city!=""){
$.ajax({
url: "save2.php",
type: "POST",
data: {
name: name,
email: email,
phone: phone,
city: city
},
cache: false,
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$("#butsave").removeAttr("disabled");
$('#fupForm').find('input:text').val('');
$("#success").show();
$('#success').html('Data added successfully !');
}
else if(dataResult.statusCode==201){
alert("Error occured !");
}

}
});
}
else{
alert('Please fill all the field !');
}
});
});
</script>

</body>
</html>

DATABASE.PHP
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "formdb";

$conn = mysqli_connect($servername,$username, $password,$dbname);


?>
DATAFORM.PHP:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h1 style="font-style: italic;">Fetch Data from Database using AJAX </h1>


<br><br>
<button class="btn btn-primary" id="showData">Show User Data</button>
<br><br>

<div id="table-container"></div>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></
script>
<script type="text/javascript" src="ajax-script.js"></script>
<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.2.1/jquery.min.js"></
script>

</body>
<script type="text/javascript">
$(document).on('click','#showData',function(e){
$.ajax({
type: "GET",
url: "fetch.php",
dataType: "html",
success: function(data){
$("#table-container").html(data);

}
});
});
</script>
</html>
Fetch.php
<?php

include("database-5.php");
$db=$conn;
// fetch query
function fetch_data(){
global $db;
$query="SELECT * from user_dataN ORDER BY id DESC";
$exec=mysqli_query($db, $query);
if(mysqli_num_rows($exec)>0){
$row= mysqli_fetch_all($exec, MYSQLI_ASSOC);
return $row;

}else{
return $row=[];
}
}
$fetchData= fetch_data();
show_data($fetchData);

function show_data($fetchData){
echo '<table border="1">
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>

</tr>';

if(count($fetchData)>0){
$sn=1;
foreach($fetchData as $data){

echo "<tr>
<td>".$sn."</td>
<td>".$data['name']."</td>
<td>".$data['email']."</td>
<td>".$data['phone']."</td>
<td>".$data['city']."</td>

</tr>";

$sn++;
}
}else{
echo "<tr>
<td colspan='7'>No Data Found</td>
</tr>";
}
echo "</table>";
}

?>
Save2.php
<?php
include 'database-5.php';
$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$city=$_POST['city'];
$sql ="INSERT INTO user_dataN (`name`,`email`,`phone`,`city`)
VALUES ('".$name."','".$email."','".$phone."','".$city."')";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
}
else {
echo json_encode(array("statusCode"=>201));
}
mysqli_close($conn);

?>
Output:

You might also like