I was trying to submit a form data, and my main requirement is that the entire page should not reload on the form submission. Hence i tried adding event.preventDefault(); in my form submit function, but it is giving me an error.

I tried various solutions mentioned in various other stackoverflow answers, but none of them worked.

constructor(props){
    super(props);
    this.state = {
        rating:5,
        review:"",
        user:""
    }
    this.handleSubmit = this.handleSubmit.bind(this);
}

async handleChange(event) {
    const name = event.target.name;
    //console.log(name);
    this.setState({ [name]: event.target.value})
    //console.log(this.state);
  }

  handleSubmit(event,type,id) {
    const data = new FormData(event.target);
    alert(event);
    console.log("event",event);
    event.preventDefault();
    data.append("type",type)
    fetch('http://localhost:10000/movie/addreview/'+id, {
      method: 'POST',
      body: data,
    });
  }

Below is my form

<form onSubmit={this.handleSubmit(this,type,id)} target="#">
                <div className="ratingfield">
                    <h1 className="ratingtext">Enter Username </h1> 
                    <input name="user"  onChange={this.handleChange.bind(this)} value={this.state.user} className="input" size="10"></input> 
                     </div>

                     <br/>
                <br/>
                <div className="ratingfield">
                    <h1 className="ratingtext">Enter Rating from 1-10</h1> 
                    <input name="rating"  onChange={this.handleChange.bind(this)} value={this.state.rating} className="input" size="4"></input> 
                     </div>

                <br/>
                <br/>

                <center><h1 className="new"> Enter Review</h1></center>
                <center><textarea name="review" onChange={this.handleChange.bind(this)} className="message" rows="10" cols="50"></textarea></center>
                <center><input type="submit" className="sbtbtn"></input></center>
  </form>

Any solutions would be very helpful.

I was trying to submit a form data, and my main requirement is that the entire page should not reload on the form submission. Hence i tried adding event.preventDefault(); in my form submit function, but it is giving me an error.

I tried various solutions mentioned in various other stackoverflow answers, but none of them worked.

constructor(props){
    super(props);
    this.state = {
        rating:5,
        review:"",
        user:""
    }
    this.handleSubmit = this.handleSubmit.bind(this);
}

async handleChange(event) {
    const name = event.target.name;
    //console.log(name);
    this.setState({ [name]: event.target.value})
    //console.log(this.state);
  }

  handleSubmit(event,type,id) {
    const data = new FormData(event.target);
    alert(event);
    console.log("event",event);
    event.preventDefault();
    data.append("type",type)
    fetch('http://localhost:10000/movie/addreview/'+id, {
      method: 'POST',
      body: data,
    });
  }

Below is my form

<form onSubmit={this.handleSubmit(this,type,id)} target="#">
                <div className="ratingfield">
                    <h1 className="ratingtext">Enter Username </h1> 
                    <input name="user"  onChange={this.handleChange.bind(this)} value={this.state.user} className="input" size="10"></input> 
                     </div>

                     <br/>
                <br/>
                <div className="ratingfield">
                    <h1 className="ratingtext">Enter Rating from 1-10</h1> 
                    <input name="rating"  onChange={this.handleChange.bind(this)} value={this.state.rating} className="input" size="4"></input> 
                     </div>

                <br/>
                <br/>

                <center><h1 className="new"> Enter Review</h1></center>
                <center><textarea name="review" onChange={this.handleChange.bind(this)} className="message" rows="10" cols="50"></textarea></center>
                <center><input type="submit" className="sbtbtn"></input></center>
  </form>

Any solutions would be very helpful.

• javascript
• reactjs

2 Answers 2

You should probably read more about event handlers here

You are calling the handler during the render stage rather than as a callback passed to the event and since your handler doesn't return anything then the event won't receive anything.

Try this

handleSubmit(type, id, event){
  // insert your logic here
}

render() {
  return ( 
     <form onSubmit={this.handleSubmit.bind(this,type,id)} target="#">
       /* JSX goes here */
     </form>
)}

The bind function binds arguments and scope to your callback ( the handler handleSubmit).

The arguments you pass to the bind function will e before the arguments that will be passed to your handler by React internally

the this is referring to the function's scope once it's called. This allows your to call this.setState because this is bound by the ponent class

You are passing this object to the function not the event. You have to pass event:

<form onSubmit={ (event) => this.handleSubmit(event, type, id) } target="#">

OR: Using .bind()

<form onSubmit={ this.handleSubmit.bind(this, type, id) } target="#">