console.log 在我的輸入字段中給出 undefined

Question

腳本：

    $(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);
        });
    });

形式：

<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>

需要建議，即使輸入類型和腳本的 var 數據中的變量相同，我添加內容的輸入字段事件也會返回undefined

我還嘗試將 class="category_name" 更改為 name="category_name"

我錯過了什么？

Answer 1

您的 HTML 標簽包括兩個class屬性：

<input type="text" class="form-control form-group w-100" placeholder="Category Name" class="category_name">
                   ^^^ here                                                          ^^^ and here

瀏覽器忽略了第二個，所以你的 jQuery 選擇器返回空集。

您應該將類​​屬性組合成一個字符串：

<input type="text" class="form-control form-group w-100 category_name" placeholder="Category Name">

Answer 2

你不能雙重聲明類。

你有<input type="text" class="form-control form-group w-100" placeholder="Category Name" class="category_name">

您需要將所有類一起聲明，如下所示：

<input type="text" class="category_name form-control form-group w-100" placeholder="Category Name" >

 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); };

 <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 category_name" placeholder="Category Name" value=""> </div> <div class="form-group"> <textarea class="form-control w-100 category_description" placeholder="Category Description" cols="50" rows="10" value=""></textarea> </div> <button id="submit"> Save</button>