CODEWITHSUNDEEP
reactjsmaterial-ui
AbuMariam
AbuMariam

Reputation: 3678

How to connect button to form submission using Material UI Cards?

I have a simple form which is inside a material ui Card component....

 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';

return (
<Card className={classes.card}>
  <CardContent>
        <form id="login" className={classes.form} noValidate onSubmit={handleSubmit}>
            <TextField id="username" label="User Name" />
            <TextField id="password" label="Password" />
        </form>
  </CardContent>
  <CardActions>
    <Button size="small">Submit</Button>
  </CardActions>
</Card>
)

How can I connect the Submit button inside the 'CardActions' component to the form in the 'CardContent' component (so that clicking it will cause handleSubmit to get called)?

Upvotes: 3

Views: 7100

Answers (3)

Jeff E
Jeff E

Reputation: 688

You can use the component property of Card instead of the form element (and move your form attributes):

<Card component="form" noValidate onSubmit={handleSubmit} id="login" className={classes.card}>
  <CardContent className={classes.form}>
    <TextField id="username" label="User Name" />
    <TextField id="password" label="Password" />
  </CardContent>
  <CardActions>
    <Button size="small">Submit</Button>
  </CardActions>
</Card>

Upvotes: 1

Ishiffman120
Ishiffman120

Reputation: 388

I think that you might just be able to wrap the entire thing in the form tag and it would work if you add a type="submit". Alternatively you can add an onClick to your button and handle it with a method, either will work. I haven't tested what I posted below but it might do the trick.

 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';

return (
<Card className={classes.card}>
  <CardContent>
        <form id="login" className={classes.form} noValidate onSubmit={handleSubmit}>
            <TextField id="username" label="User Name" />
            <TextField id="password" label="Password" />
            <CardActions>
               <Button size="small" type="submit">Submit</Button>
            </CardActions>
        </form>
  </CardContent>

</Card>
)

Upvotes: 3

Squiggs.
Squiggs.

Reputation: 4474

I think you should be able to use refs to grab your form, and submit it manually. 

import {useRef} from 'react';
import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';

return (


const formRef = useRef(null);
const connectButton = () => {
    formRef.current.submit();
}



<Card className={classes.card}>
  <CardContent>
        <form ref={formRef} id="login" className={classes.form} noValidate onSubmit={handleSubmit}>
            <TextField id="username" label="User Name" />
            <TextField id="password" label="Password" />
        </form>
  </CardContent>
  <CardActions>
    <Button onClick={connectButton} size="small">Submit</Button>
  </CardActions>
</Card>
)

alternatively.

<button form='login' type="submit" size="small">Button</button>

Upvotes: 0

Related Questions