CODEWITHSUNDEEP
phpajaxcodeigniterbootstrap-modalrecaptcha
omkara
omkara

Reputation: 982

how to insert from data using ajax in codeigniter?

controller: test.php

public function signin()
{
    if($this->input->post('insert'))
    {
        $name = trim($this->input->post('name'));
        $email = trim($this->input->post('email'));
        $phone = trim($this->input->post('phone'));
        $message = trim($this->input->post('message'));
        $s_data = date('Y-m-d');

        $data = array(
                    'name' => $name,
                    'email' => $email,
                    'phone' => $phone,
                    'message' => $message,
                    's_date' => $s_date
                    ); 

        $recaptchaResponse = trim($this->input->post('g-recaptcha-response'));
        $userIp=$this->input->ip_address();
        $secret='****************************';
        $url="https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response;=".$recaptchaResponse."&remoteip;=".$userIp;
        $response = $this->curl->simple_get($url);
        $status= json_decode($response, true);

        $this->db->insert('contact',$data);
        if($status['success'])
        {     
            $this->session->set_flashdata('flashSuccess', 'successfull');
        }
        else
        {
            $this->session->set_flashdata('flashSuccess', 'Sorry Google Recaptcha Unsuccessful!!');
        }
    }
}

Ajax Code:

<script>
    $(document).ready(function(){
        $("#insert").click(function(){
            var name = $("#name").val();
            var email = $("#email").val();
            var phone = $("#phone").val();
            var message = $("#message").val();
            var dataString = 'name='+ name + '&email='+ email + '&phone='+ phone + '&message='+ message;
            if(name==''||email==''||phone==''||message=='')
            {
                alert("Please Fill All Fields");
            }
            else
            {
                // AJAX Code To Submit Form.
                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url('index.php/'); ?>test/signin",
                    data: dataString,
                    cache: false,
                    success: function(result){
                        alert(result);
                    }
                });
            }
            return false;
        });
    });
</script>

Bootstrap Modal View Code:-

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title" id="myModalLabel">header</h4>
            </div>
            <div class="modal-body">
                <div class="error"><strong><?=$this->session->flashdata('flashSuccess')?></strong></div>
                <form method="post" enctype="multipart/form-data" id="form1">
                    <input type="text" class="form-control1" id="name" name="name" placeholder="Enter Your Name">
                
                    <input type="text" class="form-control1" id="email" name="email" placeholder="Enter Your Email Id">
            
                    <input type="text" class="form-control1" id="phone" name="phone" placeholder="Enter Your Phone">
            
                    <textarea class="form-control1" name="message" id="message"  placeholder="Enter Your Message"></textarea>

                    <div class="g-recaptcha" data-sitekey="****************************"></div>                   
                    </br>
                    <input type="submit" name="insert" id="insert" value="Submit">
                </form>
                
            </div>
            <div class="modal-footer" style="background: #2874f0;padding: 25px;">
                <p>footer</p>
            </div>
        </div>
    </div>
</div>

In this code, I have create a bootstrap modal which is open when page is load and inside modal body I have create a simple enquiry from with Google recaptch. Now, I want to insert form data using ajax without loading page after inserting value into database it show successfull message.

So, How can I do this ?Please help me.

Thank You

Upvotes: 3

Views: 13998

Answers (2)

Kundan Prasad
Kundan Prasad

Reputation: 576

change in controller

note: please read commented line for better undersatnding

public function signin()
{
    if($this->input->post('insert'))
    {
        $name = trim($this->input->post('name'));
        $email = trim($this->input->post('email'));
        $phone = trim($this->input->post('phone'));
        $message = trim($this->input->post('message'));
        $s_data = date('Y-m-d');

        $data = array(
                    'name' => $name,
                    'email' => $email,
                    'phone' => $phone,
                    'message' => $message,
                    's_date' => $s_date
                    ); 

        $recaptchaResponse = trim($this->input->post('g-recaptcha-response'));
        $userIp=$this->input->ip_address();
        $secret='****************************';
        $url="https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response;=".$recaptchaResponse."&remoteip;=".$userIp;
        $response = $this->curl->simple_get($url);
        $status= json_decode($response, true);


        if($status['success'])
        {  
          //insert data when get success in google recaptcha
          $this->db->insert('contact',$data);   
          $res['msg']="successfull";
          //no need to set flash session in CI for ajax
            //$this->session->set_flashdata('flashSuccess', 'successfull');
        }
        else
        {
            //$this->session->set_flashdata('flashSuccess', 'Sorry Google Recaptcha Unsuccessful!!');
            $res['msg']="Sorry Google Recaptcha Unsuccessful!!";
        }
        //set page header as json format
        $this->output
        ->set_content_type('application/json')
        ->set_output(json_encode($res));
    }
}

change your script

<script>
    $(document).ready(function(){
        $("#insert").click(function(){
            var name = $("#name").val();
            var email = $("#email").val();
            var phone = $("#phone").val();
            var message = $("#message").val();
            //pass object in post
            var dataString = {'name': name , 'email': email , 'phone': phone , 'message': message};
            if(name==''||email==''||phone==''||message=='')
            {
                alert("Please Fill All Fields");
            }
            else
            {
                // AJAX Code To Submit Form.
                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url('index.php/'); ?>test/signin",
                    data: dataString,
                    dataType: 'json',
                    cache: false,
                    success: function(result){
                        alert(result.msg);
                    }
                });
            }
            return false;
        });
    });
</script>

thanks

Upvotes: 0

user8024764
user8024764

Reputation:

step 1) in test.php load db

public function __construct()
{
    parent::__construct();
    $this->load->database();
}

step 2) modify 

$this->db->insert('contact',$data);
  if($status['success'])
  {
    // code
  }

to 

if($this->db->insert('contact',$data))
{
  //rest of code
}

it should work

Upvotes: 1

Related Questions