**script:**

```
    $(document).ready(function (){
        $(document).on('click', '.add_category', function(e){
            e.preventDefault();
            var data = {
                'category_name': $('.category_name').val(),
                'category_description': $('.category_description').val(),
            }
            console.log(data);
        });
    });

```

**form:**

```
<h4 class="text-center font-weight-bold">Add New Category</h4>
<div class="form-group">
<input type="text" class="form-control form-group w-100" placeholder="Category Name" class="category_name">
</div> 
<div class="form-group">
<textarea class="form-control w-100" placeholder="Category Description" class="category_description" cols="50" rows="10"></textarea>
</div>

```

need advice, my input fields event with me adding content returns `undefined` even when the variable is the same at the input type and the script's var data

I also tried to change class="category\_name" to name="category\_name"

What am I missing?

[![1](https://i.stack.imgur.com/KXP44.png)](https://i.stack.imgur.com/KXP44.png)