Bladephp: Now with 8+ codeigniter, php, and laravel project 8+ php project From $37/Month From Rs. 2499/Month

How to Send HTML Form array in Codeigniter using Ajax

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

        )

)


0 Comments


Html code work in comment box


Related Post