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>
    )}

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>
    )}

• javascript
• html
• css
• reactjs
• if-statement

Share Improve this question Follow asked Nov 17, 2024 at 16:30 Jay FacultyJay Faculty 1 2

• You need to set value by which the popup is being visible on page reload. – Naeem Akhtar Commented Nov 17, 2024 at 16:37
• You are saying that the popup needs to show when the form "is submitted successfully without any errors", but as I see it you have e.preventDefault() in you submit event callback function, so that the form is not submitted. Something is missing! Are you planning to use AJAX for submitting the form data or will you just let the form do a POST request -- in the later case the page will reload and the user will not see the popup anyway. How do you expect the flow of actions to be? – chrwahl Commented Nov 21, 2024 at 17:38

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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);
    }
  };

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)
}