Tips for showing a different div in the chat window after submitting the form

Question

Tips for showing a different div in the chat window after submitting the form

My index html file features a chat window designed like this:

https://i.sstatic.net/PPGoy.png

Below the submit button is an area to input text. How can I hide or disable this section and enable it only after the form is filled and the submit button is clicked? I attempted to hide the div class but encountered an error.

Here is the relevant HTML code:

<html>

   <head>
      <title>Chatbot</title>
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Raleway:500&display=swap" rel="stylesheet">
   
   ...

javascript html jquery css

Answer 1

Answer №1

To tackle this issue, start by identifying the specific textarea element that you wish to hide/disable using

const textarea = document.querySelector("#userInput");

.

Once you have successfully targeted it, you can disable it with: textarea.disabled = true; (this will still display the element on the page but prevent any interaction with it).

Alternatively, you can opt to completely hide it with textarea.style.display = "none";.

In order to re-enable/display the textarea in your validateForm function after form submission, use the following code snippet:

    function validateForm() {
              if (!validateName() || !validatePhone() || !validateEmail()) {
                alert("Form not submitted"); //Validation Message
                return false;
              } else {
                submitted = true;
                form.style.display = "none";

                textarea.disabled = false;
                textarea.style.display = "inline-block";

                return true;
              }
            }

Full implementation:

    const textarea = document.querySelector("#userInput"); //select the target textarea element
    textarea.disabled = true; //disable it
    textarea.style.display = "none"; //or hide it completely

    function validateForm() {
      if (!validateName() || !validatePhone() || !validateEmail()) {
        alert("Form not submitted"); //Validation Message
        return false;
      } else {
        submitted = true;
        form.style.display = "none";
        textarea.disabled = false; //re-enable it
        textarea.style.display = "inline-block"; //or display it again
        return true;
      }
    }

Answer 2

To tackle this issue, start by identifying the specific textarea element that you wish to hide/disable using

const textarea = document.querySelector("#userInput");

.

Once you have successfully targeted it, you can disable it with: textarea.disabled = true; (this will still display the element on the page but prevent any interaction with it).

Alternatively, you can opt to completely hide it with textarea.style.display = "none";.

In order to re-enable/display the textarea in your validateForm function after form submission, use the following code snippet:

    function validateForm() {
              if (!validateName() || !validatePhone() || !validateEmail()) {
                alert("Form not submitted"); //Validation Message
                return false;
              } else {
                submitted = true;
                form.style.display = "none";

                textarea.disabled = false;
                textarea.style.display = "inline-block";

                return true;
              }
            }

Full implementation:

    const textarea = document.querySelector("#userInput"); //select the target textarea element
    textarea.disabled = true; //disable it
    textarea.style.display = "none"; //or hide it completely

    function validateForm() {
      if (!validateName() || !validatePhone() || !validateEmail()) {
        alert("Form not submitted"); //Validation Message
        return false;
      } else {
        submitted = true;
        form.style.display = "none";
        textarea.disabled = false; //re-enable it
        textarea.style.display = "inline-block"; //or display it again
        return true;
      }
    }

Tips for showing a different div in the chat window after submitting the form

Answer №1

Similar questions

Implementing iOS scrollbars as a solution for the Bootstrap 4 Carousel Bug that triggers extra swipes with just a click or tap

How can you use three.js to easily create a cylinder with a slice removed from it?

Embedding a Three.JS renderer within a canvas or div element

Tips for transferring a dataTable from C# code behind to jQuery

IE11 is unable to display the background image

Whenever a specific item within a list-group is clicked, I aim to display additional information pertaining to that particular selection

numerous items sharing identical key values

Utilize CodeIgniter to input information into the database

Content and footer being covered by the sidebar

I am unable to establish a connection with the database following the utilization of AJAX

Tips for placing text on top of an image within a <p> element

Make sure to incorporate certain node_modules folders within Babel 7

The most recent axios request yielded a null response

Visible images remain unloaded by Lazy Load

Identifying when the mouse hovers over a hidden element

The attempt to log in using AJAX and PHP was unsuccessful

What could be causing the file resumeData.json to not load correctly on GitHub pages after deployment?

Clicking on text will open a popup div using HTML and CSS

Form for sending mail using custom AJAX capabilities

Creating a pull-up toolbar with just HTML and CSS for an Android browser