How to insert data from a modal PHP Codeigniter

Question

I have a modal form (simple) that I want to insert in my BD, but I'm not getting the expected result

modalview

this is the button that calls my modal:

  <button type='button' class='btn btn-info'  data-toggle="modal" data-target="#modal-default-cliente"><span class='fa fa-plus'></span></button>  

this is my modal:

<div class="modal fade" id="modal-default-cliente">
    <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">Agregar Usuario</h4>
            </div>
            <div class="modal-body">

         <form  method="POST" id="clienteform">

            <div class="form-group">
                <label for="nombrecompleto">Nombre Completo:</label>
                <input type="text" class="form-control" name="nombremodal" id="nombremodal" required="required">
            </div>

            <div class="form-group">
               <label for="telefono">Teléfono:</label>
               <input type="text" class="form-control" name="telefonomodal" id="telefonomodal">
            </div>

            <div class="form-group">
               <label for="direccion">Dirección:</label>
               <input type="text" class="form-control" name="direccionmodal" id="direccionmodal">
            </div>

                <div class="form-group">
                    <input type="submit" name="action" class="btn btn-success" value="Guardar">
                </div>
            </form>          

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary pull-right" data-dismiss="modal">Cerrar</button>
            </div>
        </div>            
    </div>        
</div>

This is my Javascript code, which by the way the parameters of the form arrive

$(document).on("submit", "#clienteform", function(event){
    event.preventDefault();
    var nombre = $("#nombremodal").val();
    var telefono = $("#telefonomodal").val();
    var direccion = $("#direccionmodal").val();   

    $.ajax({
        url: base_url+"mantenimiento/Ventas/agregarClientemodal", 
        method:'POST',
        success: function(data){
                    alert(data);
                     $("#modal-default-cliente").modal("hide");
            }
    });

});

This is my action in the "Ventas" Controller:

public function agregarClientemodal(){

        $data = array(
            'Nombre' => $this->input->post("nombremodal") ,
            'Telefono' => $this->input->post("telefonomodal"),
            'Direccion' => $this->input->post("direccionmodal"),
            'Estado' => "1"
             );

         $this->Ventas_model->agregarClientemodal($data);           

    }

and finally my function in the Sales model:

 public function agregarUsuariomodal($data){

       return $this->db->insert("Clientes",$data);
    }

I'm new to Codeigniter, and when I click on my save button, my modal window does nothing

Expected behavior: save the record and hide the modal

behavior obtained: clicking on the submit does nothing

what am I doing wrong? What do I need to validate? any help for me?

Answer 1

Hope this will help you :

Pass form post values with ajax's data using var formdata = $(this).serialize(); , and use site_url() for the URL

Your ajax should be like this :

$(document).ready(function(){
  $("#clienteform").on("submit", function(event){
    event.preventDefault();
    var formdata = $(this).serialize();
    $.ajax({
        url: '<?=site_url("mantenimiento/Ventas/agregarClientemodal");?>', 
        method:'POST',
        data : formdata,
        success: function(data)
        {
            alert(data);
            $("#modal-default-cliente").modal("hide");
        }
    });
  });
});

Your agregarClientemodal method should be like this :

public function agregarClientemodal()
{
    $data = array(
        'Nombre' => $this->input->post("nombremodal") ,
        'Telefono' => $this->input->post("telefonomodal"),
        'Direccion' => $this->input->post("direccionmodal"),
        'Estado' => "1"
         );

    $this->Ventas_model->agregarClientemodal($data);
    echo "success";
    exit;
}

Answer 2

Your base_url variable is not defined in javascript/jquery.

So you need to change that line into:

$.ajax({
    url: '<?php echo base_url("mantenimiento/Ventas/agregarClientemodal");?>', 
    method:'POST',
    success: function(data){
                alert(data);
                 $("#modal-default-cliente").modal("hide");
        }
});

it will generate correct url.

Further you can check console for error logs.