React - Preventing Form Submission

React - Preventing Form Submission

I think it's first worth noting that without javascript (plain html), the form element submits when clicking either the <input type="submit" value="submit form"> or <button>submits form too</button>. In javascript you can prevent that by using an event handler and calling e.preventDefault() on button click, or form submit. e is the event object passed into the event handler. With react, the two relevant event handlers are available via the form as onSubmit, and the other on the button via onClick.

Example: http://jsbin.com/vowuley/edit?html,js,console,output

Reactjs prevent form submission not working

You have a typo in onsbumit. Change it to onSubmit. Remember that React is using JSX, so even though the code looks like HTML, it is actually JavaScript.

Prevent form from being refreshing when submitted in Reactjs

Add an onSubmit event handler on the form ,

<form onSubmit={handleOnsubmit}> </form> 

in your handleOnsubmit function perfrom event.preventDefault()

function handleOnsubmit(event) {

   event.preventDefault();
   // Do Whatever you want
 }

React prevent form submission when enter is pressed inside input

You need to create a form handler that would prevent the default form action.

The simplest implementation would be:

<form onSubmit={e => { e.preventDefault(); }}>

But ideally you create a dedicated handler for that:

<form onSubmit={this.submitHandler}>

with the following implementation

submitHandler(e) {
    e.preventDefault();
}

How to disable form submit button until all input fields are filled in ReactJS?

For the checkbox you have to change from value prop to the checked prop and access event.target.checked instead i.e

 <input type="checkbox" checked={checkbox} onChange={(e) => setCheckbox(e.target.checked)} />

The react docs have an example too

REACT, form submit after preventDefault not working until submit button is clicked a second time

It would be better if you update the states at the time of modification and not at the time of submission, anyway, to fix the problem you have I suggest you send the parameters of the form instead of the states since React will not change the value of these until the next render.

const handleSubmit = (event) =>{
    event.preventDefault();
    setAge(event.target[0].value);
    setHes(event.target[1].value);
    setVisa(event.target[2].value);
    push(ref(db,"info"),{
      age: event.target[0].value,
      hes: event.target[1].value,
      visa : event.target[2].value,
      islem : islem
    })
  }

In this case however the state variables (setAge, setHes, setVisa) are unnecessary I would say

how do i stop users from submitting the same form on react

This could be fleshed out more but you get the idea. Have a state that changes while you are submitting the data.

import React, { useState } from "react";

const Form = () => {
  const [formData, setFormData] = useState({});
  const [message, setMessage] = useState("");
  const [loading, setLoading] = useState("idle");

  const handleInput = (e) => {
    const copyFormData = { ...formData };
    copyFormData[e.target.name] = e.target.value;
    setFormData(copyFormData);
  };

  const sendData = async (e) => {
    e.preventDefault();
    setLoading("loading");
    const { name, email, message } = formData;
    try {
      const response = await fetch(
        "MYKEY",
        {
          method: "post",
          body: JSON.stringify([[name, email, message]]),
          headers: {
            "Content-Type": "application/json",
          },
        }
      );

      const json = await response.json();
      console.log("Success", JSON.stringify(json));
      setLoading("submitted");
      setMessage("Thanks for subscribing!");
    } catch (error) {
      console.error("Error:", error);
      setMessage("There seems to be a problem");
      setLoading("idle");
    }
  };

  return (
    <div className=" p-3 w-full md:p-24">
      <form
        className="w-full border-solid border-black border-4 items-center"
        id="contact"
        name="contact"
        required
        onSubmit={sendData}
      >
        <div className="text-center mt-4 mb-5">
          <h2 className="font-semibold text-4xl mb-2 md:mt-10 md:text-6xl md:mb-4">
            newsletter
          </h2>
          <p className="text-gray-500 md:text-2xl">lets stay connected</p>
        </div>

        <div className="flex flex-wrap flex-col md:justify-center md:flex-row p-2">
          <input
            className="bg-gray-100 mb-4 h-10 w-full  p-4 text-gray-500 md:w-1/5 md:mx-3 md:h-14"
            name="name"
            type="text"
            placeholder="name"
            required
            onChange={handleInput}
          ></input>

          <input
            className="bg-gray-100 mb-4 h-10 w-full  p-4 text-gray-500 md:w-2/5 md:mx-3 md:h-14"
            name="email"
            type="email"
            placeholder="email"
            required
            onChange={handleInput}
          ></input>
          {loading === "idle" &&
            <input
            className="bg-blue-600 font-semibold tracking-wider mb-4 h-12 w-full text-white justify-center items-center md:h-14 md:w-1/6 md:mx-3"
            name="subscribe"
            type="submit"
            value="subscribe"
          ></input>
          }
        
          <div className="font-semibold tracking-wider mb-4 text-black text-center justify-center items-center">
            {message}
          </div>
        </div>
      </form>
    </div>
  );
};

How to preventDefault() on form onSubmit in react/redux project

This part of your code is just a function, you can expand it as you want:

<form onSubmit={() => props.addItem('test')}>

So, you can do:

<form onSubmit={e => {
  e.preventDefault();
  props.addItem('test');
}}>

Or move this handler into a function:

const handleSubmit = e => {
  e.preventDefault();
  props.addItem('test');
}

// ... 

<form onSubmit={handleSubmit}>

---

Related Topics