Materialize CSS Text Area Undefined When Passed As Object-CodePudding

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 ><div ><textarea id="textarea1" 
></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

CodePudding user response：

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 >
    <div >
        <!-- Here we set the name for #textarea1 -->
        <textarea id="textarea1" name="textarea1" >
        </textarea>
        <label for="textarea1">
            Further Details
        </label> 
    </div>
</div>