console.log gives out undefined on my input field

Question

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:

Add New Category

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?

user_14853083 · Answer

Your HTML tags include two class attributes:


                   ^^^ here                                                          ^^^ and here

The browser is ignoring the second one, so your jQuery selectors are returning empty sets.

You should combine the class attributes into one string:

user_15920836 · Answer

You cannot double declare class.

Where you had

You instead need to declare all classes together, like so:

document.getElementById('submit').onclick=function(e){
    e.preventDefault();
    var data = {
        'category_name': document.getElementsByClassName('category_name')[0].value,
        'category_description': document.getElementsByClassName('category_description')[0].value,
    }
    console.log(data);
};

Add New Category

console.log gives out undefined on my input field

2 Answers