Remove text from form input after user clicks/submits-CodePudding

I'm wanting to remove texts from the input fields of a form once user has clicked submit. I was able to use basic DOM manipulation to clear the textarea which surprised me in React but then was unable to do DOM manipulation for the input text areas. Is this possible with DOM manipulation I'd love it if it were that easy. Or should I be going down a different path?

import "./contact.css";
import phone from "../../img/phone.png";
import email from "../../img/email.png";
import github from "../../img/github.png";
import link from "../../img/link.png";
import resume from "../../img/resume.png";
import { useRef, useState } from "react";
import emailjs from "@emailjs/browser";
import PDF from "../../img/PDF.pdf";

const Contact = () => {
  const formRef = useRef();
  const [done, setDone] = useState(false);

  const handleSubmit = (event) => {
    event.preventDefault();
    document.querySelector(".textarea").value = "";
    document.querySelector("usersinput").value = "";
    emailjs
      .sendForm(
        "0000",
        "0000",
        formRef.current,
        "0000"
      )
      .then(
        (result) => {
          console.log(result.text);
          setDone(true);
        },
        (error) => {
          console.log(error.text);
        }
      );
  };

  return (
    <div className="c">
      <div className="c-bg"></div>
      <div className="c-wrapper">
        <div className="c-left">
          <h1 className="c-title">Let's talk</h1>
          <div className="c-info">
            <div className="c-info-item">
              <img src={phone} alt="" className="c-icon" />
               61 0000
            </div>
            <div className="c-info-item">
              <img src={email} alt="" className="c-icon" />
              0000
            </div>
            <div className="c-info-item">
              <img src={resume} alt="" className="c-icon" />
              <a href={PDF} target="_blank">
                CV
              </a>
            </div>
            <div className="c-info-item">
              <img src={github} alt="" className="c-icon" />
              
            </div>
            <div className="c-info-item">
              <img src={link} alt="" className="c-icon" />
              
            </div>
          </div>
        </div>
        <div className="c-right">
          <p className="c-description">
            <b>Who are you?</b> lorem
          </p>
          <form ref={formRef} onSubmit={handleSubmit}>
            <input
              type="text"
              placeholder="name"
              name="user_name"
              className="userinputs"
            />
            <input
              type="text"
              placeholder="subject"
              name="user_subject"
              className="userinputs"
            />
            <input
              type="text"
              placeholder="email"
              name="user_email"
              className="userinputs"
            />
            <textarea
              rows="5"
              placeholder="please enter your message..."
              name="message"
              className="textarea"
            ></textarea>
            <button>Submit</button>
            {done && "      Thank you..."}
          </form>
        </div>
      </div>
    </div>
  );
};

export default Contact;

CodePudding user response：

You are trying to address a single element by class name, that's shared among several items. You need to use querySelectorAll() for that case and iterate over the result (need to assign to a variable) resetting their values to an empty string. An example would look like this:

let itms = document.querySelectorAll(".userinputs");
for (let itm of itms) {
    itm.value = "";
}

CodePudding user response：

You need to use the querySelectorAll method of the document object and you need to iterate through the list of elements returned by the method.

For example:

/* Get the elements whit the css selector '.userinputs' */
var elements = document.querySelectorAll(".userinputs");

/* Iterate the elements array */
for(var element of elements) {
    element.value = "";
}

The-Lomax's answer is correct but the querySelectorAll method uses css selectors to search for elements so to search for a class you need to put a . in front of its name.