0

I want to create form in popup and then show the result in the same popup. Data has been inserted, but after insert, the popup was close.

What I want is after submit form clicked, the data insert to database, and the result data show in same popup page.

Here's the view page

 <script type="text/javascript">
  $('a[href="#myModal"]').on('click',function(){
  var category= $(this).attr('data-value');

  $('input[name="category"]').val(category);

//Save Data
$('#add_btn').on('click',function(){
    var product_name=$('#product_name').val();
    var price=$('#price').val();
    var category=$('#category').val();

    $.ajax({
        type : "POST",
        url  : "<?php echo admin_url(). 'product/add_product'; ?>",
        data : {product_name:product_name, price:price, category:category},
        success : function(data){
            var data = JSON.parse(data);
            var html = '';
            var i;

            for(i=0; i<data.length; i++){

                html += '<tr>'+
                            '<td>'+data[i].product_name+'</td>'+
                            '<td>'+data[i].price+'</td>'+
                        '</tr>';
            }
            $('#show_product').html(html);

        }
    })
});
});
</script>

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Category Product</h4>
        </div>

        <div class="modal-body">
            <form method="post" id="task-form">
                <table class="table">
                    <tbody>
                        <tr>
                            <td><label for="product_name">Product Name</label></td>
                            <td></td>
                            <td><input type="text" class="form-control" name="product_name" id="product_name"></td>
                        </tr>
                        <tr>
                            <td><label for="price">Price</label></td>
                            <td></td>
                            <td><input type="text" class="form-control" name="price" id="price"></td>
                        </tr>
                        <tr>
                            <input type="hidden" id="category" name="category" value="">
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><button type="submit" class="btn-primary" value="Submit" id="add_btn">Add Product</button></td>
                        </tr>
                    </tbody>
                </table>
            </form>

            <table class="table">
                <thead>
                    <tr>
                        <th>Product Name</th>
                        <th>Price</th>
                    </tr>
                </thead>

                <tbody id="show_product">
                </tbody>

            </table>
        </div>
    </div>
</div>

Here's controller

   public function add_product()
   {
       $product_name= $this->input->post('layanan');
       $price = $this->input->post('kapasitas');
       $category = $this->input->post('jenis');

       $data2 = array(
        'product_name' => $product_name,
        'price' => $price,
        'category' => $category
        );

        $this->product_model->input_product($data, db_prefix() . 'product');
        $data=$this->product_model->list_product($category);
        echo json_encode($data);
    }

Here's my model

public function input_product($data2,$table)
{
   $this->db->insert($table,$data2);
}

public function list_product($category){
    $abc=$this->db->query("SELECT * FROM tblcategory WHERE category='$category'");
    if($abc->num_rows()>0){
        foreach ($hsl->result() as $data) {
            $desc[]=array(
                'product_name'           => $data->product_name,
                'price'                  => $data->price,
            );
        }
    }
    return $desc;
}

Thank you

2
  • change button type from submit to button . overall it looks fine Commented Jan 2, 2020 at 14:10
  • Hi @AhmedSunny, the data result is not showing after I click the button, but yes, the data success go to database Commented Jan 3, 2020 at 2:26

1 Answer 1

1

100% [ SOLVED ]

Here's view page

<script type="text/javascript">
  $('a[href="#myModal"]').on('click',function(){
  var category= $(this).attr('data-value');

  $('input[name="category"]').val(category);

//Save Data
$('#add_btn').on('click',function(){
    var product_name=$('#product_name').val();
    var price=$('#price').val();
    var category=$('#category').val();

    $.ajax({
        type : "POST",
        url  : "<?php echo admin_url(). 'product/add_product'; ?>",
        data : {product_name:product_name, price:price, category:category},
        success : function(data){
            var data = JSON.parse(data);
            var html = '';
            var i;

            for(i=0; i<data.length; i++){

                html += '<tr>'+
                            '<td>'+data[i].product_name+'</td>'+
                            '<td>'+data[i].price+'</td>'+
                        '</tr>';
            }
            $('#show_product').html(html);

        }
    })
});
});
</script>

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Category Product</h4>
        </div>

        <div class="modal-body">
            <form method="post" id="task-form">
                <table class="table">
                    <tbody>
                        <tr>
                            <td><label for="product_name">Product Name</label></td>
                            <td></td>
                            <td><input type="text" class="form-control" name="product_name" id="product_name"></td>
                        </tr>
                        <tr>
                            <td><label for="price">Price</label></td>
                            <td></td>
                            <td><input type="text" class="form-control" name="price" id="price"></td>
                        </tr>
                        <tr>
                            <input type="hidden" id="category" name="category" value="">
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><button type="button" class="btn-primary" value="Submit" id="add_btn">Add Product</button></td>
                        </tr>
                    </tbody>
                </table>
            </form>
             </div>
            <table class="table">
                <thead>
                    <tr>
                        <th>Product Name</th>
                        <th>Price</th>
                    </tr>
                </thead>

                <tbody id="show_product">
                </tbody>

            </table>
        </div>

</div>

Here's controller

public function add_product()
   {
       $product_name= $this->input->post('layanan');
       $price = $this->input->post('kapasitas');
       $category = $this->input->post('jenis');

       $data2 = array(
        'product_name' => $product_name,
        'price' => $price,
        'category' => $category
        );

        $this->product_model->input_product($data, db_prefix() . 'product');
        $data=$this->product_model->list_product($category);
        echo json_encode($data);
    }

Here's my model

public function input_product($data2,$table)
{
   $this->db->insert($table,$data2);
}

public function list_product($category){
    $abc=$this->db->query("SELECT * FROM tblcategory WHERE category='$category'");
    if($abc->num_rows()>0){
        foreach ($hsl->result() as $data) {
            $desc[]=array(
                'product_name'           => $data->product_name,
                'price'                  => $data->price,
            );
        }
    }
    return $desc;
}

I hope it's working well.

Thankyou

Sign up to request clarification or add additional context in comments.

1 Comment

okay. please upvote my answer if you are satisfied with my answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.