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

CodePudding user response：

Yes, you can create custom html with action buttons (cancel & confirm) base on that button return the boolean value and attach it to the dom using the async/await or Promise functions and call in onBefore event.

Alternatively, upon form submission, open the confirmation modal component via state change; following user confirmation, access the API.

Alternately, you might want to look into SweetAlert as a way to save some time. It is quite configurable and beautiful in its default form.

Confirm Example

sweetAlert(
  {
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",   
    showCancelButton: true,   
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!"
  }, 
  apiCall()
);

CodePudding user response：

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

CodePudding user response：

I recently did this with a simple react-bootstrap modal https://react-bootstrap.netlify.app/components/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

CodePudding user response：

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