Materialize CSS Text Area Undefined When Passed As Object

Question

Within a Google Sheet there's a sidebar that runs an HTML file that calls Materialize CSS. This sidebar contains three text inputs, work fine, and one text area that keeps failing and wondered if anyone had any thoughts. The text area's code:

<div class="row"><div class="input-field col s12"><textarea id="textarea1" 
class="materialize-textarea"></textarea><label for="textarea1">Further Details</label> 
</div></div>'

When the sidebar's submit button is click the following code is run:

 <input type="button" style="height:40px; width:100px; font-weight:bold;" 
 value="Send" onclick="google.script.run.sendEmail(this.parentNode);"/></form>'

For all three text input the data is pulled across to a function that uses it to send an email. However the text area comes out as:

 Further Details:

 undefined

The body code for the email is: (Condensed down)

var body = obj.textinput1+obj.textinput2+obj.textinput3+obj.textarea1

Have added Materialize's JS too

$('#textarea1').val('New Text');
M.textareaAutoResize($('#textarea1'));

Many thanks

Answer 1

textarea's name is not set. id isn't transferred, but names become keys:

If you call a server function with a form element as a parameter, the form becomes a single object with field names as keys and field values as values

<div class="row">
    <div class="input-field col s12">
        <!-- Here we set the name for #textarea1 -->
        <textarea id="textarea1" name="textarea1" class="materialize-textarea">
        </textarea>
        <label for="textarea1">
            Further Details
        </label> 
    </div>
</div>