Home - Fastcode

MySQL Pagination using Range Slider

Create a pagination for MySQL output with many records using a range slider, AJAX and Vanilla JS

index.php

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Range Slider Pagination</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<body>
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-1">
        <select class="custom-select m-3" id="selRecordsPerPage">
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select>
      </div>
      <div class="col-1 text-center" style="font-size: 1.25em;">
        <span class="badge badge-primary mt-4">
          <span id="spanPage">1</span> of <span id="spanTotalPages"></span>
        </span>
      </div>
      <div class="col-10">
        <input type="range" class="custom-range mt-4" title="1" min="1" max="100" step="1" value="1" id="sliderPage" />   
      </div>
    </div>
    <div class="row">
      <div class="col">
        <table class="table table-hover">
          <thead>
            <tr>
              <th style="width: 10%;">ID</th>
              <th style="width: 22.5%;">First Name</th>
              <th style="width: 22.5%;">Last Name</th>
              <th style="width: 22.5%;">Email</th>
              <th style="width: 22.5%;">Birthday</th>
            </tr>
          </thead>
          <tbody id="tbData">
            
          </tbody>
        </table>
      </div>
    </div>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
  
  <script>
    
    getRecordsPerPage(1, document.getElementById('selRecordsPerPage').value);

queries.php

Chart.js, MySQL and AJAX

Dynamically update Chart.js using AJAX and MySQL

chart-js.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Chart.js, MySQL and AJAX</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/4.5.0/materia/bootstrap.min.css">
</head>

<body>
  
  <div class="container">
    <div class="row">
      <div class="col text-center" style="margin-top: 25px; margin-bottom: 25px;">
        <select class="custom-select" id="selDept">
          <option value="IT Department">IT Department</option>
          <option value="HR Department">HR Department</option>
          <option value="Accounting Department">Accounting Department</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col" id="divChart">
        
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.5.1.js"
          integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
          crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
          integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
          crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
  
  <script>

let xhr = new XMLHttpRequest();
      xhr.open('POST', 'chart-js-queries.php');
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr.send(department);
      xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
          document.getElementById('divChart').innerHTML = '<canvas id="cnvChart"></canvas>';

let r = JSON.parse(this.response);

let chart_settings = {
            type: "bar",
            data: {
              labels: r.month.split(','),
              datasets: [{
                label: r.department,
                backgroundColor: "#444",
                borderColor: "#444",
                data: r.personnel.split(',')
              }]
            },
            options: {
              legend: {
                display: true
              }
            }
          }
          let chart = new Chart(document.getElementById('cnvChart'), chart_settings);
        }
      }
    }
  </script> 
</body>
</html>

chart-js-queries.php

Bootstrap 4 Datepicker and MySQL Tutorial

Output MySQL data on a Bootstrap 4 table using a Bootstrap 4 datepicker, AJAX and Vanilla Javascript

datepicker.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MySQL and BS Datepicker</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/darkly/bootstrap.min.css">
</head>
<body>

<div class="row">
    <div class="col p-4">
      <table class="table table-borderless table-hover">
        <thead class="text-warning">
          <tr>
            <th>Full Name</th>
            <th>Department</th>
            <th>Job Description</th>
            <th>Location</th>
          </tr>
        </thead>
        <tbody id="tbDetails">
        </tbody>
      </table>
    </div>
  </div>

let selected_date = 'selected_date=' + document.getElementById('txtDate').value;

let xhr = new XMLHttpRequest();
    xhr.open('POST', 'datepicker-queries.php');
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
      if(xhr.readyState == 4 && xhr.status == 200) document.getElementById('tbDetails').innerHTML = xhr.response;
    }
    xhr.send(selected_date);

document.getElementById('txtDate').addEventListener('change', function() {
      let selected_date = 'selected_date=' + document.getElementById('txtDate').value;

let xhr = new XMLHttpRequest();
      xhr.open('POST', 'datepicker-queries.php');
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) document.getElementById('tbDetails').innerHTML = xhr.response;
      }
      xhr.send(selected_date);
    });

