Express.js post form failed

Express.js post form failed
0.0 0

#1

Hello Campers,

when I try a “normal” post on the route /addRecipe it works.
If I try to post on /recipe/:id there occure a warning in the browser console: Form submission canceled because the form is not connected and the in the node console the “handle post” gets never logged…

in my recipe controller:

app.post('/recipe/:id', function(req, res) {
  console.log('handle post')
  Recipe.findOneAndUpdate(
    {id: req.params.id},
    {$set: {
      recipe: req.body.recipe,
      ingredients: req.body.ingredients,
      description: req.body.description
    }},
    {new: true},
    function(err) {
      if(err) console.log(err);
    }
  );
});

in form.js:

render() {
    return (
      <form onSubmit={this.handleSubmit} method="post">
        <input placeholder="Recipename.." name="recipe" value={this.state.recipe} onChange={this.handleChange} />
        <textarea placeholder="250 g flour, 2 eggs..  " name="ingredients" value={this.state.ingredients} onChange={this.handleChange} ></textarea>
        <textarea placeholder="description.." name="description" value={this.state.description} onChange={this.handleChange} ></textarea>
        <Button text={this.props.btnText} type="submit" />
      </form>
    );
  }

handleSubmit:

  handleSubmit(e) {
    let { recipe, ingredients, description } = this.state;
    this.props.onSubmit(this.props.id, recipe, ingredients, description);
  }

in the thi.props.onSubmit I just updat the redux store


#2

The fact that your console.log is not being called would indicate that the problem is on the front end. Try posting the form html code here, and we will take a look.


#3

yes, you are right
I added the frontend code…


#4

Add e.preventDefault():

handleSubmit(e) {
  e.preventDefault(); // <-- HERE
  let { recipe, ingredients, description } = this.state;
  this.props.onSubmit(this.props.id, recipe, ingredients, description);
}

#5

this doesn’t help…
but thanks

maybe I have to give the form-tag a action atribute, but i think by default the action-atribute is the current location