How To Submit Multiple Checkbox Value to PHP using jQuery & Ajax
Tags: php, javascript, ajax, jquery
Published: 2022-03-23 05:25:58

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/php/how-to-submit-multiple-checkbox-value-to-php-using-jquery-ajax

In this post, I will show to you an example on how to submit multiple checkbox value to PHP using jQuery and ajax. In my previous post I posted about on [how to loop the checked checkbox value in jquery](https://codeanddeploy.com/blog/jquery/how-to-loop-checkbox-checked-value-in-jquery). Now we will send it to the server-side so that the PHP can read it and process to MySQL database.


[![Advanced Laravel SAAS Starter Kit with CRUD Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyjyev8tz3r8vi2w3on1.png)](https://1.envato.market/5g5QAn)

[Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!](https://1.envato.market/5g5QAn)


## Sample Output

Here is the sample output of this function.

![how-to-submit-multiple-checkbox-value-to-php-using-jquery-ajax](https://ecn-storage.s3.us-west-2.amazonaws.com/articles/how-to-submit-multiple-checkbox-value-to-php-using-jquery-ajax-CRQR6yRs7Nx980.webp?ctm=1628002527)


## HTML, CSS, and Javascript Code

Here is the complete HTML, CSS and Javascript code:

```php
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Loop Checkbox Value in jQuery</title>

	<style type="text/css">
		.result-wrapper {
			display: none;
		}
	</style>
</head>
<body>
	<form id="form" action="server.php">
		<label>What animals you have at home?</label>

		<div>
			<input type="checkbox" name="animals[]" value="Dog"> Dog
		</div>
		<div>
			<input type="checkbox" name="animals[]" value="Cat"> Cat
		</div>
		<div>
			<input type="checkbox" name="animals[]" value="Pig"> Pig
		</div>
		<br/>
		<button type="button" id="submit">Submit</button>
	</form>

	<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

  <script type="text/javascript">
  	$(document).ready(function() {

  		$("#submit").on("click", function() {
  			var $this 		    = $(this); //submit button selector using ID
	        var $caption        = $this.html();// We store the html content of the submit button
	        var form 			= "#form"; //defined the #form ID
	        var formData        = $(form).serializeArray(); //serialize the form into array
	        var route 			= $(form).attr('action'); //get the route using attribute action

	        // Ajax config
	    	$.ajax({
		        type: "POST", //we are using POST method to submit the data to the server side
		        url: route, // get the route value
		        data: formData, // our serialized array data for server side
		        beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
		            $this.attr('disabled', true).html("Processing...");
		        },
		        success: function (response) {//once the request successfully process to the server side it will return result here
		            // do something here after successfully submitted
		        },
		        complete: function() {
		        	$this.attr('disabled', false).html($caption);
		        },
		        error: function (XMLHttpRequest, textStatus, errorThrown) {
		        	// You can put something here if there is an error from submitted request
		        }
		    });
  		});
  		
  	});
  </script>
</body>
</html>
```

## PHP Code

Here is the PHP code to catch the submitted form via ajax. Filename: server.php. Which I call it in previous code in form attribute **action="server.php"**.

```php
<?php
	
	$request = $_REQUEST;

	print_r($request);

?>
```

Now you have the complete code on how to do it. Now its your time to test it to your end.

Below are the sample file naming of this code.

![how-to-submit-multiple-checkbox-value-to-php-using-jquery-ajax](https://ecn-storage.s3.us-west-2.amazonaws.com/articles/how-to-submit-multiple-checkbox-value-to-php-using-jquery-ajax-GQKwX0GY2Px980.webp?ctm=1628002953)

[![Advanced Laravel SAAS Starter Kit with CRUD Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyjyev8tz3r8vi2w3on1.png)](https://1.envato.market/5g5QAn)

[Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!](https://1.envato.market/5g5QAn)

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/php/how-to-submit-multiple-checkbox-value-to-php-using-jquery-ajax if you want to download this code.

Happy coding :)