Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Create Dynamic Form Using PHP, jQuery And MySQL

Thursday, Sep 28, 2017

Tags:- PHP jQuery MySQL


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.


See Demo
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.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.