"Exploring the Issue of Undefined Materialize CSS Text Area When Used as an Object

There is a sidebar within a Google Sheet that runs an HTML file calling Materialize CSS. The sidebar contains three text inputs that work fine, but there is one text area that keeps failing. I am wondering if anyone has any thoughts on this issue. Here is the code for the text area:

<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 submit button on the sidebar is clicked, the following code is executed:

 <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 inputs, the data is transferred to a function which utilizes it to send an email. However, the text area output appears as:

 Further Details:

 undefined

The body of the email is generated using the following code (Condensed version):

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

I have also included Materialize's JS:

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

Thank you.

Answer №1

textarea's name attribute is left unset. Although the id is not transmitted, each name attribute acts as a key:

When you invoke a server function with a form element as an argument, the form transforms into a unified object where field names become keys and field values represent the corresponding values

<div class="row">
    <div class="input-field col s12">
        <!-- Defining the name for #textarea1 -->
        <textarea id="textarea1" name="textarea1" class="materialize-textarea">
        </textarea>
        <label for="textarea1">
            Additional Information
        </label> 
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the size of points positioned absolutely on an image map

Are you struggling to position POIs on a picture map correctly? Check out this link for more information: Even after trying CSS scale and re-positioning in media queries, getting the points in the right place seems impossible. What do you think? Can this ...

Safari disables any animation when redirecting or submitting a form

When a link is clicked, I have an animation that enlarges a div and fades out using jQuery. At the same time the link is clicked, a redirect is triggered by submitting a form to ensure speed. The redirect cannot be placed in the success function of jQuery& ...

CSS - Aligning div below the other one does not function properly on compact screens

Currently, I am utilizing the zurb-foundation as a CSS framework for my layout. Within this layout, there is a header consisting of a title bar and two divs. The left div occupies 4 columns on larger screens, while the right div takes up 8 columns. The rig ...

CSS menu with disappearing sub-menu on hover

I'm currently tackling a CSS-only menu project, but I'm struggling with keeping the sub-menu visible when moving away from the li element. The height should span 100% of the page, and the sub-menu should mirror the main menu, appearing to the ri ...

Is there a way to make the table header stretch across the entire table when using display properties to simulate a <table>?

I made a switch from an old table to a new one constructed using Divs, and everything seems to be working fine except for one issue. I am trying to create a header that spans the entire width of the table without having multiple cells in the heading like i ...

Fluid animation using CSS for recently added elements in a scrolling list

I've been searching for a way to create a smooth animation effect when a new element is added to a scrolling list. For example, as a new element is added to the top of the list and older elements are pushed down, I want the transition to be visually ...

Why is the "text-overflow: ellipsis" property of a parent div not functioning properly for its child div?

Why is the CSS property text-overflow: ellipsis not working on a child div with the class name cluster-name? .ft-column { flex-basis: 0; flex-grow: 1; padding: 4px; text-overflow: ellipsis; overflow: hidden; } .ft-column > .cluster-name { ...

Exploring the process of customizing native classes with Vue.js

Within vue-awesome-swiper, there's a standard class called this: .swiper-button-next { position: absolute; right: 46% } The task at hand is to adjust this CSS code only for right-to-left layouts, like so: .swiper-button-next { position: abso ...

What is the correct way to apply CSS to center text within a colored box that has rounded corners?

I want to use CSS to create an image that resembles the one in the attached .png file. The box should be approximately 280x30 pixels in size. Can anyone guide me on how to achieve this? Thank you for any assistance! enter image description here ...

Animating Divs with jQuery to Expand their Size

I am currently designing a services page for my portfolio website. The layout consists of three columns, with the central column containing a large box and the left and right columns each containing three smaller boxes. These smaller boxes function as clic ...

Issue with content not moving downward when the drop-down menu collapses

I'm facing an issue with adjusting the layout of my pages when the main Menu collapses. The links that drop down from the Menu are staying on top of the content, and I want them to move down as well. Unfortunately, since some of my pages are integrate ...

Anchor scrolling implemented with fixed navigation bar

I'm attempting to create a fixed navigation with anchor links that scroll smoothly to the designated section. The challenge lies in the fact that my navigation is positioned near the bottom of the screen. As a result, when the user scrolls down and th ...

Utilizing the background-clip property with a gradient overlay

My Objective: https://i.sstatic.net/DscXK.png My goal is to have both the arrow container and the full-width bar share the same gradient. I initially tried creating them separately and applying the gradient individually, but it resulted in a clipped look. ...

Ensure that the width of the sibling div matches the width of its sibling image

I need help displaying an image with two buttons positioned below it. The dimensions of the image can vary, so I've set a max-width of 60% and max-height of 80%. However, I'm struggling to align the buttons correctly under the image - with the le ...

Stack 2 cards inside a DIV vertically using Materialize CSS

My form and table are currently positioned side by side in 2 columns: https://i.sstatic.net/croh3.png The layout of this form/table is built using datatable + materialize CSS. I am looking to place the Form and table within a div to ensure that the bott ...

Concealing or revealing an image with jQuery when hovering

I currently have 3 <a> tags within my html, each containing 2 images. Specifically, the greyscale images are the ones that are visible while the colored ones are set to display:none. I am aiming to achieve a functionality where upon hovering over th ...

Transitioning Dropdowns in Angular UI Bootstrap

Hello everyone, I am completely new to both Stack Overflow and AngularJS. I'm attempting to incorporate a fade-in animation into my dropdown (using UI Bootstrap's dropdown directive) without success. This issue is quite similar to the following ...

The dropdown menu in the bootstrap is not being properly filled with content on the webpage

In my header file, I am attempting to add a bootstrap dropdown that will display the user id along with two other options in the dropdown menu. Within the header file, I have created a new div element for the dropdown and linked it to a php file where the ...

Is there a way to prevent my <div> from scrolling when the mouse hovers over it?

I currently have a div that is set to scroll infinitely using JavaScript: <script language="javascript"> i = 0 var speed = 1 function scroll() { i = i + speed var div = document.getElementById("content") div.scrol ...

Tips for positioning a div element within the body of a webpage to maintain a predetermined height and width

Currently, I am developing a single-page application using AngularJS. I have specific routes in mind where I want to introduce new HTML templates. To accomplish this, I have created a container labeled with the ID #main positioned between two navbars (he ...