Uncaught TypeError: "#category-name".val is not a function

Question

I got an error

Uncaught TypeError: "#category-name".val is not a function
at HTMLButtonElement.<anonymous> (<anonymous>:28:42)
at HTMLButtonElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLButtonElement.y.handle (jquery-3.3.1.min.js:2)

in jquery script that shows up in console. And here is my code for categories.html

<h2>Categories</h2>

<hr />

<div class="row">

    <div class="col-lg-5">
        <h4>Add new</h4>
            <form>
                <div class="form-group">
                    <label for="category-name">Enter name</label>
                    <input type="text" class="form-control" id="category-name" />
                    <div class="invalid-feedback">
                        Please enter the category name
                    </div>
                </div>

                <div class="form-group">
                    <label for="category-desc">Description</label>
                    <input type="text" class="form-control" id="category-desc" />
                    <div class="invalid-feedback">
                        Please enter some short description for the category
                    </div>
                </div>

                <div class="form-group">
                    <label for="category-thumbnail">Thumbnail</label>
                    <input type="file" class="form-control" id="category-thumbnail" />
                    <div class="invalid-feedback">
                        Please choose a valid image thumbnail
                    </div>
                </div>

                <div class="form-group">
                        <Img id="selected-thumbnail" width="250" height="150" src="#">
                </div>

                <div class="form-group">
                    <div class="progress">
                        <div class="progress-bar" id="upload-progress" style="width:0%">0%</div>
                    </div>
                </div>

                <div class="form-group">
                    <button id="save-category" type="button" class="btn btn-primary">Save</button>
                </div>
            </form>

            <div id="result">
            </div>
    </div>

    <div class="col-lg-7">
        <h4>Saved Categories</h4>

    </div>
</div>

<script>
    var  validImageTypes = ["image/gif", "image/jpeg", "image/png",];

    $("#selected-thumbnail").hide();

    function previewThumbnail(thumbnail){
        if(thumbnail.files && thumbnail.files[0]){
            var reader = new FileReader();

            reader.onload = function(e){
                $("#selected-thumbnail").attr('src', e.target.result);
                $("#selected-thumbnail").fadeIn();
            }

            reader.readAsDataURL(thumbnail.files[0]);
        }
    }

    $("#category-thumbnail").change(function(){
        previewThumbnail(this);
    });

    $("#save-category").click(function(){
        $("#category-name").removeClass("is-invalid");
        $("#category-desc").removeClass("is-invalid");
        $("#category-thumbnail").removeClass("is-invalid");

        var catname = ("#category-name").val();
        var desc = ("#category-description").val();
        var thumbnail = ("#category-thumbnail").prop("files")[0];

        if(!catname){
            $("#category-name").addClass("is-invalid");
            return;
        }

        if(!desc){
            $("#category-desc").addClass("is-invalid");
            return;
        }

        if(thumbnail == null){
            $("#category-thumbnail").addClass("is-invalid");
            return;
        }

        if($.ifArray(thumbnail["type"], validImageTypes)<0){
            $("#category-thumbnail").addClass("is-invalid");
            return;
        }

        //upload the image and save category

    });
</script>

But if I write ("#category-name").val in place of ("#category-name").val() the error fades away. It is persistent with ("#category-desc").val() and ("#category-thumbnail").prop(files)[0] as well and I cannot really getting why is this happening?? It looks like there is nothing with the coding or jquery script or may be something wrong with the ifArray that cannot figure out.

Answer 1

Replace this $ is missing in your code. :)

$("#save-category").click(function(){
        $("#category-name").removeClass("is-invalid");
        $("#category-desc").removeClass("is-invalid");
        $("#category-thumbnail").removeClass("is-invalid");

        var catname = $("#category-name").val();
        var desc = $("#category-description").val();
        var thumbnail = $("#category-thumbnail").prop("files")[0];

        if(!catname){
            $("#category-name").addClass("is-invalid");
            return;
        }

        if(!desc){
            $("#category-desc").addClass("is-invalid");
            return;
        }

        if(thumbnail == null){
            $("#category-thumbnail").addClass("is-invalid");
            return;
        }

        if($.ifArray(thumbnail["type"], validImageTypes)<0){
            $("#category-thumbnail").addClass("is-invalid");
            return;
        }

        //upload the image and save category

    });