How to Submit Multiple Form array in Codeigniter using Ajax

In this article we will see how to implement multiple forms array with jQuery and JavaScript code asynchronously by 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.

Forms are largely used on a number of websites to collect data that may be required to be obtained from a user. As such, forms on the web can be largely prepared using plenty of methods. One for example would be HTML, and that is used to create simple forms.

In the example that follows, we shall try to achieve this.

My other tutorial how to send html form array in Codeigniter using ajax.

HTML Code / View Code

<form id="signleForm" 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>


<form id="secondForm" 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('name'=>'samual','mobile'=>'0001245845','address'=>'pqr'),
			);
		$i = 0;
		foreach ($contact as $value)
		{
			?>
		<tr>
			<td><input type="text" name="morecontact[<?=$i?>][name]" value="<?=$value['name']?>"></td>
			<td><input type="text" name="morecontact[<?=$i?>][mobile]" value="<?=$value['mobile']?>"></td>
			<td><input type="text" name="morecontact[<?=$i?>][address]" value="<?=$value['address']?>"></td>
		</tr>
	<?php 
		$i++;
		}
		?>

	</table>
</form>
<button type="button" class="btn btn-primary" id="ContactSave" >Save</button>

JavaScript Code

<script>
    $(document).ready(function(){
      $('#ContactSave').click(function(e){
			e.preventDefault();
			var formData = new FormData();
			var contact = $('#signleForm').serializeArray();
			$.each(contact, function (key, input) {
				formData.append(input.name, input.value);
			});
			
			var morecontact = $('#secondForm').serializeArray();
			$.each(morecontact, 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 to Controller Code

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
                )

        )

    [morecontact] => Array
        (
            [0] => Array
                (
                    [name] => prince
                    [mobile] => 9625000123
                    [address] => abc
                )

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

            [2] => Array
                (
                    [name] => samual
                    [mobile] => 0001245845
                    [address] => pqr
                )

        )

)

Complete page source here.

<form id="secondForm" 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('name'=>'samual','mobile'=>'0001245845','address'=>'pqr'),
			);
		$i = 0;
		foreach ($contact as $value)
		{
			?>
		<tr>
			<td><input type="text" name="morecontact[<?=$i?>][name]" value="<?=$value['name']?>"></td>
			<td><input type="text" name="morecontact[<?=$i?>][mobile]" value="<?=$value['mobile']?>"></td>
			<td><input type="text" name="morecontact[<?=$i?>][address]" value="<?=$value['address']?>"></td>
		</tr>
	<?php 
		$i++;
		}
		?>

	</table>
</form>
<button type="button" class="btn btn-primary" id="ContactSave" >Save</button>

//JavaScript Code
<script>
    $(document).ready(function(){
      $('#ContactSave').click(function(e){
			e.preventDefault();
			var formData = new FormData();
			var contact = $('#signleForm').serializeArray();
			$.each(contact, function (key, input) {
				formData.append(input.name, input.value);
			});
			
			var morecontact = $('#secondForm').serializeArray();
			$.each(morecontact, 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
(
    [amount] => 100
    [contact] => Array
        (
            [0] => Array
                (
                    [name] => prince
                    [mobile] => 9625000123
                    [address] => abc
                )

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

        )

    [morecontact] => Array
        (
            [0] => Array
                (
                    [name] => prince
                    [mobile] => 9625000123
                    [address] => abc
                )

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

            [2] => Array
                (
                    [name] => samual
                    [mobile] => 0001245845
                    [address] => pqr
                )

        )

)