How is it possible to call confirm() before submitting a form in React?

Question

I have a form in my React project. I would like to call confirm() if the user clicks the submit button. I tried it like this:

<form onSubmit="return confirm('Are you sure?')">...</form>

<button type="submit" onClick="return confirm('Are you sure?')">Submit</button>

<form onSubmit={()=>window.confirm('Are you sure?')}>...</form>

<button onClick={() => window.confirm("Are you sure")}>Submit</button>

Unfortunately nothing happens, the form is submitted without the alert. React somehow removes the onClick and onSubmit. How is it possible to avoid that?

Just add a callback instead of string to onSubmit. Btw, it is considered as very bad practice to use stringified js in react — captain-yossarian from Ukraine, Feb 09 '21 at 18:53
Does this answer your question? [React - Preventing Form Submission](https://stackoverflow.com/questions/39809943/react-preventing-form-submission) — Emile Bergeron, Feb 09 '21 at 19:18

score 6 · Answer 1 · answered Feb 09 '21 at 19:04

import React from "react";
import "./styles.css";

export default function App() {

  const handleSubmit = (e) => {
    e.preventDefault();
    const answer = window.confirm("are you sure?");
    if (answer) {
      // Save it!
      console.log("Thing was saved to the database.");
    } else {
      // Do nothing!
      console.log("Thing was not saved to the database.");
    }
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        ...
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

i believe you are looking for the confirm method of javascript

https://codesandbox.io/s/flamboyant-lake-hl5rb?file=/src/App.js

as stated below you can also use state variables as booleans and if the submitting variable is set to false (a user hits no) the submission will not fire — Rob Terrell, Feb 09 '21 at 19:07

codemonkey · Answer 2 · 2021-02-09T19:29:42.937

You would need to use JSX for that. The syntax is as follows:

      <form onSubmit={() => window.confirm("Are you sure?")}>
        <input name="dsad" />
        <button onClick={() => window.confirm("Are you sure")}>Submit</button>
      </form>

Using the confirm function is not the most elegant solution though, especially when you have React at your disposal. I certainly recommend using a state variable for it. If you're interested in learning how, let me know in the comments.

And this is how you do it the right way with React:

export default function App() {
  const [show_confirm_msg, setShowConfirmMsg] = useState(false);
  const form = useRef();

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

  const handleConfirmMsg = (e) => {
    e.preventDefault();
    setShowConfirmMsg(true);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <form ref={form} onSubmit={handleConfirmMsg}>
        <input name="dsad" />
        <button onClick={handleConfirmMsg}>Submit</button>
      </form>
      {show_confirm_msg && (
        <div>
          <br /> Are you sure want to submit?{" "}
          <button onClick={handleConfirm}>Yes</button>
        </div>
      )}
    </div>
  );
}

Sandbox: https://codesandbox.io/s/confident-swirles-5cnio?file=/src/App.js

Added:

As pointed out by @EmileBergeron, you could accomplish this with even less code by doing this:

  const handleConfirm = (e) => {
    if(!show_confirm_msg){
      e.preventDefault();
      setShowConfirmMsg(true);
    }
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <form onSubmit={handleConfirm}>
        <input name="dsad" />
        <button type="submit">Submit</button>
        {show_confirm_msg && (
        <div>
          <br /> Are you sure want to submit?{" "}
          <button type="submit" onClick={handleConfirm}>Yes</button>
        </div>
      )}
      </form>

    </div>
  );

I will leave the original Sandbox code as is for you to compare the two approaches as both are just different means to the same end.

@IterAtor it does. check out the Sandbox I included at the bottom. — codemonkey, Feb 09 '21 at 19:00
@IterAtor you'd just need to call [`e.preventDefault()` on a canceled confirmation](https://stackoverflow.com/q/39809943/1218980). — Emile Bergeron, Feb 09 '21 at 19:07
@IterAtor You are right. I needed to add the preventDefault() there. But the point is there are better ways to do that in React. I have updated my answer and the original Sandbox link. — codemonkey, Feb 09 '21 at 19:10
Very good point @EmileBergeron Thanks for pointing that out. — codemonkey, Feb 09 '21 at 19:15

score 0 · Answer 3 · answered Jul 08 '23 at 20:33

I actually needed the form to submit as usual (not preventing nor providing a custom behavior) if the user confirms. So this is an alteration of @Rob Terrell answer:

import React from "react";
import "./styles.css";

export default function App() {

  const handleSubmit = (e) => {
    const answer = window.confirm("are you sure?");
    if (!answer) {
      // Do nothing!
      e.preventDefault(); // ------> We only prevent the behavior if negative answer
    }
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        ...
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

score -2 · Answer 4 · answered Feb 09 '21 at 18:53

-2

Create a new function (onConfirmation) and call it in onClick. Also create a flag and validate the flag before the submit.

In function onConfirmation, change the flag value to true.

answered Feb 09 '21 at 18:53

Nelson González

7
2

How is it possible to call confirm() before submitting a form in React?

4 Answers4