OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Hide form after submitting

  • Thread starter Thread starter ryanl
  • Start date Start date
R

ryanl

Guest
I am trying to create a hook that hides my form after it has been submitted whilst trying to show the message sent image afterwards, but I can't seem to get the form to disappear.

so far I have tried this:

Code:
const ContactForm = () => {
  ...
  const [show, setShow] = React.useState(true);

const handleSubmit = (e) => {
  ...
}

My content is here:

Code:
return (
 <>
  {show ? (
          <form onSubmit={handleSubmit} className='email-form'>
            <div className='form'>
              <input .../>
              <input .../>
              <textarea .../>
            </div>
            <button
              disabled={!name || !email || !message}
              onClick={() => {
                handleSubmit();
                setShow(!show);
                if(!handleSubmit) {
                  setShow(false)
                } else {
                  setShow(true)
                }
              }}
             type="submit"
             className='send-btn'
            >
              <span>Send Message</span>
           </button>
   
       <div className='message-sent'>
          <CircleCheckBig className='sent-tick' strokeWidth={1} size={200}/>
          <p className='sent-message'>Message Sent</p>
        </div>
      </form>) : null}
  </>

I want the 'email-form' to disappear when the 'Send Message' button is clicked and to be replaced with the message-sent <div>. Any ideas on how to achieve this?

I tried an if statement and hooks mainly.

<p>I am trying to create a hook that hides my form after it has been submitted whilst trying to show the message sent image afterwards, but I can't seem to get the <code>form</code> to disappear.</p>
<p>so far I have tried this:</p>
<pre><code>const ContactForm = () => {
...
const [show, setShow] = React.useState(true);

const handleSubmit = (e) => {
...
}

</code></pre>
<p>My content is here:</p>
<pre><code>return (
<>
{show ? (
<form onSubmit={handleSubmit} className='email-form'>
<div className='form'>
<input .../>
<input .../>
<textarea .../>
</div>
<button
disabled={!name || !email || !message}
onClick={() => {
handleSubmit();
setShow(!show);
if(!handleSubmit) {
setShow(false)
} else {
setShow(true)
}
}}
type="submit"
className='send-btn'
>
<span>Send Message</span>
</button>

<div className='message-sent'>
<CircleCheckBig className='sent-tick' strokeWidth={1} size={200}/>
<p className='sent-message'>Message Sent</p>
</div>
</form>) : null}
</>

</code></pre>
<p>I want the <code>'email-form'</code> to disappear when the 'Send Message' button is clicked and to be replaced with the <code>message-sent</code> <code><div></code>. Any ideas on how to achieve this?</p>
<p>I tried an if statement and hooks mainly.</p>
 

Latest posts

Top