Welcome Guest, Not a member yet? Register   Sign In
how to reset/clear form fields after Modal closed
#1
Question 
(This post was last modified: 07-15-2022, 06:02 AM by Ahmed Haroon.)

was following a tutorial (https://mfikri.com/en/blog/crud-codeigniter4-modal) it was contained 2 separate codes for Add & Edit but I want to use 1 single code for both Add & Edit. so, rename EditModal to dmlModal and used same for Add too, is this approach is right or i have to change? please if have a link for same, help post here.
created a view file which have Single Modal for both Add & Edit actions, but when click on Edit in the list view and close (edited or not) and press Add button, the Modal shows previously selected data.
how i can refresh / reset / clear that form completely after closing no matter use made changes or not ( user pressed Close or Save button or pressing x on right top corner... in all cases ), please help. 
note: i am exploring CI and not yet touched JS 
regards
in Controller method ' update ' :
   
PHP Code:
public function update()
    {
        $model = new Product_model();
        $id $this->request->getPost('product_id');
        if (!$id){
        $data = array(
            'product_name'        => $this->request->getPost('product_name'),
            'product_price'       => $this->request->getPost('product_price'),
            'product_category_id' => $this->request->getPost('product_category'),
        );
        $model->saveProduct($data);
        }
        else {
        $data = array(
            'product_name'        => $this->request->getPost('product_name'),
            'product_price'       => $this->request->getPost('product_price'),
            'product_category_id' => $this->request->getPost('product_category'),
        );
        $model->updateProduct($data$id);
        }
        return redirect()->to('/product');
    

view file below:
PHP Code:
<!DOCTYPE html>
<
html lang="en">
<
head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Product Lists</title>
    <!-- <link rel="stylesheet" href="/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="<?php echo base_url('/css/bootstrap.min.css'); ?>"/>
</
head>
<
body>
    <div class="container">
    <h3>Product Lists</h3>
    <!-- <button type="button" class="btn btn-success mb-2" data-toggle="modal" data-target="#addModal">Add New</button> -->
    <button type="button" class="btn btn-success mb-2" data-toggle="modal" data-id="" data-name=""  data-price="" data-category_id="" data-target="#dmlModal">Add New</button>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Category</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
            <?php foreach($product as $row):?>
                <tr>
                    <td><?= $row->product_name;?></td>
                    <td><?= $row->product_price;?></td>
                    <td><?= $row->category_name;?></td>
                    <td>
                        <a href="#" class="btn btn-info btn-sm btn-edit" data-id="<?= $row->product_id;?>" data-name="<?= $row->product_name;?>" data-price="<?= $row->product_price;?>" data-category_id="<?= $row->product_category_id;?>">Edit</a>
                        <a href="#" class="btn btn-danger btn-sm btn-delete" data-id="<?= $row->product_id;?>">Delete</a>
                    </td>
                </tr>
            <?php endforeach;?>
            </tbody>
        </table>
 
    </div>

    <!-- Modal Add/Edit Product-->
    <form action="/product/update" method="post">
        <div class="modal fade" id="dmlModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add/Edit Product</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            
                <div class="form-group">
                    <label>Product Name</label>
                    <input type="text" class="form-control product_name" name="product_name" placeholder="Product Name">
                </div>
                
                <div class="form-group">
                    <label>Price</label>
                    <input type="text" class="form-control product_price" name="product_price" placeholder="Product Price">
                </div>
 
                <div class="form-group">
                    <label>Category</label>
                    <select name="product_category" class="form-control product_category">
                        <option value="">-Select-</option>
                        <?php foreach($category as $row):?>
                        <option value="<?= $row->category_id;?>"><?= $row->category_name;?></option>
                        <?php endforeach;?>
                    </select>
                </div>
            
            </div>
            <div class="modal-footer">
                <input type="hidden" name="product_id" class="product_id">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
            </div>
        </div>
        </div>
    </form>
    <!-- End Modal Add/Edit Product-->

<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script>
    $(document).ready(function(){
 
        // get Edit Product
        $('.btn-edit').on('click',function(){
            // get data from button edit
            const id = $(this).data('id');
            const name = $(this).data('name');
            const price = $(this).data('price');
            const category = $(this).data('category_id');
            // Set data to Form Edit
            $('.product_id').val(id);
            $('.product_name').val(name);
            $('.product_price').val(price);
            $('.product_category').val(category).trigger('change');
            // Call Modal Edit
            $('#dmlModal').modal('show');
        });
 
        // get Delete Product
        $('.btn-delete').on('click',function(){
            // get data from button edit
            const id = $(this).data('id');
            // Set data to Form Edit
            $('.productID').val(id);
            // Call Modal Edit
            $('#deleteModal').modal('show');
        });
        
    });
</script>
</body>
</html> 

tried code below ( from stackoverflow ) in my view file but didn't worked
PHP Code:
<script>
    $(document).ready(function() {
    $('#dmlModal').on('hidden', function() {
    $(':input'this).val('');
    });
    });
</
script

.
Newbie here in CodeIgniter World !! Please appologize if any nonsense from me.  
environment: Windows 10, XAMPP 3.3.0, VS Code, SQLyog Community Ed. 
Reply
#2

This has nothing to do with CodeIgniter. It's a jQuery / javascript question.
CodeIgniter 4 tutorials (EN/FR) - https://includebeer.com
/*** NO support in private message - Use the forum! ***/
Reply
#3

How to clear all input fields in bootstrap modal when clicking data-dismiss button
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply
#4

(07-16-2022, 12:49 AM)InsiteFX Wrote: How to clear all input fields in bootstrap modal when clicking data-dismiss button


thanks very much for help, problem resolved with code below:
PHP Code:
$('#modal1').on('hidden.bs.modal', function (e) {
  $(this)
    .find("input,textarea,select")
      .val('')
      .end()
    .find("input[type=checkbox], input[type=radio]")
      .prop("checked""")
      .end();
}) 

regards
Newbie here in CodeIgniter World !! Please appologize if any nonsense from me.  
environment: Windows 10, XAMPP 3.3.0, VS Code, SQLyog Community Ed. 
Reply




Theme © iAndrew 2016 - Forum software by © MyBB