Form (in Materialize) is not returning user input

Question

EDIT: The codepen is here: https://codepen.io/jeqp/pen/eYNEjoR

I'm working with a form created in Materialize by someone else, and I'm trying to get the user input of that form into an object. I get following error in the console log:

Uncaught TypeError: Cannot read property 'trim' of undefined

The form is created in a loop, of which I'll include one input.

        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);
    }; 

Then I try to get the input with this:

         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 

In the Elements section of Chrome I can see that the titleInput ID is in the input section of the form: but the console.log of titleInput returns this: titleInput: {"0":{},"length":1}, and I'm expecting a string.

I can't find anything in the documentation and I can't work out what is getting returned, and from where. Any help is appreciated.

Answer 1

I worked out there were two issues at play here. First is that my input field didn't have a name attribute, so I adjusted the above code to include one:

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

Then, instead of getting elements by ID, I got them by name, as demonstrated below. This is returned as an array, which is why the 0 index is required.

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

The if loop is important, because my program generates the form dynamically based on user input. As such, defaults didn't get added if the user didn't initiate that part of the form, and the value portion was returned undefined, as the error above. So I created boolean variables (titleAdd) and set them to false - when the user clicked to include something in the form, that titleAdd value is set to true, so when the data of the form is read only those variables that have been selected are read.