آدرس : تهران ، خیابان آزادی ، خیابان رودکی شمالی ، پلاک ۸۷۰
تلفن ثابت : 02166421387
تلفن همراه : 09198661229
تلفن همراه : 09302974451
ایمیل : info@woham.com
در این آموزش نحوه ایجاد فرم پویا با استفاده از PHP، jQuery و MySQL را به شما نشان خواهیم داد.
در این حالت اگر کاربر بخواهد داده های بیشتری را در پایگاه داده اضافه کند می تواند فیلدهای بیشتری را در جدول اضافه کند و اگر بخواهد ردیف متنی را حذف کند می تواند هر ردیفی را به صورت پویا حذف کند.
همچنین ممکن است دوست داشته باشید فیلدهای فایل را با استفاده از jQuery و PHP اضافه و حذف کنید.
برای ایجاد فرم پویا فقط سه مرحله طول می کشد:
مرحله 1. یک فایل HTML بسازید و نشانه گذاری و اسکریپت را تعریف کنید
یک فایل HTML می سازیم و با نام 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>
در این مرحله یک فرم برای ذخیره جزئیات کارمند در پایگاه داده ایجاد می کنیم. سه فیلد متنی برای ذخیره نام، سن و شغل کارمند ایجاد می کنیم، همچنین دکمه ای برای اضافه کردن ردیف های بیشتر ایجاد می کنیم که تابع add_row() را فراخوانی می کند.
در تابع add_row () کل ردیف‌های جدول را می‌شماریم تا به ردیف دیگری در جدول شناسه بدهیم که به حذف ردیف خاصی کمک میکند، سپس ردیف دیگری را با فیلدهای متنی اضافه می‌کنیم و دکمه حذف را برای حذف آن سطر اضافه می‌کنیم.
ما یک تابع ()delete_row ایجاد می کنیم تا با گرفتن شناسه ردیف، ردیف خاصی را حذف کنیم. همچنین ممکن است منوی گزینه پویا را با استفاده از ajax و PHP دوست داشته باشید.
مرحله 2. یک فایل PHP برای ذخیره داده ها در پایگاه داده بسازید
یک فایل PHP می سازیم و با نام 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]')");
}
}
}
?>
در این مرحله ما یک جدول پایگاه داده ’employee_table’ ایجاد می کنیم تا جزئیات کارمند را ذخیره کند و سپس تمام آرایه هایی را که دارای مقادیر نام کارمند، سن و شغل هستند دریافت می کنیم و بررسی می کنیم که آیا تمام مقادیر در یک ردیف با استفاده از حلقه for وجود دارند یا خیر، سپس آن سطر را وارد می کنیم.
همچنین ممکن است بخواهید از ارسال فرم های چندگانه و تکراری با استفاده از PHP جلوگیری کنید.
مرحله 3. یک فایل CSS بسازید و استایل را تعریف کنید
یک فایل CSS می سازیم و با نام 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;
}
این همه چیز است، این نحوه ایجاد فرم پویا با استفاده از PHP، jQuery و MySQL است. شما می توانید این کد را بر اساس نیاز خود بیشتر سفارشی کنید. و لطفاً نظرات خود را در مورد این آموزش بیان کنید.