How would I prevent the further use of a send button after the first use, and say thank you after?-CodePudding

I have a contact me form on my website and when you press the send button, it gives no indication of whether it was sent so I would presume people would spam it, thus giving me several emails. How would I stop displaying the button and leave a message like "Thank you for contacting me". This is my form code, it is in react and uses bootstrap for styling.

<section>
        <div className="container rounded text-center" style={{ width: '80%',background: "#191919" }}>
            <h1 style={{fontFamily: 'Recoleta', color: "#fff"}} id="contact">
              Contact Me
            </h1>
            <form className="row" style={{margin:"25px 85px 75px 100px"}} 
            onSubmit={sendEmail}>
              <label style={{fontFamily: 'Recoleta', color: "#fff"}}> Name </label>
              <input type="text" name="name" className="form-control style ="/>

              <label style={{fontFamily: 'Recoleta', color: "#fff"}}> Email </label>
              <input type="email" name="user_email" className="form-control"/>

              <label style={{fontFamily: 'Recoleta', color: "#fff"}}> Message </label>
              <textarea name= "message" rows="4" className="form-control" /> 
              <input type='submit' value='Send' className="form-control btn btn-primary"
              style={{marginTop: "30px"}}/>
            </form>
        </div>
        
    </section>

I've already tries to create another onSubmit, but it wouldn't let me.

CodePudding user response：

I advice you research of alert() and onclick() functions

CodePudding user response：

You will need 2 states to hold the message and the button property disabled:

const [buttonStatus, setButtonStatus]= useState(false);
const [message, setMessage]= useSate(`send`);

Then use the states to set the button:

<input type='submit' value={message} onClick={() => {setMessage(`sended`); setButtonStatus(true)}} disabled={buttonStatus} className="form-control btn btn-primary" style={{marginTop: "30px"}}/>

CodePudding user response：

You should be able to add some additional functionality in your currently existing onSubmit function to make this work the way you'd like. Try this out:

const MyForm = () => {
  const [hasEmailSent, setHasEmailSent] = useState(false);

  const sendEmail = () => {
    // keep your current functionality here. Add this line below after the email sends (contain this within an apiCall.status === 200 if statement if the email is being sent with an API)
    setHasEmailSent(true);
  };

  return (
    <section>
      {hasEmailSent ? (
        <div className="container">
          <p>Thanks for contacting us!</p>
        </div>
      ) : (
        <div className="container rounded text-center" style={{ width: '80%', background: '#191919' }}>
          <h1 style={{ fontFamily: 'Recoleta', color: '#fff' }} id="contact">
            Contact Me
          </h1>
          <form className="row" style={{ margin: '25px 85px 75px 100px' }} onSubmit={sendEmail}>
            <label style={{ fontFamily: 'Recoleta', color: '#fff' }}> Name </label>
            <input type="text" name="name" className="form-control style =" />

            <label style={{ fontFamily: 'Recoleta', color: '#fff' }}> Email </label>
            <input type="email" name="user_email" className="form-control" />

            <label style={{ fontFamily: 'Recoleta', color: '#fff' }}> Message </label>
            <textarea name="message" rows="4" className="form-control" />
            <input type="submit" value="Send" className="form-control btn btn-primary" style={{ marginTop: '30px' }} />
          </form>
        </div>
      )}
    </section>
  );
};

export default MyForm;

I added a boolean named hasEmailSent that only gets toggled to true at the end of the sendEmail function. In the markup, I added a ternary conditional that shows either the form or the thank you message depending on the value of hasEmailSent. The thank you message in this example is not styled at all so it will most likely need to be styled with custom CSS to look proper as well.