Topic: submit a form with a button outside that form
how to submit a form with an MDBBtn outside that form
<MDBModal
isOpen={this.state.modal8}
toggle={this.toggle(8)}
fullHeight
position="right"
backdrop={false}
className="modal-notify white-text"
hideModal={this.hiddenHandler}
showModal={this.shownHandle}
>
<MDBModalHeader
className="text-center teal darken-1"
toggle={this.toggle(8)}
>
Editer les informations
</MDBModalHeader>
<MDBModalBody>
<MDBCol className="infadmin" style={{ height: "100%" }}>
<form
onSubmit={this.handleEnregistrer}
style={{ marginTop: "0px", padding: "0px 0px" }}
id="form1"
>
<div className="black-text">
<MDBRow>
<MDBCol size="12" sm="6" md="6">
<div className="form-group">
<label htmlFor="">Nom</label>
<input
required
type="text"
id="nom"
className="form-control form-control-sm"
onChange={this.handleChange}
value={this.state.user.nom}
/>
</div>
</MDBCol>
<MDBCol size="12" sm="6" md="6">
<div className="form-group">
<label htmlFor="">Prénom</label>
<input
required
type="text"
id="prenom"
className="form-control form-control-sm"
onChange={this.handleChange}
value={this.state.user.prenom}
/>
</div>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="12">
<div className="form-group">
<label htmlFor="">Email</label>
<input
required
type="email"
id="email"
className="form-control form-control-sm"
onChange={this.handleChange}
value={this.state.user.email}
/>
</div>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol size="12" sm="6" md="6">
<div className="form-group">
<label htmlFor="">GSM 1</label>
<input
type="text"
id="gsm1"
className="form-control form-control-sm"
onChange={this.handleChange}
value={this.state.user.gsm1}
/>
</div>
</MDBCol>
<MDBCol size="12" sm="6" md="6">
<div className="form-group">
<label htmlFor="">GSM 2</label>
<input
type="text"
id="gsm2"
className="form-control form-control-sm"
onChange={this.handleChange}
value={this.state.user.gsm2}
/>
</div>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol size="12" sm="6" md="6">
<div>
<label htmlFor="">Pays</label>
<select
onChange={this.handleChange}
className="browser-default custom-select"
id="pays"
value={this.state.user.pays}
>
<option value="">...</option>
<option value="Guinée">Guinée</option>
</select>
</div>
</MDBCol>
<MDBCol size="12" sm="6" md="6">
<label htmlFor="">Governorat</label>
{this.state.user.pays !== "" ? (
<select
onChange={this.handleChange}
className="browser-default custom-select"
id="ville1"
value={this.state.user.ville1}
>
<option value="">...</option>
{governorat.map(gov => (
<option key={gov} value={gov}>
{gov}
</option>
))}
</select>
) : (
<select
disabled
onChange={this.handleChange}
className="browser-default custom-select"
id="ville1"
/>
)}
</MDBCol>
<MDBCol size="12" sm="6" md="6">
<label htmlFor="">Préfecture</label>
{this.state.user.ville1 !== "" ? (
<select
onChange={this.handleChange}
className="browser-default custom-select"
id="ville2"
value={this.state.user.ville2}
>
<option value="">...</option>
{prefacture[[this.state.user.ville1]].map(pref => (
<option key={pref} value={pref}>
{pref}
</option>
))}
</select>
) : (
<select
disabled
onChange={this.handleChange}
className="browser-default custom-select"
id="ville1"
/>
)}
</MDBCol>
<MDBCol size="12" sm="6" md="6">
<div className="form-group">
<label htmlFor="">Code Postal</label>
<input
type="text"
id="code_postal"
className="form-control form-control-sm"
onChange={this.handleChange}
value={this.state.user.code_postal}
/>
</div>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol size="12" sm="12" md="12">
<div className="form-group">
<label htmlFor="exampleFormControlTextarea1">
Adresse
</label>
<textarea
className="form-control"
id="adresse"
onChange={this.handleChange}
value={this.state.user.adresse}
/>
</div>
</MDBCol>
</MDBRow>
</div>
</form>
</MDBCol>
</MDBModalBody>
<MDBModalFooter className="justify-content-between">
<MDBBtn
className="deep-orange darken-1"
color="secondary"
onClick={this.toggle(8)}
style={{
fontSize: "calc(0.8em + 0.5vw)",
padding: "10px 10px"
}}
>
Annuler
</MDBBtn>
<MDBBtn
className="light-blue accent-3"
color="primary"
style={{
fontSize: "calc(0.8em + 0.5vw)",
padding: "10px 10px"
}}
onClick={this.handleEnregistrer}
type="button"
form="form1"
>
Enregister
</MDBBtn>
</MDBModalFooter>
</MDBModal>
Add comment
Hi there,
you can use form and type="submit" attributes on MDBBtn component. Use this snippet as a reference:
import React, { Component } from "react";
import { MDBBtn } from "mdbreact";
class FormPage extends Component {
state = {
value: ""
}
onSubmitHandler = event => {
event.preventDefault();
console.log(event)
}
handleChange = e => {
const value = e.target.value;
this.setState({ value })
}
render() {
return (
<>
<form id="form" onSubmit={this.onSubmitHandler} >
<input
required
type="text"
id="prenom"
className="form-control form-control-sm"
onChange={this.handleChange}
value={this.state.value}
/>
</form>
<MDBBtn type="submit" form="form">hello</MDBBtn>
</>
);
}
}
export default FormPage;
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.11.1
- Device: lenovo laptop
- Browser: chrome
- OS: windows 10
- Provided sample code: No
- Provided link: No