Bladephp: Now with 7+ codeigniter, php, and laravel project 7+ php project From $18/Year From Rs. 1000/Year

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

by
Category:codeigniter
codeigniter mysql
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
                                )

                        )

                )

        )

)

0 Comments


Html code work in comment box


Related Post