JQuery Ajax array push

In this article we will explain how to make jQuery Ajax method call to the WordPress server and send data about checked checkboxes pushed into an array with javascript.

JQuery Ajax method

JQuery Ajax method is used to call a backend server asynchronously via HTTP request. You can use this method to update a part of a webpage without reloading the whole website.

You can configure the Ajax request with a set of key/value pair called settings. All settings within an Ajax method are optional.

Out goal in this article is to call a backend PHP WordPress server and post an array of data. For this purpose we will use the following key/value settings for the Ajax request:

1. type: GET or POST
2. url: a link to a PHP file we would like to call. In WordPress there is a default PHP admin-ajax.php file that will route all your Ajax requests for you. We will call it by finding the URL to this file automatically:
   admin_url('admin-ajax.php');
3. data: the data set that we would like to send to the server
4. success: here will a successful result from the server come up
5. error: here we will put soe error handling code in order to know if the request was unsuccessful

JQuery array push

The data that we will send to the server will come from a user checking some checkboxes on a website.

The user will be able to check as many checkboxes as needed and the resulting posts will be filtered on screen programmatically without reloading the website.

Step1. Create a form with checkboxes.

<form id="checks" method="POST">
	<input name="Beige" value="3032" type="checkbox">Beige<br>
	<input name="Black" value="4186" type="checkbox">Black<br>
	<input name="Blue" value="4276" type="checkbox">Blue<br>
	<input name="Brown" value="2515" type="checkbox">Brown<br>
</form>

Step2. Create jQuery script that will fire on checkbox click:

<script type="text/javascript">
jQuery(document).ready(function()
{
	jQuery('input[type="checkbox"]').change(function() {
		//pick up clicked checkboxes here
	});
	
});
</script>

Step 3. Create an array of checked checkboxes and save them by calling javascript array push method:

var checkboxes_array = [];
jQuery('input[type=checkbox]').each(function () {
	if(this.checked) {
		checkboxes_array.push(jQuery(this).val());
	}
});

Step 4. Use the resulting array with checked checkboxes values and send it as a parameter in a data setting with Ajax:

data: { action : '...', chosen : checkboxes_array},  

The resulting jQuery code

The whole jQuery Ajax request to WordPress with array push code:

<script type="text/javascript">
    jQuery(document).ready(function()
	{
		jQuery('input[type="checkbox"]').change(function() {
			var checkboxes_array= [];
			jQuery('input[type=checkbox]').each(function () {
				if(this.checked) {
					checkboxes_array.push(jQuery(this).val());
				}
			});
			  jQuery.ajax({  
				type: 'POST',  
				url: '<?php echo admin_url('admin-ajax.php');?>',  
				data: { action : 'CCAjax', chosen : checkboxes_array},  
				success: function(textStatus){  
				   jQuery("#container").html( textStatus ); 
				},  
				error: function(MLHttpRequest, textStatus, errorThrown){  
					alert(errorThrown);  
				}  
			  });  
		});
		
	});
	</script>