CODEWITHSUNDEEP
reactjs
rrag
rrag

Reputation: 657

Reactjs: Form with multiple inputs does not submit

JSBin: https://jsbin.com/qotuxofalo/edit?js,output

(^ uses ES6 class, so please use a latest browser to test)

If I comment out the second input the form submits, but does not submit with more than 1 input.

What am I missing?

Upvotes: 1

Views: 720

Answers (2)

Piotr Berebecki
Piotr Berebecki

Reputation: 7468

If desired, you can also access the text as it is being entered using the onChange event handler: https://jsbin.com/moqogag/edit?js,output

class App extends React.Component {
  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(e) {
    console.log("CHANGING")
    console.log(e.target.value)
  }
  render() {
    return React.DOM.form({ onChange: this.handleChange, action: "" }, [
      React.DOM.input({ type: "text" }),
      React.DOM.input({ type: "text" })
    ])
  }
}



ReactDOM.render(
  React.createElement(App),
  document.getElementById("app")
)

Upvotes: 0

Pranesh Ravi
Pranesh Ravi

Reputation: 19133

You need to add a input of type submit to make the form work. Check the following examples. Adding that will submit the form on pressing enter. If you don't want that submit button, you can hide it using css.

Demo:

https://jsbin.com/mafafoxoji/1/edit?js,output

Upvotes: 2

Related Questions