Thursday 8 July 2021

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.


PHP jQuery Dynamic Select Selectpicker Dropdown box using Bootstrap 5


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.







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.







64 comments:

  1. Replies
    1. Please check your email address, we have send source code file, if you have receive or not, please confirm here..

      Delete
  2. Replies
    1. Please check your email address, we have send source code file, if you have receive or not, please confirm here..

      Delete
  3. Thank so much for this tutorial

    ReplyDelete
  4. Replies
    1. Please check your email address, we have send source code file, if you have receive or not, please confirm here..

      Delete
  5. Please i need source code kabirukokani300@gmail.com

    ReplyDelete
    Replies
    1. Please check your email address, we have send source code file, if you have receive or not, please confirm here..

      Delete
  6. Please send me on this address sandeepsingh@pau.edu

    ReplyDelete
    Replies
    1. Please check your email address, we have send source code file, if you have receive or not, please confirm here..

      Delete
  7. Replies
    1. Please check your email address, we have send source code file, if you have receive or not, please confirm here..

      Delete
  8. paulocesarjuruaia@hotmail.com

    ReplyDelete
    Replies
    1. Please check your email address, we have send source code file, if you have receive or not, please confirm here..

      Delete
  9. i want this code source
    email:enafor99@gmail.com

    ReplyDelete
    Replies
    1. Please check your email address, we have send source code file, if you have receive or not, please confirm here..

      Delete
  10. Please I need source code
    Kencoperate@gmail.com

    ReplyDelete
    Replies
    1. Please check your email address, we have send source code file, if you have receive or not, please confirm here..

      Delete
  11. Replies
    1. Please check your email address, we have send source code file, if you have receive or not, please confirm here..

      Delete
  12. Replies
    1. Please check your email address, we have send source code file, if you have receive or not, please confirm here..

      Delete
  13. hello sir. i want the source code with .sql file. will be grateful thankyou

    email- zaminichiring@gmail.com

    ReplyDelete
    Replies
    1. Please check your email address, we have send source code file, if you have receive or not, please confirm here..

      Delete
  14. Good job. thanks. Our email is vfrodriguezp@gmail.com

    ReplyDelete
  15. I am unable to download the source code. Please send us to our email vfrodriguezp@gmail.com

    ReplyDelete
  16. Replies
    1. Please check your email address, we have send source code file, if you have receive or not, please confirm here..

      Delete
  17. Replies
    1. Please check your email address, we have send source code file, if you have receive or not, please confirm here..

      Delete
  18. thank you . Please send complete source code to my email thank you

    ReplyDelete
  19. This project is very fentastic.. My e-mail is sagarbg88@gmail.com

    ReplyDelete
  20. Sandeepsinghkhalsa.0013@gmail.com

    ReplyDelete
  21. Can I have the source code

    ReplyDelete
  22. Well done!
    I want the source code please!
    mail: eliasy.manao@gmail.com

    ReplyDelete
  23. sir please share me complete source code of this tutorial thanks in advance.

    ReplyDelete
  24. Hello! Pls send me source code, i've problem with finall pop-up!
    Good job!
    ksscroll.firma@gmail.com

    ReplyDelete