How to send HTML Form array inside array in codeigniter using Ajax

Now, when you simply submit your form the normal way, your browser takes care of sending HTML input arrays inside array 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.

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'),
			);
		$array = array
			( 
				array('name'=>'prince','mobile'=>'9625000123','address'=>'abc')
			);
		$i = 0;
		foreach ($contact as $value)
		{
			$j = 0;
			?>
		<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']?>">
			<?php
				foreach ($array as $ar)
				{ ?>
						<input type="text" name="contact[<?=$i?>][tank_warehouse][<?=$j?>][mobile]" value="<?=$ar['mobile']?>">
						<input type="text" name="contact[<?=$i?>][tank_warehouse][<?=$j?>][name]" value="<?=$ar['name']?>">
						<input type="text" name="contact[<?=$i?>][tank_warehouse][<?=$j?>][address]" value="<?=$ar['address']?>">
			<?php	
                             $j++;
                          }
			?>
			</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
                    [tank_warehouse] => Array
                        (
                            [0] => Array
                                (
                                    [mobile] => 0000123454
                                    [name] => alex
                                    [address] => xyz
                                )

                        )

                )

            [1] => Array
                (
                    [name] => alex
                    [mobile] => 0000123454
                    [address] => xyz
                    [tank_warehouse] => Array
                        (
                            [0] => Array
                                (
                                    [mobile] => 0000123454
                                    [name] => alex
                                    [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'),
			);
		$array = array
			( 		array('name'=>'prince','mobile'=>'9625000123','address'=>'abc')				
			);
		$i = 0;
		foreach ($contact as $value)
		{
			$j = 0;
			?>
		<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']?>">
			<?php
				foreach ($array as $ar)
				{ ?>
						<input type="text" name="contact[<?=$i?>][tank_warehouse][<?=$j?>][mobile]" value="<?=$ar['mobile']?>">
						<input type="text" name="contact[<?=$i?>][tank_warehouse][<?=$j?>][name]" value="<?=$ar['name']?>">
						<input type="text" name="contact[<?=$i?>][tank_warehouse][<?=$j?>][address]" value="<?=$ar['address']?>">
			<?php	
                      $j++;
                      }
			?>
			</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
                    [tank_warehouse] => Array
                        (
                            [0] => Array
                                (
                                    [mobile] => 0000123454
                                    [name] => alex
                                    [address] => xyz
                                )

                        )

                )

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

                        )

                )

        )

)