So I am trying to show a custom confirmation modal to ask if the user really wanted to submit the form.

I am using the onBefore callback to show the confirmation but cannot figure out how can I show a custom modal ponent instead of the standard window.confirm dialog, is it event possible to do such thing?

post('/submit', {
 data: data,

 // Confirm message before actually submitting form
 onBefore: window.confirm('Submit?'), // show modal here instead of window.confirm

 // Clear inputs on successful submits
  onSuccess: e.target.reset()
})

So I am trying to show a custom confirmation modal to ask if the user really wanted to submit the form.

I am using the onBefore callback to show the confirmation but cannot figure out how can I show a custom modal ponent instead of the standard window.confirm dialog, is it event possible to do such thing?

post('/submit', {
 data: data,

 // Confirm message before actually submitting form
 onBefore: window.confirm('Submit?'), // show modal here instead of window.confirm

 // Clear inputs on successful submits
  onSuccess: e.target.reset()
})

• javascript
• reactjs

• Which API are u using to post the data to server? E.g (axios,fetch api) – The KNVB Commented Jan 31, 2023 at 8:15
• it basically submits the form the page '/submit' which is a route that is connected to a backend controller which posts the data. – Jheems Commented Jan 31, 2023 at 8:27

3 Answers 3

I am extending Naftalib's answer with actual code.

import React, { useState, useRef } from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";

function Page() {
  const [show, setShow] = useState(false);

  const form = useRef(null);

  const handleClose = () => setShow(false);
  const handleFormSubmit = (e) => {
    e.preventDefault();
    setShow(true);
  };

  const submitForm = () => {
    form.current.submit();        
  };

  return (
    <>
      <form ref={form} onSubmit={handleFormSubmit}>
        ...
      </form>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Do you really want to submit?</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Cancel
          </Button>
          <Button variant="primary" onClick={submitForm}>
            Confirm
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}
    

I recently did this with a simple react-bootstrap modal https://react-bootstraplify.app/ponents/modal/ set the visibility to some state variable boolean (show={stateVariableX}) and the confirm button can trigger the submit form function as well as set modal visibility to false

If understanding correctly then it's question just a piece of cake. you could call it inside the onBefore callback, and pass a callback function to the modal ponent to handle the result of the confirmation like this.

import React, { useState } from 'react';

function ConfirmModal({ onConfirm }) {
  const [visible, setVisible] = useState(false);

  const handleConfirm = () => {
    onConfirm(true);
    setVisible(false);
  };

  const handleCancel = () => {
    onConfirm(false);
    setVisible(false);
  };

  return visible ? (
    <div>
      <p>Submit?</p>
      <button onClick={handleConfirm}>Confirm</button>
      <button onClick={handleCancel}>Cancel</button>
    </div>
  ) : null;
}

post('/submit', {
 data: data,

 // Confirm message before actually submitting form
 onBefore: (cb) => {
   setConfirmModalVisibility(true);
   setOnConfirm(cb);
 }, 

 // Clear inputs on successful submits
 onSuccess: e.target.reset()
})

function MyForm() {
  const [confirmModalVisibility, setConfirmModalVisibility] = useState(false);
  const [onConfirm, setOnConfirm] = useState(null);

  return (
    <form>
      {/* form inputs */}
      <ConfirmModal visible={confirmModalVisibility} onConfirm={onConfirm} />
    </form>
  );
}