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>

需要建议，我的输入字段事件伴随着我添加内容 returns undefined 即使变量在输入类型和脚本的 var 数据相同时也是如此

我也试过把 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 选择器返回空集。

您应该将 class 个属性组合成一个字符串：

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

Answer 2

您不能重复声明 class。

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

您需要一起声明所有 class，如下所示：

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

console.log 在我的输入字段中给出 undefined

console.log gives out undefined on my input field

javascript

php

forms

console.log