PHP jQuery Dynamic Selectpicker Dropdown box using Bootstrap 5

If you are beginner in Web application development field, then you have to know add or remove dynamic input fields feature is very useful, when in your web application there are multiple data has to be inserted in single click. So if you need to submit bulk data with multiple input field, then add or remove input field dynamically feature will help you. This is because if you have display some specific number of input fields at the loading of web page, and then after you have to use feature like add or remove input field dynamically, then it will increase your web application user friendlyness.

But in this tutorial, we will not only discuss dynamically add or remove simple input field like textbox or select box, but here we will dynamically add or remove advance select box by using Bootstrap 5 Select plugin with search feature. In this tutorial script will allows to users to add input field with Selectpicker dropdown list box in single click. So by adding Selectpicker select box which will extends our form functionality and it will make our form more productive. Under this tutorial, you can find how to add input fields with Selectpicker Select box dynamically using jquery and submit input fields and Selectpicker select box value using PHP.

Add or Remove Selectpicker Dropdown Select box fields dynamically

In this tutorial you can find the example which will show you add or remove multiple select picker dropdown box with other input field dynamically with jQuery and submit multiple input fields and select box data using Ajax with PHP. For understand the concept of Add or Remove Selectpicker select box with other input field, here we have use shopping cart example, in which user can add or remove input fields with Select picker select box in which user can search item unit and submit Shopping cart with multiple item data will be submitted at once using Ajax with PHP.

View Demo

Download Source Code

Bootstrap 5, Bootstrap 5 Select & jQuery Library

Under this tutorial, we have use Bootstrap 5 library for make input field and action button will look better, and for make searchable select box, here we have use Bootstrap 5 Select plugin, so by using this plugin user can able to search option under this select box, and jquery is used for implement add or remove input fields and select box fields dynamically. So for make this stylish feature, we need to add Bootstrap 4, Bootstrap 5 Select and jQuery library first at header of web page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/css/bootstrap-select.min.css">

		<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/js/bootstrap-select.min.js"></script>

		<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

HTML Code

Under HTML code first we have to create one form with id insert_form. We will submit form data using Ajax. Under this form for display input field or Select box dynamically, we have create one HTML table and under this table we will append input field dynamically using jQuery. And under this HTML code for display success or error message, we have create one span tag.

<form method="post" id="insert_form">
						<div class="table-repsonsive">
							<span id="error"></span>
							<table class="table table-bordered" id="item_table">
								<tr>
									<th>Enter Item Name</th>
									<th>Enter Quantity</th>
									<th>Select Unit</th>
									<th><button type="button" name="add" class="btn btn-success btn-sm add"><i class="fas fa-plus"></i></button></th>
								</tr>
							</table>
							<div align="center">
								<input type="submit" name="submit" id="submit_button" class="btn btn-primary" value="Insert" />
							</div>
						</div>
					</form>

jQuery Code

Under jQuery Script, we have make add_input_field(count) function, this function will be used for add dynamic input field and Select picker select box in item table.

First this function will be called on page load, so it will append one row with input field and Select picker dropdown box. But here we have use Bootstrap 5 Select plugin for convert simple select box into advance select box with feature like search option data. So for this we have to refresh data of Selectpicker select box by using $('.selectpicker').selectpicker('refresh'); code.

Then after for add more input field with Select picker dropdown box, we have to click on add button, so when we have click on add button, then it will again called add_input_field() function, and append new row with input field, and select picker select box with remove button, and here also we have to refresh data of select picker select box by using $('.selectpicker').selectpicker('refresh'); code.

Same way for remove single row of input field and select picker select box, we have to clickm on remove button, so when we have click on remove button, then it will remove that row of data.

And lastly for submit form data, so here we have first validate form data by using jquery and then after submit form data by using Ajax and it will submit form data to PHP script.

$(document).ready(function(){

	var count = 0;
	
	function add_input_field(count)
	{

		var html = '';

		html += '<tr>';

		html += '<td><input type="text" name="item_name[]" class="form-control item_name" /></td>';

		html += '<td><input type="text" name="item_quantity[]" class="form-control item_quantity" /></td>';

		html += '<td><select name="item_unit[]" class="form-control selectpicker" data-live-search="true"><option value="">Select Unit</option><?php echo fill_unit_select_box($connect); ?></select></td>';

		var remove_button = '';

		if(count > 0)
		{
			remove_button = '<button type="button" name="remove" class="btn btn-danger btn-sm remove"><i class="fas fa-minus"></i></button>';
		}

		html += '<td>'+remove_button+'</td></tr>';

		return html;

	}

	$('#item_table').append(add_input_field(0));

	$('.selectpicker').selectpicker('refresh');

	$(document).on('click', '.add', function(){

		count++;

		$('#item_table').append(add_input_field(count));

		$('.selectpicker').selectpicker('refresh');

	});

	$(document).on('click', '.remove', function(){

		$(this).closest('tr').remove();

	});

	$('#insert_form').on('submit', function(event){

		event.preventDefault();

		var error = '';

		count = 1;

		$('.item_name').each(function(){

			if($(this).val() == '')
			{

				error += "<li>Enter Item Name at "+count+" Row</li>";

			}

			count = count + 1;

		});

		count = 1;

		$('.item_quantity').each(function(){

			if($(this).val() == '')
			{

				error += "<li>Enter Item Quantity at "+count+" Row</li>";

			}

			count = count + 1;

		});

		count = 1;

		$("select[name='item_unit[]']").each(function(){

			if($(this).val() == '')
			{

				error += "<li>Select Unit at "+count+" Row</li>";

			}

			count = count + 1;

		});

		var form_data = $(this).serialize();

		if(error == '')
		{

			$.ajax({

				url:"insert.php",

				method:"POST",

				data:form_data,

				beforeSend:function()
	    		{

	    			$('#submit_button').attr('disabled', 'disabled');

	    		},

				success:function(data)
				{

					if(data == 'ok')
					{

						$('#item_table').find('tr:gt(0)').remove();

						$('#error').html('<div class="alert alert-success">Item Details Saved</div>');

						$('#item_table').append(add_input_field(0));

						$('.selectpicker').selectpicker('refresh');

						$('#submit_button').attr('disabled', false);
					}

				}
			})

		}
		else
		{
			$('#error').html('<div class="alert alert-danger"><ul>'+error+'</ul></div>');
		}

	});
	 
});

Get Value of Input field and Selectpicker Select box in PHP

After Submitting form data using Ajax then at server side for get the value of multiple input field and Selectpicker select box data, so at PHP script we will use $_POST method for fetch value from input fields and select picker select box in PHP.

if(isset($_POST["item_name"]))
{

	include('database_connection.php');

	$order_id = uniqid();

	for($count = 0; $count < count($_POST["item_name"]); $count++)
	{

		$query = "
		INSERT INTO order_items 
        (order_id, item_name, item_quantity, item_unit) 
        VALUES (:order_id, :item_name, :item_quantity, :item_unit)
		";

		$statement = $connect->prepare($query);

		$statement->execute(
			array(
				':order_id'		=>	$order_id,
				':item_name'	=>	$_POST["item_name"][$count],
				':item_quantity'=>	$_POST["item_quantity"][$count],
				':item_unit'	=>	$_POST["item_unit"][$count]
			)
		);

	}

	$result = $statement->fetchAll();

	if(isset($result))
	{
		echo 'ok';
	}

}

If you want to get complete source with .sql file, so please write your email address in comment box. We will send you complete source code file at your define email address.

View Demo

Download Source Code