Uncaught TypeError: "# category-name" .val не является функцией

Я получил ошибку

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)

в скрипте jquery, который отображается в консоли. И вот мой код для 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>

Но если я напишу ("#category-name").valвместо ("#category-name").val()ошибки, исчезает. Это сдавайтесь ("#category-desc").val()и ("#category-thumbnail").prop(files)[0]как хорошо , и я не могу получать , почему это происходит ?? Похоже, что нет ничего с кодом или jquery-скриптом или может быть что-то неправильное с тем, ifArrayчто не может понять.

jquery,html,uncaught-typeerror,

1

Ответов: 1


2 принят

Заменить этот $ отсутствует в вашем коде. :)

$("#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

    });
JQuery, HTML, неперехваченный-TypeError,
Похожие вопросы