Material-ui: Form how to submit?

[0x80]

I'm putting Input components in a form like <form action="/something/create" method="POST">...</form>, but there is no button like <RaisedButton type="submit"/>. How are these elements supposed to be used in a form and how do you trigger a submit?

[ButuzGOL]

For me triggers submit fine

<form action="/something/create" method="POST">
        <Input ref="login" type="text" name="login" placeholder="Login" />
        <Input ref="password" type="password" name="password" placeholder="Password" />
        <RaisedButton label="Signin" />
  </form>

[0x80]

@ButuzGOL How is the button in your example linked to the submit action? Is it implicitly always "the" button in the form? What if I add a second button to select an file upload as part of the form?

[ButuzGOL]

By default button has type submit
https://developer.mozilla.org/ru/docs/Web/HTML/Element/button

submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

So if you want to prevent submit event you should add type="button"

[cobbweb]

My submit button looks like this and works fine (^v0.5.0)

<RaisedButton type="submit" label="login" className="button-submit" primary={true} />

[0x80]

Thanks guys! Sorry for this basic question that didn't have much to do with MUI. As you noticed I don't have a lot of experience with forms :)

[mikepc]

Also make sure that containerElement isn't set, or it will break as well.

[estaub]

@ButuzGOL RaisedButton (and probably the others) default to type="button" now in late 2017 (v0.19.2), not the HTML default of "submit", so you have to set submit explicitly where you need it.

[smokinjoe]

@estaub - I'm using Button but can't get the form to submit. I have to either just use button or Input (but then I lose Button styles).

                <Button
                    type="submit"
                    variant="contained"
                    component="span"
                    disabled={this.haveErrors(errors)}
                >
                    Save
                </Button>

[estaub]

@smokinjoe Sorry, I'm very rusty on all this, can't help. I'd suggest using Chrome DevTools or similar to inspect the generated <button> html, for starters.

[smokinjoe]

@estaub - It might be a little lazy (and I realized I'm using an older version of material-ui) buuuut, this worked for me to be able to submit and have button styles:

                    <Button variant="contained">
                        <Input type="submit" disabled={this.haveErrors(errors)}>
                            Save
                        </Input>
                    </Button>

[xiongemi]

hey. for the Button component https://material-ui.com/api/button/, the type is button, how to change type to submit?

[cbfx]

@xiongemi i think you're right. by default, it looks like the component's type is 'button'. have you tried adding type="submit" to the component's props?

<Button type="submit">Submit</Button>

via: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js#L260
via: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js#L296
via: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js#L376

[estaub]

@xiongemi Hopefully, teaching to fish: https://material-ui.com/api/button-base/ .

When scanning the props of something in the api docs, always check for an Inheritance parent, where more may be found.