How to Send HTML Form array in Codeigniter using Ajax

Now, when you simply submit your form the normal way, your browser takes care of sending HTML input arrays with ease and you can begin to segment your data on your server.

This was an interesting complication that I ran into while making a form with dynamic related form fields. I was trying to capture contact name, mobile, and address inside a single HTML array named “contact”. So the input tags look something like this.

View code

<form id="submitForm" method="post">
	<input type="text" name="amount" value="100">
	<table class="table">
		<tr>
			<th>Name</th>
			<th>Mobile</th>
			<th>Address</th>
		</tr>
		<?php
		$contact = array
			( 
				array('name'=>'prince','mobile'=>'9625000123','address'=>'abc'),
				array('name'=>'alex','mobile'=>'0000123454','address'=>'xyz'),
			);
		$i = 0;
		foreach ($contact as $value)
		{
			?>
		<tr>
			<td><input type="text" name="contact[<?=$i?>][name]" value="<?=$value['name']?>"></td>
			<td><input type="text" name="contact[<?=$i?>][mobile]" value="<?=$value['mobile']?>"></td>
			<td><input type="text" name="contact[<?=$i?>][address]" value="<?=$value['address']?>"></td>
		</tr>
	<?php 
		$i++;
		}
		?>

	</table>
	<input type="submit" value="submit">
</form>

JavaScript Code

<script>
    $(document).ready(function(){
      $('#submitForm').submit(function(e){
			e.preventDefault();
			var formData = new FormData();
			var contact = $(this).serializeArray();
			$.each(contact, function (key, input) {
				formData.append(input.name, input.value);
			});
		
			$.ajax({
				type:'POST',
				url:"<?=base_url();?>Dashboard/getContact",
				data: formData,
				cache: false,
				contentType: false,
				processData: false,
				dataType: 'JSON',
				success:function(data){
			}
		});
		
	  });
    });
</script>

Ajax call to Controller

public function getContact()
{
	print_r($this->input->post());
	die;
}

Output

Array
(
    [amount] => 100
    [contact] => Array
        (
            [0] => Array
                (
                    [name] => prince
                    [mobile] => 9625000123
                    [address] => abc
                )

            [1] => Array
                (
                    [name] => alex
                    [mobile] => 0000123454
                    [address] => xyz
                )

        )

)

Complete page source here.

<form id="submitForm" method="post">
	<input type="text" name="amount" value="100">
	<table class="table">
		<tr>
			<th>Name</th>
			<th>Mobile</th>
			<th>Address</th>
		</tr>
		<?php
		$contact = array
			( 
				array('name'=>'prince','mobile'=>'9625000123','address'=>'abc'),
				array('name'=>'alex','mobile'=>'0000123454','address'=>'xyz'),
			);
		$i = 0;
		foreach ($contact as $value)
		{
			?>
		<tr>
			<td><input type="text" name="contact[<?=$i?>][name]" value="<?=$value['name']?>"></td>
			<td><input type="text" name="contact[<?=$i?>][mobile]" value="<?=$value['mobile']?>"></td>
			<td><input type="text" name="contact[<?=$i?>][address]" value="<?=$value['address']?>"></td>
		</tr>
	<?php 
		$i++;
		}
		?>

	</table>
	<input type="submit" value="submit">
</form>

// JavaScript Code
<script>
    $(document).ready(function(){
      $('#submitForm').submit(function(e){
			e.preventDefault();
			var formData = new FormData();
			var contact = $(this).serializeArray();
			$.each(contact, function (key, input) {
				formData.append(input.name, input.value);
			});
		
			$.ajax({
				type:'POST',
				url:"<?=base_url();?>Dashboard/getContact",
				data: formData,
				cache: false,
				contentType: false,
				processData: false,
				dataType: 'JSON',
				success:function(data){
			}
		});
		
	  });
    });
</script>

// Controller Code
public function getContact()
{
	print_r($this->input->post());
	die;
}

// Output array
Array
(
    [amount] => 100
    [contact] => Array
        (
            [0] => Array
                (
                    [name] => prince
                    [mobile] => 9625000123
                    [address] => abc
                )

            [1] => Array
                (
                    [name] => alex
                    [mobile] => 0000123454
                    [address] => xyz
                )

        )

)