</script>

</body>
</html>

datepicker-queries.php

MySQL Pagination using Range Slider

Create a pagination for MySQL output with many records using a range slider, AJAX and jQuery

index.php

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Range Slider Pagination</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<body>
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-1">
        <select class="custom-select m-3" id="selRecordsPerPage">
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select>
      </div>
      <div class="col-1 text-center" style="font-size: 1.25em;">
        <span class="badge badge-primary mt-4">
          <span id="spanPage">1</span> of <span id="spanTotalPages"></span>
        </span>
      </div>
      <div class="col-10">
        <input type="range" class="custom-range mt-4" title="1" min="1" max="100" step="1" value="1" id="sliderPage" />   
      </div>
    </div>
    <div class="row">
      <div class="col">
        <table class="table table-hover">
          <thead>
            <tr>
              <th style="width: 10%;">ID</th>
              <th style="width: 22.5%;">First Name</th>
              <th style="width: 22.5%;">Last Name</th>
              <th style="width: 22.5%;">Email</th>
              <th style="width: 22.5%;">Birthday</th>
            </tr>
          </thead>
          <tbody id="tbData">
            
          </tbody>
        </table>
      </div>
    </div>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
  
  <script>
    getRecordsPerPage(1, $('#selRecordsPerPage').val());
    
    $('body').on('change', '#selRecordsPerPage, #sliderPage', function() {
      if(this.id == 'selRecordsPerPage') {
        getRecordsPerPage(1, $('#selRecordsPerPage').val());
        $('#sliderPage').val(1);
        $('#spanPage').val(1);
      } else {
        getRecordsPerPage($('#sliderPage').val(), $('#selRecordsPerPage').val());
        $('#spanPage').text($('#sliderPage').val());
      }
    });
    
    function getRecordsPerPage(page, recordsPerPage) {
      $('#sliderPage').attr('title', page);
      $.ajax({
        url: 'queries.php',
        type: 'post',
        data: { page, recordsPerPage },
        success: function(data) {
          let d = JSON.parse(data);
          $('#tbData').html(d.dataTable);
          $('#sliderPage').attr('max', d.totalPages);
          $('#spanTotalPages').text(d.totalPages);
        }
      });
    }
  </script>
  
</body>
</html>

queries.php

Create Bootstrap Tabs Dynamically

Dynamically add or remove Bootstrap tabs using jQuery's .append() and .remove()

index.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>Dynamic BS Tabs</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/4.5.0/slate/bootstrap.min.css">
</head>
  
  <div class="container">
    <div class="row">
      <div class="col-2 text-center p-5">
        <a href="#" class="d-block p-2 menu">Profile</a>
        <a href="#" class="d-block p-2 menu">Messages</a>
        <a href="#" class="d-block p-2 menu">Contacts</a>
        <a href="#" class="d-block p-2 menu">Calendar</a>
        <a href="#" class="d-block p-2 menu">Settings</a>
      </div>
      <div class="col-10 p-5" id="divMain">
      </div>
    </div>
  </div>

<body>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
  <script>
    
    $(document).ready(function(){

$("body").on("click", ".menu", function(){
        
        if(!$("#tabs").length){
          $("#divMain").html(
            `<ul class="nav nav-tabs" id="tabs"></ul>
            <div class="tab-content border border-secondary" id="contents"></div>`
          );
        }
        
        var menu = $(this).text();
        if(!$(`#tab${menu}`).length){
          $("#tabs").append(
            `<li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#content${menu}" id="tab${menu}">
                ${menu} <b class="closeTab text-danger ml-4">x</b>
              </a>
            </li>`
          );
          $("#contents").append(
            `<div class="tab-pane active p-4" id="content${menu}">
              <p>This is the content of your <b>${menu}</b> tab.</p>
              <p>A sample description of this content. Good for menus.</p>
            </div>`
          );
          $(`#tab${menu}`).tab("show");
        }else{
          $(`#tab${menu}`).tab("show");
        }
        
      });
      
      $("body").on("click", ".closeTab", function(){
        $(this).parent().parent().remove();
        $($(this).parent().attr("href")).remove();
        
        if(!$("#tabs li").length){
          $("#divMain").html("");
        }else{
          var first_menu_id = $(".nav-item").first().children().attr("id");
          $(`#${first_menu_id}`).tab("show");
        }
      });
        
    });
    
  </script>
  
