General |  Social Media |  Miscellaneous
srcraft blog logo
  • Business
  • News
  • Shopping
  • Travel
  • Disease
  • Pets
  • Life
  • Health
  • Technology
  • Category
  • Contact Us
Latest Blog : 
☛ Best Europe cities to travel with Toddlers ☛ Make Your Limousine Ride Even More Special: 10 Top Ideas ☛ Leverage SEO Services to Secure Success for Your Storage Company ☛ Telerehab physical therapy : healing at your fingertips ☛ 10 Best Activities in India for Thrills and Relaxation ☛ Wedding Limos That Redefine Luxury Transportation ☛ Flying with Family: A Guide to Kid-Friendly Travel from Calgary to Kelowna ☛ How To Protect Your Privacy Online? [Complete Guide] ☛ Help and kindness is the biggest religion ☛ Burning bamboo wood is prohibited in the scriptures, Why 
Home > Innovation & Technology > PHP

How to get database records on select options menu using Ajax and PHP


You want to select one drop-down box then data will appear in the second drop-down. How it possible? It is very simple. Here we are going to tell you, how to get a relative drop-down menu or dynamic select options menu using Ajax, PHP, and MySQL.

For creating a dynamic select options menu using Ajax and PHP we will use only three steps.

  1. Make a PHP file(.php) for writing html script of select option menu
  2. Make a CSS file(.css) for attractive design and define styles for body, display box and select option menu
  3. Make a PHP file(.php) for creating a connection with phpmyadmin database

Step 1. Make a PHP file(.php) for writing html script of select option menu

In this step, we will make a PHP file in dream viewer or another editor with .php extension after that we will save it with a name of dropdown.php

In this file, we will get value from a first drop-down menu and we will pass this value to fetchFunction() function by onchange event. fetchFunction() function will pass an ajax request to fetchRecords.php file and it will get the result from fetchRecords.php file in function (response) after that it will insert ajax result in our second select options menu.

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href=" style.css">

<script type="text/javascript">

function fetchFunction(val)

{

 $.ajax({

 type: 'post',

 url: 'fetchRecords.php',

 data: {

  fetch_value:val

 },

 success: function (response) {

  document.getElementById("newSelectMenu").innerHTML=response;

 }

 });

}

</script>

 

</head>

<body>

 

<center>

<div id="selectBox">

<p id="blog_heading">How to get database records on select option menu using ajax and PHP</p>

 <select onchange="fetchFunction(this.value);">

  <option>Select option</option>

  <?php

                if($_SERVER['SERVER_NAME'] == 'localhost' || $_SERVER['SERVER_NAME'] == '127.0.0.1' )

                {

                $db = mysqli_connect('localhost','root','','db_name') or die('Error connecting to MySQL server.');

                }

                else

                {

                $db = mysqli_connect('servername','username,'password','db_name') or die('Error connecting to MySQL server.');

                }

 

  $query=mysqli_query($db, "select * from tablename");

  while($row=mysqli_fetch_array($query))

  {

   echo "<option>".$row['title']."</option>";

  }

 ?>

 </select>

 

 <select id="newSelectMenu"></select>

                 

</div>    

</center>

</body>

</html>

 

Step 2. Make a CSS file(.css) for attractive design and define styles for body, display box and select option menu

We will make a CSS file for an eye-catching look and we will save it with the name of style.css.

body

{

 background-color:#efeff5;

 font-family:Arial, Helvetica, sans-serif;

font-weight: normal;

font-variant: small-caps;

}

#blog_heading

{

 text-align:center;

 font-size:25px;

 color:white;

}

#selectBox

{

 margin-top:150px;

 width:500px;

 background-color:#39004d;

 color:white;

 padding:10px;

 height:250px;

 border-radius:5px;

 box-shadow:0px 0px 10px 0px #c933ff;

}

select

{

 width:400px;

 height:50px;

 border:1px solid #39004d;

 margin-top:20px;

 padding:10px;

 font-size:16px;

 color:#c933ff;

 border-radius:5px;

}

 

Step 3. Make a PHP file(.php) for creating a connection with phpmyadmin database

Now we will make a PHP file for connecting to a database and fetching records from a database and we will save it with a name of fetchRecords.php. This PHP file will get records from the database by Ajax request.

<?php

if(isset($_POST['fetch_value']))

{

if($_SERVER['SERVER_NAME'] == 'localhost' || $_SERVER['SERVER_NAME'] == '127.0.0.1' )

                {

                $db = mysqli_connect('localhost','root','','db_name') or die('Error connecting to MySQL server.');

                }

                else

                {

                $db = mysqli_connect('servername','username,'password','db_name') or die('Error connecting to MySQL server.');

                }

 $requireValue = $_POST['fetch_value'];

 $query=mysqli_query($db, "select * from tablename where title='$requireValue'");

 while($row=mysqli_fetch_array($query))

 {

  echo "<option>".$row['category']."</option>";

 }

 exit;

}

?>

Written By: Charles Miller Published in PHP


Search

Publish your passions on srcraftblog.com

Latest Post

☛ Best Europe cities to travel with Toddlers

☛ Make Your Limousine Ride Even More Special: 10 Top Ideas

☛ Leverage SEO Services to Secure Success for Your Storage Company

☛ Telerehab physical therapy : healing at your fingertips

☛ 10 Best Activities in India for Thrills and Relaxation

☛ Wedding Limos That Redefine Luxury Transportation

☛ Flying with Family: A Guide to Kid-Friendly Travel from Calgary to Kelowna

☛ How To Protect Your Privacy Online? [Complete Guide]

☛ Help and kindness is the biggest religion

☛ Burning bamboo wood is prohibited in the scriptures, Why


We are accepting well-written informative Guest Posts on srcraftblog.com

Innovation & Technology

Artificial Intelligent blogs
Cryptocurrency blogs
Digital India blogs
Data science blogs
Neuroscience blogs
Programming blogs

Physical science

Physics blogs
Chemistry blogs
Earth science blogs
Geology blogs
Oceanography blogs
Meteorology blogs

Industry

Business blogs
Economy blogs
Freelancing blogs
Leadership blogs
Productivity blogs
Work blogs

Society

Basic income blogs
Education blogs
Environment blogs
Media blogs
Philosophy blogs
Women blogs
About us |  Write for us |  Terms and conditions |  Contact us

© 2023 SRCRAFT INIDA