Html Question posted in
Some basic documentation can be found here.

Html – Alert pop up when a form is submitted

I want to display an alert pop-up when a form is submitted, but it is not working as expected. When I refresh the page, the alert pop-up does not hide itself; instead, it continues to display even after the page reloads. I want the pop-up to appear only when the form is submitted successfully without any errors. Below is my code:

Firstly, i set my isModalOpen to state to false

const [isModalOpen, setIsModalOpen] = useState(false)

In the handleSubmit function, here is my code

function handleSubmit(e){
    e.preventDefault();
    let hasError = false;

    // if there is no error, the form will be submitted
    if(!hasError){
      setIsModalOpen(true)

    if(firstName.trim() === ''){
      setFirstNameError('This field is required')
      hasError = true;
    }
    if(emailAddress.trim() === ''){
      setEmailError('Please enter a valid email address')
      hasError = true;
    }
    if(message.trim() === ''){
      setMessageError('This field is required')
      hasError = true;
    }
    }

}

And finally this is my code which render the pop-up message the form is submitted with no errors

{isModalOpen && (
       <div id='overlay'>
        <div className={`pop-up`}>
          <div className='flex gap-2 check'>
            <img src="./images/icon-success-check.svg" alt="" />
            <p>Message Sent!</p>
        </div>
  
        <p className='relative ml-[20px]'>Thanks for completing the form. We'll be in touch soon!</p>
        </div>
      </div>
    )}
Tags:

2

Answers


  1. 0

    Because the isModalOpen state is preserved after the page reloads, or there’s an issue with how the form validation logic is structured.

    const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    // Reset error states
    setFirstNameError('');
    setEmailError('');
    setMessageError('');

    let hasError = false;

    if (firstName.trim() === '') {
      setFirstNameError('This field is required');
      hasError = true;
    }

    if (emailAddress.trim() === '') {
      setEmailError('Please enter a valid email address');
      hasError = true;
    }

    if (message.trim() === '') {
      setMessageError('This field is required');
      hasError = true;
    }

    if (!hasError) {
      setIsModalOpen(true);
    }
  };
    Login or Signup to reply.
  2. 0

    If the alert continues to display after the page reloads, there probably is a part on your code where setIsModalOpen is set to true and the value is preserved. You may also be calling handleSubmit when the component is rendered.
    Also try refactoring the handleSubmit function as follows:

    function handleSubmit(e){
   e.preventDefault();
   let hasError = false;

    if(firstName.trim() === ''){
      setFirstNameError('This field is required')
      hasError = true;
    }
    if(emailAddress.trim() === ''){
      setEmailError('Please enter a valid email address')
      hasError = true;
    }
    if(message.trim() === ''){
      setMessageError('This field is required')
      hasError = true;
    }
    if (!hasError) setIsModalOpen(true)
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search