All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Create Dynamic Form Using PHP, jQuery And MySQL

Last Updated : Jul 1, 2023

IN - PHP jQuery MySQL | Written & Updated By - Amruta

In this tutorial we will show you how to create dynamic form using PHP, jQuery and MySQL. In this if user wants to add more data in database he can add more fields in table and if he wants to delete text row he can delete any row dynamically.

You may also like add and remove file fields using jQuery and PHP.

Create Dynamic Form Using PHP, jQuery And MySQL

To Create Dynamic Form It Takes Only Three Steps:-

  1. Make a HTML file and define markup and scripting
  2. Make a PHP file to store data in database
  3. Make a CSS file and define styling

Step 1. Make a HTML file and define markup and scripting

We make a HTML file and save it with a name form.html

<html>
<head>
<link href="form_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function add_row()
{
 $rowno=$("#employee_table tr").length;
 $rowno=$rowno+1;
 $("#employee_table tr:last").after("<tr id='row"+$rowno+"'><td><input type='text' name='name[]' placeholder='Enter Name'></td><td><input type='text' name='age[]' placeholder='Enter Age'></td><td><input type='text' name='job[]' placeholder='Enter Job'></td><td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
}
function delete_row(rowno)
{
 $('#'+rowno).remove();
}
</script>
</head>
<body>
<div id="wrapper">

<div id="form_div">
 <form method="post" action="store_detail.php">
  <table id="employee_table" align=center>
   <tr id="row1">
    <td><input type="text" name="name[]" placeholder="Enter Name"></td>
    <td><input type="text" name="age[]" placeholder="Enter Age"></td>
    <td><input type="text" name="job[]" placeholder="Enter Job"></td>
   </tr>
  </table>
  <input type="button" onclick="add_row();" value="ADD ROW">
  <input type="submit" name="submit_row" value="SUBMIT">
 </form>
</div>

</div>
</body>
</html>

In this step we create a form to store employee details in database.We create three text fields to store employee name, age and job we also create a button to add more rows which call add_row() function.

In add_row() function we count total rows in table just to give id to another row in table which helps in deleting particular row then we append another row having text fields and delete button to delete that row.

We create a delete_row() function to delete particular row by getting row id. You may also like dynamic option menu using ajax and PHP.

Step 2. Make a PHP file to store data in database

We make a PHP file and save it with a name store_detail.php

// Database Structure 
CREATE TABLE 'employee_table' (
 'name' text NOT NULL,
 'age' text NOT NULL,
 'job' text NOT NULL,
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1

<?php
if(isset($_POST['submit_row']))
{
 $host="localhost";
 $username="root";
 $password="";
 $databasename="sample";
 $connect=mysql_connect($host,$username,$password);
 $db=mysql_select_db($databasename);	 
 
 $name=$_POST['name'];
 $age=$_POST['age'];
 $job=$_POST['job'];
 for($i=0;$i<count($name);$i++)
 {
  if($name[$i]!="" && $age[$i]!="" && $job[$i]!="")
  {
   mysql_query("insert into employee_table values('$name[$i]','$age[$i]','$job[$i]')");	 
  }
 }
}
?>

In this step we create a database table 'employee_table' to store employee details and then we get all the arrays having values of employee name, age and job and check if all the values in a row are present using for loop then we insert that row in database.

You may also like prevent multiple and duplicate form submission using PHP.

Step 3. Make a CSS file and define styling

We make a CSS file and save it with a name form_style.css

body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
 background-color:#F9E79F;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
 color:#9A7D0A;
}
#wrapper h1 p
{
 font-size:18px;
}
#employee_table input[type="text"]
{
 width:120px;
 height:35px;
 padding-left:10px;
}
#form_div input[type="button"]
{
 width:110px;
 height:35px;
 background-color:#D4AC0D;
 border:none;
 border-bottom:3px solid #B7950B;
 border-radius:3px;
 color:white;
}
#form_div input[type="submit"]
{
 margin-top:10px;
 width:110px;
 height:35px;
 background-color:#D4AC0D;
 border:none;
 border-bottom:3px solid #B7950B;
 border-radius:3px;
 color:white;
}

You can view our client side and server side validation tutorial to implement validation.

That's all, this is how to create dynamic form using PHP, jQuery and MySQL. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on dynamic form php helps you and the steps and method mentioned above are easy to follow and implement.