</body>
</html>

MySQL, Chart.js and AJAX Tutorial

Integrate Chart.js to your website and change it's data using AJAX, jQuery and MySQL. Create a very basic bar graph using Chart.js, but this time, we will not be coding the settings on the script.

index.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>MySQL and Chart.js</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/4.5.0/materia/bootstrap.min.css">
</head>

<body>

<div class="container">
    <div class="row">
      <div class="col text-center" style="margin-top: 25px; margin-bottom: 25px;">
        <select class="custom-select" id="selDepartment">
          <option value="IT Department" selected="">IT Department</option>
          <option value="HR Department">HR Department</option>
          <option value="Accounting Department">Accounting Department</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col" id="divGraph">
        
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
  <script>
    
    $(document).ready(function(){
      $.ajax({
        url: "queries.php",
        type: "post",
        data: {
          department: "IT Department"
        },
        success: function(bar_graph){
          $("#divGraph").html(bar_graph);
          $("#graph").chart = new Chart($("#graph"), $("#graph").data("settings"));
        }
      });
      
      $("#selDepartment").change(function(){
        $.ajax({
          url: "queries.php",
          type: "post",
          data: {
            department: $(this).val()
          },
          success: function(bar_graph){
            $("#divGraph").html(bar_graph);
            $("#graph").chart = new Chart($("#graph"), $("#graph").data("settings"));
          }
        });
      });
    });
  
  </script> 
  
</body>
</html>

queries.php

<?php

$mysqli = new MySQLi("localhost", "root", "", "info");
if($mysqli->connect_errno){
  echo "Failed to connect to MySQL: " . $mysqli->connect_errno;
}

isset($_POST["department"]) ? $department = $_POST["department"] : $department = "";

$personnel = "";
$month = "";
$bar_graph = "";

$getData = "SELECT * FROM employees WHERE department = '$department'";
$rows = $mysqli->query($getData);
$rowcount = $rows->num_rows;
if($rowcount > 0){
  while($r = $rows->fetch_assoc()){
    $personnel .= '"' . $r["personnel"] . '",';
    $month .= '"' . $r["month"] . '",';
  }
}

$personnel = substr($personnel, 0, -1);
$month = substr($month, 0, -1);
$bar_graph = '
<canvas id="graph" data-settings=
\'{
"type": "bar",
"data": 
{
  "labels": [' . $month . '],
  "datasets": 
  [{
    "label": "' . $department . ' Personnel",
    "backgroundColor": "#000000",
    "borderColor": "#000000",
    "data": [' . $personnel . ']
  }]
},
"options":
{
  "legend":
  {
    "display": true
  }
}
}\'
></canvas>';

echo $bar_graph;

?>

Bootstrap 4 Datepicker and MySQL Tutorial

Output MySQL data on a Bootstrap 4 table using a Bootstrap 4 datepicker, AJAX and jQuery

index.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MySQL and BS Datepicker</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/darkly/bootstrap.min.css">
</head>
<body>
  
  <div class="row">
    <div class="col text-center p-4">
      <input class="form-control-lg" type="date" id="txtDate" value="2020-09-19">
    </div>
  </div>
  
  <div class="row">
    <div class="col p-4">
      <table class="table table-borderless table-hover">
        <thead class="text-warning">
          <tr>
            <th>Full Name</th>
            <th>Department</th>
            <th>Job Description</th>
            <th>Location</th>
          </tr>
        </thead>
        <tbody id="tbDetails">
        </tbody>
      </table>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>  
  
  <script>

