How to submit the form by Material UI Dialog using ReactJS

Question

I used the Material UI Dialog to make a form list. 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>

the actions is :

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

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

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

There is another answer:

Add the attribute of type and form in the Dialog actions 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 give attribute id to the form in the dialog:

<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>

Jeff McCloud · Accepted Answer · 2016-11-30 20:31:55Z

31

You can put a <form> inside the Dialog, but you must also put your {actions} inside the form, instead of the actions property. Your Submit action button should have type="submit" on 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')
);

answered Nov 30, 2016 at 20:31

Jeff McCloud

5,9771 gold badge22 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Champer Wu Over a year ago

If I want to let the form be a component and have a state itself, I just can use redux to build data state ?

Jeff McCloud Over a year ago

Yes. The component can handle state (like its open state), or you can make it a stateless function and pass "open" in as a prop (and that prop could be set by redux). Here's the above component converted to a stateless function. You could just wrap it with redux's connect() to wire it up to a store. jsfiddle.net/b3ahf3se/2 good luck!

Champer Wu Over a year ago

I made my form be a component <UserForm />,like this: <Dialog> <UserForm/> </Dialog>, How can I put the actions in the form?

AlxVallejo Over a year ago

The preventDefault prevents the form from submitting ... So this doesn't work.

mercury Over a year ago

Adding Submit is beneficial even if you send by yourself like JSON because you get the benefit of ENTER button to submit the form.

johannchopin · Accepted Answer · 2024-08-02 12:58:05Z

21

In HTML5 form="" attribute can be used as a reference to any form on a page (see form attribute). So button gets form="my-form-id" attribute and form gets id="my-form-id" attribute.

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 used Material UI v0.20.

edited Aug 2, 2024 at 12:58

johannchopin

15k11 gold badges64 silver badges125 bronze badges

answered Dec 15, 2017 at 1:14

afschr

5664 silver badges9 bronze badges

1 Comment

AlxVallejo Over a year ago

onSubmit={handleSubmit(this.onSubmit)} ... ugly

Mayank Shukla · Accepted Answer · 2016-11-30 06:36:38Z

0

Dialog is a ui component of material ui, it will not submit your form data automatically, if you want to create a form, define it inside the Dialog like this:

<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 form contains many field then use the bool in dialog to make the content scrollable autoScrollBodyContent = {true} .

You defined a function this.handleSubmit.bind(this) on submit button click, inside this function call the api and submit the data that you want to submit, once api call is success, close the dialog box.

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

answered Nov 30, 2016 at 6:36

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

1 Comment

Champer Wu Over a year ago

So how can I build the state of the form?

Collectives™ on Stack Overflow

How to submit the form by Material UI Dialog using ReactJS

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related