چطور فیلدهای داینامیک با قابلیت حذف و اضافه ایجاد کنیم؟
بسیاری از مواقع نیاز داریم که در فرم خود، فیلدهایی داشته باشیم که بتوانیم بر حسب نیاز آن‌ها را کم یا زیاد کنیم. برای نمونه شاید نیاز باشد در فرمی اطلاعات همراهان خود را نیز وارد کنیم که این کار با توجه به متغیر بودن تعداد همراهان، باید به صورت داینامیک و انعطاف‌پذیر در فرم گنجانده شود.
به همین دلیل در این پُست از طریق با استفاده از جاوا اسکریپت و jQuery با نمونه کدی جهت این کار آشنا خواهیم شد که به راحتی می‌توانیم آن را توسعه دهیم و فرم‌های دلخواه خود را ایجاد کنیم:
نمونه کد به صورت کلی به شکل زیر است:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Add or Remove Input Fields Dynamically using jQuery</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container"style="max-width: 700px;">
<form method="post" action="">
<div class="row">
<div class="col-lg-12">
<div id="inputFormRow">
<div class="input-group mb-3">
<input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">
<div class="input-group-append">
<button id="removeRow" type="button" class="btn btn-danger">Remove</button>
</div>
</div>
</div>
<div id="newRow"></div>
<button id="addRow" type="button" class="btn btn-info">Add Row</button>
</div>
</div>
</form>
</div>
<script type="text/javascript">
// add row
$("#addRow").click(function () {
var html = '';
html += '<div id="inputFormRow">';
html += '<div class="input-group mb-3">';
html += '<input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">';
html += '<div class="input-group-append">';
html += '<button id="removeRow" type="button" class="btn btn-danger">Remove</button>';
html += '</div>';
html += '</div>';
$('#newRow').append(html);
});
// remove row
$(document).on('click', '#removeRow', function () {
$(this).closest('#inputFormRow').remove();
});
</script>
</body>
</html>
همانطور که ملاحظه می‌کنید ابتدا Bootstrap و jQuery را از طریق CDN در صفحه‌ی خود فراخوانی کرده‌ایم و سپس فرم بسیار ساده‌ای را با یک فیلد و یک دکمه جهت حذف و اضافه ایجاد نموده‌ایم که از طریق جاوا اسکریپت و jQuery نیز به مدیریت فیلد خود می‌پردازیم و به راحتی نیز می‌توانیم فیلدهای بیشتر و شخصی‌تر را نیز به آن اضافه کنیم.
منبع: این نمونه کد از وبسایت shouts.dev انتخاب شده است.
توی وبسایتم سعی می‌کنم محتوایی که تصور کنم ارزشمنده و به بقیه کمکی می‌کنه رو منتشر کنم. امیدوارم از مطالب وبسایت بتونید استفاده کنید و به کارتون بیاد. در ضمن اگه پروژه‌ی تحت وبی دارید که نیاز به برنامه‌نویسی و اجرا داره، می‌تونید با شماره انتهای صفحه با من تماس بگیرید تا در موردش با هم صحبت کنیم.