Форма (в Materialise) не возвращает пользовательский ввод - PullRequest
Новая
       6

Форма (в Materialise) не возвращает пользовательский ввод

0 голосов
/ 03 марта 2020

РЕДАКТИРОВАТЬ: Кодовый код здесь: https://codepen.io/jeqp/pen/eYNEjoR

Я работаю с формой, созданной в Materialise кем-то другим, и пытаюсь получить пользовательский ввод эта форма в объект. В журнале консоли появляется следующая ошибка:

Uncaught TypeError: Невозможно прочитать свойство 'trim' из неопределенного

Форма создана в al oop, из которых Я включу один вход. 

        var userForm = $("#userConfirmTable");
        var createLi = $("<li>").addClass("col m12 userConfirmList");
        var createBox = $("<div>").addClass("input-field col s10");
        var createLabel = $("<label>").attr("for", labelFor);
        var createBtn = $("<button>").addClass("col s2 waves-effect waves-light btn btnDelete");
        var createMinus = $("<i>").addClass("fa fa-minus");

        for (var c = 0; c < createLi.length; c++) {
            var idNum = c;
        }

        if (labelFor == "titleName") {
            var createInput = $("<input>").attr("type", "text").attr("id", "titleInput");
            createBtn.attr("id", "titleBtnDel")
            // createLi.attr("id", "titleInput");
createBtn.append(createMinus);
        createLabel.text(textFor);
        createBox.append(createInput);
        createBox.append(createLabel);
        createLi.append(createBox);
        createLi.append(createBtn);
        userForm.append(createLi);

        var btnRemove = ".btnDelete";
        removeDiv(btnRemove);
    };

Затем я пытаюсь получить вход с помощью этого: 

         console.log("btnconfirm clicked");
        console.log("titleInput: " + JSON.stringify($("#titleInput")));
        event.preventDefault();

        var e = document.getElementById("titleInput");
        console.log("e: " +e);
        console.log("e.textcontent: " + e.textContent);


        // make a new website obj
        var newWebsite = {
          // title
          title: $("#titleInput").val().trim(),
          // tagline

В разделе Элементы Chrome я вижу, что ID titleInput ID находится во входном разделе формы: но console.log titleInput возвращает это: titleInput: {"0": {}, "length": 1} , и я ожидаю строку.

Я ничего не могу найти в документации и не могу понять, что и откуда возвращается. Любая помощь приветствуется.

1 Ответ

0 голосов
/ 04 марта 2020

Я решил, что здесь есть две проблемы. Во-первых, у моего поля ввода не было атрибута name, поэтому я настроил приведенный выше код, чтобы включить его: 

var createInput = $("<input>").attr("type", "text").attr("id", "titleInput").attr("name", "titleInput");

Затем, вместо того, чтобы получать элементы по ID, я получил их по имени, как показано ниже. Возвращается в виде массива, поэтому требуется индекс 0. 

if (titleAdd) {
            title1 = document.getElementsByName('titleInput')[0].value;
        }
        else {
            title1 = null;
        }

Значение if l oop важно, потому что моя программа генерирует форму динамически на основе пользовательского ввода. Таким образом, значения по умолчанию не добавляются, если пользователь не инициировал эту часть формы, а часть значения была возвращена неопределенной, как указано выше. Поэтому я создал логические переменные (titleAdd) и установил для них значение false - когда пользователь щелкнул, чтобы включить что-либо в форму, этому значению titleAdd присвоено значение true, поэтому, когда данные формы читаются, только те переменные, которые были выбраны, читать.

...