codeigniter form receives blank emails from bootstrap form

Question

I have created a website with two contact form, one is reservation form and other one is normal "contact us" form. Both the form data will come in an HTML Table. The problem is I receives blank emails with the mail subject as i declared it(Reservation from website, Enquiry from website). But when I try to send the form data without filling it, it won't allow me to send, html "required" attribute tells "please fill this field". But I receives blank emails as shown in the attachment my view page is

<form id="contact_form" method="post" enctype="multipart">
          <div class="form-group">
            <input type="text" class="form-control" name="name" value="" placeholder="Name" required>
          </div>
          <div class="form-group">
            <input type="email" class="form-control" name="email" value="" placeholder="E-mail" required>
          </div>
          <div class="form-group">
            <input type="tel" class="form-control" name="phone" value="" placeholder="Phone" required>
          </div>
          <div class="form-group">
            <textarea class="form-control" name="message" rows="3" placeholder="Message"></textarea>
          </div>
          <button class="btn btn-default" type="submit" name="submit">
              <i class="fa fa-paper-plane-o" aria-hidden="true"></i>Submit
          </button>
        </form>

and the jquery is

<script>
            $("#contact_form").on('submit', function(e)
            {
                var temp=0;
                e.preventDefault();             
                var data = new FormData($(this))
                $.ajax({

                    url: "<?php echo base_url();?>index.php/home/contact_details",
                    type: "POST",
                    dataType:'json',
                    data:  new FormData(this),
                    contentType: false,
                    cache: true,
                    processData:false,
                    success: function(data)
                    {  
                        alert("Successfully submitted");
                    }
                });  
            });
        </script>

and my controller function is

public function contact_details()
    {
        $data['name']=$name=$this->input->post('name');
        $data['email']=$email=$this->input->post('email');
        $data['phone']=$phone=$this->input->post('phone');
        $data['message']=$message=$this->input->post('message');
        $config = Array(        
            'protocol' => 'sendmail',
            'smtp_host' => 'localhost',
            'smtp_port' => 25,
            'smtp_user' => 'SMTP Username',
            'smtp_pass' => 'SMTP Password',
            'smtp_timeout' => '4',
            'mailtype'  => 'html', 
            'charset'   => 'iso-8859-1'
        );
        $message='<table border="1" width="100%">
         <tr>
           <td>Name</td>
           <td>'.$name.'</td>
           </tr>
           <tr>
           <td>Phone</td>
           <td>'.$phone.'</td>
            </tr>
           <tr>
           <td>Email</td>
           <td>'.$email.'</td>
            </tr>
           <tr>
           <td>Message</td>
           <td>'.$message.'</td>
         </tr>            
        </table>';
         $this->email->set_mailtype("html");
        $this->load->library('email', $config);
        $this->email->from($email); 
        $this->email->to('example@example.ae');
        $this->email->cc('example@example.com');
        $this->email->cc('example@example.ae');  
        $this->email->subject('Enquiry from website');
        $this->email->message($message);    
        $sent=$this->email->send();
        $var=1;
        echo $var;

    }

Answer 1

Do it with something like this

<script>
    $("button[type='submit']").click(function(e) {
        e.preventDefault();
        $.ajax({

            url: "<?php echo base_url();?>index.php/home/contact_details",
            type: "POST",
            dataType:'json',
            data:  $(this).closest('form').serialize(),
            contentType: false,
            cache: true,
            processData:false,
            success: function(data)
            {  
                alert("Successfully submitted");
            }
        });  
    });
</script>

The advantage of this is you can make this code reusable. you can just change the url. For example we will add <form data-url="<?php echo base_url('home/contact_details'); ?>"> call it in the function with url: $(this).closest('form').data('url') and to check if there is a value in the post data. In controller do this.

Instead of using $data['name']=$name=$this->input->post('name');. You can do $data = $this->input->post();. Once you print_r() that data you will see it in an array form and you can call it by $data['name'] depends on the name of the selector.

Answer 2

This $data['name']=$name=$this->input->post('name'); is weird syntax.

Try $name = $this->input->post('name');

Same applies for the following ones (email, phone, message).