$(document).ready(function(){
      $.ajax({
        url: "queries.php",
        type: "post",
        data: {
          selected_date: $("#txtDate").val()
        },
        success: function(table_rows){
          $("#tbDetails").html(table_rows);
        }
      });
    });
    
    $("body").on("change", "#txtDate", function(){
      $.ajax({
        url: "queries.php",
        type: "post",
        data: {
          selected_date: $("#txtDate").val()
        },
        success: function(table_rows){
          $("#tbDetails").html(table_rows);
        }
      });
    });
    
  </script>
  
</body>
</html>

queries.php

<?php
$mysqli = new MySQLi("localhost", "root", "", "info");
if($mysqli->connect_errno){
  echo "Failed to connect to MySQL: " . $mysqli->connect_errno;
}

isset($_POST["selected_date"]) ? $selected_date = $_POST["selected_date"] : $selected_date = "";

$table_rows = "";

$getDetails = "SELECT * FROM schedule WHERE schedule_date = '$selected_date' ORDER BY full_name";
$rows = $mysqli->query($getDetails);
$rowcount = $rows->num_rows;
if($rowcount > 0){
  while($r = $rows->fetch_assoc())  {
    $table_rows .= "<tr>";
    $table_rows .= "<td style='width: 25%;'>" .$r["full_name"]. "</td>";
    $table_rows .= "<td style='width: 25%;'>" .$r["department"]. "</td>";
    $table_rows .= "<td style='width: 25%;'>" .$r["job_description"]. "</td>";
    $table_rows .= "<td style='width: 25%;'>" .$r["location"]. "</td>";
    $table_rows .= "</tr>";
  }
}
else{
  $table_rows .= "<tr>";
  $table_rows .= "<td style='width: 25%;' colspan='4'>No data found</td>";
  $table_rows .= "</tr>";
}
echo $table_rows;
?>

JSON, AJAX, MySQL and Bootstrap 4 Modal Tutorial

Output MySQL data on a pop-up bootstrap modal using PHP array, JSON.parse, jQuery and an AJAX request. This will also teach you how to create links with unique ID attributes and use the value of that ID attribute to output specific MySQL data.

index.php

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JSON Array</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/4.5.0/slate/bootstrap.min.css">
</head>
<body>
  
  <div class="container-fluid">
    <div class="row p-5">
      <div class="col-2 mt-2 p-5 border border-warning" id="divNames">
      </div>
    </div>
  </div>
  
  <div class="modal fade in" role="dialog" id="divDetails">
    <div class="modal-dialog modal-md">
      <div class="modal-content">
      
        <div class="modal-header">
          <div class="row">
            <div class="col-12">
              <span class="badge badge-dark">Name</span> <span id="spnName"></span>
            </div>
          </div>
        </div>
      
        <div class="modal-body">
          <div class="row">
            <div class="col-12">
              <p><span class="badge badge-danger">Member Details</span></p>
              <p><span class="badge badge-dark">Gender:</span> <span id="spnGender"></span></p>
              <p><span class="badge badge-dark">Age:</span> <span id="spnAge"></span></p>
              <p><span class="badge badge-dark">Address</span> <span id="spnAddress"></span></p>
              <p><span class="badge badge-dark">Occupation</span> <span id="spnOccupation"></span></p>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>

queries.php

<?php
$mysqli = new MySQLi("localhost", "root", "", "people");
if($mysqli->connect_errno){
  echo "Failed to connect to MySQL: " . $mysqli->connect_errno;
}

isset($_POST["mode"]) ? $mode = $_POST["mode"] : $mode = "";
isset($_POST["link_id"]) ? $link_id = $_POST["link_id"] : $link_id = "";

