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
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
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