How to submit a form using the Material UI dialog box using ReactJS

Question

I used Material UI Dialog to create a list of forms. In the official case:

<Dialog title="Dialog With Custom Width" actions={actions} modal={true} open={this.state.open} > This dialog spans the entire width of the screen. </Dialog> 

actions are:

  const actions = [ <FlatButton label="Cancel" primary={true} onTouchTap={this.handleClose} />, <FlatButton label="Submit" primary={true} onTouchTap={this.handleClose} />, ]; 

How can I create a form and let Dialog submit my form data?

------------------------------------------------ UPDATE- ----------------------------------------------

There is one more answer:

Add the type and form attribute to the dialog action button:

 const actions = [ <FlatButton label="Cancel" primary={true} onTouchTap={this.handleClose} />, <FlatButton label="Submit" primary={true} onTouchTap={this.handleClose} type="submit" //set the buttom type is submit form="myform" //target the form which you want to sent />, ]; 

and assign the attribute identifier to the form in the dialog box:

 <Dialog title="Dialog With Custom Width" actions={actions} modal={true} open={this.state.open} > // here can put child component and the code still work even the form is in the child component <div className="deal_form"> <form id="myform" onSubmit = {this.handleCreate} > <TextField value={this.state.staff_number} /> </form> </div> </Dialog> 

Answer 1

You can put the <form> form inside the dialog box, but you should also put your {actions} inside the form, and not in the actions property. Your button "Send action" should have type = "send" to it (type = "reset" is also supported and shown below).

jsFiddle: https://jsfiddle.net/14dugwp3/6/

 const { Dialog, TextField, FlatButton, MuiThemeProvider, getMuiTheme, } = MaterialUI; class Example extends React.Component { constructor(props) { super(props); this.state = { open: true }; this.handleClose = this._handleClose.bind(this); } _handleClose() { this.setState({ open: false }); } render() { const actions = [ <FlatButton type="reset" label="Reset" secondary={true} style={{ float: 'left' }} />, <FlatButton label="Cancel" primary={true} onClick={this.handleClose} />, <FlatButton type="submit" label="Submit" primary={true} />, ]; return ( <Dialog title="Dialog With Custom Width" modal={true} open={this.state.open} > <form action="/" method="POST" onSubmit={(e) => { e.preventDefault(); alert('Submitted form!'); this.handleClose(); } }> This dialog spans the entire width of the screen. <TextField name="email" hintText="Email" /> <TextField name="pwd" type="password" hintText="Password" /> <div style={{ textAlign: 'right', padding: 8, margin: '24px -24px -24px -24px' }}> {actions} </div> </form> </Dialog> ); } } const App = () => ( <MuiThemeProvider muiTheme={getMuiTheme() }> <Example /> </MuiThemeProvider> ); ReactDOM.render( <App />, document.getElementById('container') ); 

Answer 2

In the HTML5 attribute, form="" can be used as a link to any form on the page. Thus, the button receives the attribute form="my-form-id" , and the form receives the attribute id="my-form-id" .

 return ( <Dialog open actions={[ <RaisedButton type="submit" form="my-form-id" label="Submit" /> ]} > <form id="my-form-id" onSubmit={handleSubmit(this.onSubmit)}> <TextField {...fields.username} floatingLabelText="Username" /> </form> </Dialog> ); 

I use material UI v0.20.

Answer 3

The dialog is a component of the ui material ui, it will not automatically send your form data, if you want to create a form, define it inside the dialog box as follows:

 <Dialog title="Dialog With Custom Width" actions={actions} modal={true} open={this.state.open} > /*CREATE THE FORM UI HERE*/ <div>Field1</div> <div>Field2</div> <div>Field3</div> </Dialog> 

If the form contains many fields, use the bool dialog to make the content scrollable autoScrollBodyContent = {true} .

You defined the function this.handleSubmit.bind(this) when you click the submit button, inside this function call api and send the data you want to send, after the api is successful, close the dialog box.

Please comment if this solves your problem or any other details that you want.