Meteor react onSubmit does not work when multiple input

help
1

I have a form, if i just let ‘post’ input exist, i can submit the form but when i add another input like ‘owner’, onSubmit method is not working. When i click enter, nothing is happened. Thanks for answers.

class PostForm extends Component {
addPost(event) {
    event.preventDefault();
     var yell = this.refs.post.value.trim();
     var owner = this.refs.owner.value.trim();
   
    
   
    Meteor.call('addPost', post,owner error => { 
        if (error) { 
            console.log('error', error); 
        } 
         console.log('post added ' );  
       
    });
    
}



render() {
    return (
        <div>
            <form className="commentForm" onSubmit={this.addPost.bind(this)} > 
                    <input
                        type="text"
                        ref="post"
                        placeholder="yell something!"
                    />
                    <input
                        type="text"
                        ref="owner"
                        placeholder="owner"
                    />
              
            </form>
       </div> 
    );
}

}`

2

So far as i know, this is browser behaviour if you have one input in a form, ‘enter’ will auto submit the form. More than one input, no. So you might need to consider using a <button> instead?

Or on keyup on each input then detect ‘enter’ key and submit the form.

3

Thank you, Kenken! I just spent over an hour pulling my hair out over this problem.

1 Like