if($mode == "get names"){
  $name_list = "";
  
  $qry = "SELECT ID, full_name FROM names";
  $rows = $mysqli->query($qry);
  $rowcount = $rows->num_rows;
  
  if($rowcount > 0){
    while($r = $rows->fetch_assoc()){
      $id = $r["ID"];
      $full_name = $r["full_name"];
      
      $name_list .= "<a href='#' class='names' id='$id'>$full_name</a>";
      $name_list .= "<br>";
    }
  }
  echo $name_list;
}

if($mode == "get details"){
  $qry = "SELECT * FROM names WHERE ID = $link_id";
  $rows = $mysqli->query($qry);
  $rowcount = $rows->num_rows;
  
  if($rowcount > 0){
    $r = $rows->fetch_assoc();
    
    $arr = array(
      "full_name" => $r["full_name"],
      "age" => $r["age"],
      "gender" => $r["gender"],
      "address" => $r["address"],
      "occupation" => $r["occupation"]
    );
    
    echo json_encode($arr);
  }
}
?>

Create Unique HTML Elements

Create unique HTML elements using jQuery, AJAX and MySQL and generate links with unique ID using jQuery and MySQL

index.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Links from Ajax</title>
</head>

<body>
  <button id="getNames">Get Names</button>
  
  <div id="divLinks" style="width: 300px; height: 300px; border: 2px outset black; margin: 5px; padding: 5px;">
  </div>
  
  <div id="divDetails" style="width: 300px; height: 300px; border: 2px outset black; margin: 5px; padding: 5px;">
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $("body").on("click", "#getNames", function(){
      $.ajax({
        url: "queries.php",
        type: "post",
        data: {
          mode: "get names as links"
        },
        success: function(data){
          $("#divLinks").html(data);
        }
      });
    });
    
    $("body").on("click", ".names", function(){
      var link_id = this.id;
      var names_id = link_id.substr(link_id.indexOf("-") + 1);
      $.ajax({
        url: "queries.php",
        type: "post",
        data: {
          mode: "get details of clicked name",
          names_id: names_id
        },
        success: function(data){
          $("#divDetails").html(data);
        }
      });
    });
  </script>
  
</body>
</html>

queries.php

<?php
$mysqli = new MySQLi("localhost", "root", "", "people");
if($mysqli->connect_errno){
  echo "Failed to connect to MySQL: " . $mysqli->connect_error;
}

isset($_POST["mode"]) ? $mode = $_POST["mode"] : $mode = "";
isset($_POST["names_id"]) ? $names_id = $_POST["names_id"] : $names_id = "";

if($mode == "get names as links"){
  $link_list = "";
  
  $qry = "SELECT * FROM names";
  $rows = $mysqli->query($qry);
  $rowcount = $rows->num_rows;
  
  if($rowcount > 0){
    while($r = $rows->fetch_assoc()){
      $id = $r["ID"];
      $full_name = $r["full_name"];
      
      $link_list .= "<a href='#' class='names' id='link-$id'>$full_name</a>";
      $link_list .= "<br>";
    }
  }
  echo $link_list;
}

if($mode == "get details of clicked name"){
  $details = "";
  
  $qry = "SELECT * FROM names WHERE ID = $names_id";
  $rows = $mysqli->query($qry);
  $rowcount = $rows->num_rows;
  
  if($rowcount > 0){
    $r = $rows->fetch_assoc();
    
    $full_name = $r["full_name"];
    $age = $r["age"];
    $gender = $r["gender"];
    $address = $r["address"];
    
    $details .= "Full Name : $full_name <br>";
    $details .= "Age : $age <br>";
    $details .= "Gender : $gender <br>";
    $details .= "Address : $address";
  }
  echo $details;
}
?>

Need codes and fast?

Then scroll down to view my code snippets.

JS Codes

jQuery Codes

About

Contact Me