表单（在 Materialise 中）不返回用户输入答案

【问题标题】：Form (in Materialize) is not returning user input表单（在 Materialise 中）不返回用户输入
【发布时间】：2020-06-15 14:48:38
【问题描述】：

编辑：codepen 在这里：https://codepen.io/jeqp/pen/eYNEjoR

我正在使用其他人在 Materialize 中创建的表单，并且我正在尝试将该表单的用户输入获取到一个对象中。我在控制台日志中收到以下错误：

未捕获的类型错误：无法读取未定义的属性“修剪”

表单是在循环中创建的，我将在其中包含一个输入。

        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 的 Elements 部分中，我可以看到 titleInput ID 位于表单的输入部分中：但 titleInput 的 console.log 返回：titleInput: {"0":{},"length":1}，我期待一个字符串。

我在文档中找不到任何内容，也无法确定返回的内容以及从何处返回。任何帮助表示赞赏。

【问题讨论】：

你能建一个codepen吗？我们无法测试这段代码，因为 labelFor 没有定义。
我在这里创建了一个：codepen.io/jeqp/pen/eYNEjoR

标签： javascript jquery forms typeerror materialize

【解决方案1】：

我发现这里有两个问题。首先是我的输入框没有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 循环很重要，因为我的程序会根据用户输入动态生成表单。因此，如果用户没有启动表单的那部分，则不会添加默认值，并且值部分返回未定义，如上面的错误。所以我创建了布尔变量（titleAdd）并将它们设置为 false - 当用户单击以在表单中包含某些内容时，该 titleAdd 值设置为 true，因此当表单的数据被读取时，只有那些已选择的变量是读。

【讨论】：