I want to update my register form with reactJS, when I run my backend with Postman, it works well.
But,when I run my frontend, and update the input, I get the alert: "Input field value is missing" which, close quickly, after that, I get cannot POST.
You can see the code as below :
Router :
exports.editclient = function(req, res) {
var data = {
Prenom: req.body.Prenom,
Nom: req.body.Nom,
FAX: req.body.FAX,
Telephone: req.body.Telephone,
Email: req.body.Email,
Adresse1: req.body.Adresse1,
Adresse2: req.body.Adresse2,
};
var Code = req.params.Code
connection.query("UPDATE clients set ? WHERE Code = ? ", [data, req.params.Code], function(error, results, fields) {
if (error) throw error;
else {
res.send(JSON.stringify(results));
console.log("Data is updated");
}
});
};
Server :
router.put('/editclient/:Code', clients.editclient);
Class :
class EditClient extends Component {
constructor(props) {
super(props)
this.state = {
clients: [],
Code: props.match.params.Code,
Prenom: '',
Nom: '',
FAX: '',
Telephone: '',
Email: '',
Adresse1: '',
Adresse2: ''
}
this.handleEdit = this.handleEdit.bind(this);
}
componentDidMount() {
axios.get('http://localhost:4000/app/viewclient/' + this.props.match.params.Code).then(response => {
if (response && response.data) {
this.setState({ clients: response.data });
}
}).catch(error => console.log(error));
}
handleEdit() {
if (this.state.FAX.length == 8 && this.state.Telephone.length == 8) {
var client = {
Prenom: this.state.Prenom,
Nom: this.state.Nom,
FAX: this.state.FAX,
Telephone: this.state.Telephone,
Email: this.state.Email,
Adresse1: this.state.Adresse1,
Adresse2: this.state.Adresse2
}
axios({
method: 'put',
url: "http://localhost:4000/app/editclient/" + this.props.match.params.Code,
data: client,
}).then(function(response) {
this.setState({ Prenom: "" });
this.setState({ Nom: "" });
this.setState({ FAX: "" });
this.setState({ Telephone: "" });
this.setState({ Email: "" });
this.setState({ Adresse1: "" });
this.setState({ Adresse2: "" });
}.bind(this)).catch(function(error) {
console.log(error);
});
}
else {
alert("Input field value is missing");
}
}
handleCodeChange = (e) => {
this.setState({ Code: e.target.value });
}
handlePrenomChange = (e) => {
this.setState({ Prenom: e.target.value });
}
handleNomChange = (e) => {
this.setState({ Nom: e.target.value });
}
handleFAXChange = (e) => {
this.setState({ FAX: e.target.value });
}
handleTelephoneChange = (e) => {
this.setState({ Telephone: e.target.value });
}
handleEmailChange = (e) => {
this.setState({ Email: e.target.value });
}
handleAdresse1Change = (e) => {
this.setState({ Adresse1: e.target.value });
}
handleAdresse2Change = (e) => {
this.setState({ Adresse2: e.target.value });
}
render() {
let { clients } = this.state;
var btn = {
display: 'block',
margin: 'auto'
}
var Cd = { pointerEvents: 'none' }
return (<div className="animated fadeIn">
<Row>
<Col xs="12" >
<Card>
<CardHeader>
<h4><strong> <i className="fa fa-user"> </i> Modifier le client </strong></h4>
</CardHeader>
<CardBody>
{ this.state.clients.map(client => (
<Form className="form-horizontal" method="POST" key={client.Code} >
<FormGroup row >
<Col md="3">
<h5> <Label htmlFor="hf-id"><strong>Code client</strong></Label></h5>
</Col>
<Col xs="12" md="9" >
<div className="controls">
<InputGroup className="input-code">
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-id-card-o" aria-hidden="true"></i></InputGroupText>
</InputGroupAddon>
<Input id="Code" style = { Cd } size="16" type="text" placeholder="Entrer le code du client" onChange={this.handleCodeChange.bind(this)} defaultValue={client.Code} readonly="readonly"/>
<FormFeedback className="help-block">Entrez le code SVP ! </FormFeedback>
</InputGroup>
</div>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<h5> <Label htmlFor="hf-pren"><strong>Prénom</strong></Label></h5>
</Col>
<Col xs="12" md="9">
<div className="controls" >
<InputGroup className="input-pren">
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-user-circle-o" aria-hidden="true"></i></InputGroupText>
</InputGroupAddon>
<Input id="prénom" size="16" type="text" defaultValue={client.Prenom} onChange={this.handlePrenomChange.bind(this)} placeholder="Entrer le prénom du client" autoComplete='given-name' />
</InputGroup>
</div>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<h5> <Label htmlFor="hf-nom"><strong>Nom</strong></Label></h5>
</Col>
<Col xs="12" md="9">
<div className="controls">
<InputGroup className="input-nom">
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-user-circle" aria-hidden="true"></i></InputGroupText>
</InputGroupAddon>
<Input id="nom" size="16" type="text" defaultValue={client.Nom} onChange={this.handleNomChange.bind(this)} placeholder="Entrer le nom du client" autocomplete='family-name' />
</InputGroup>
</div>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<h5> <Label htmlFor="hf-tel"><strong>Numéro de FAX</strong></Label></h5>
</Col>
<Col xs="12" md="9">
<div className="controls">
<InputGroup className="input-fax">
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="flag-icon flag-icon-tn " title="tn" id="tn"></i></InputGroupText>
</InputGroupAddon>
<Input id="fax" size="16" type="tel" defaultValue={client.FAX} onChange={this.handleFAXChange.bind(this)} placeholder="Entrer le numéro du FAX du client" autoComplete='tel' />
</InputGroup>
</div>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<h5> <Label htmlFor="hf-tel"><strong>Numéro de Téléphone</strong></Label></h5>
</Col>
<Col xs="12" md="9">
<div className="controls">
<InputGroup className="input-tel">
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="flag-icon flag-icon-tn " title="tn" id="tn"></i></InputGroupText>
</InputGroupAddon>
<Input id="tel" size="16" type="tel" defaultValue={client.Telephone} onChange={this.handleTelephoneChange.bind(this) } placeholder="Entrer le numéro du télèphone du client" autoComplete='tel-national' />
</InputGroup>
</div>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<h5> <Label htmlFor="hf-email"><strong>Email</strong></Label></h5>
</Col>
<Col xs="12" md="9">
<div className="controls">
<InputGroup className="input-email">
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-envelope" aria-hidden="true"></i></InputGroupText>
</InputGroupAddon>
<Input id="email" size="16" defaultValue={client.Email} onChange={this. handleEmailChange.bind(this)}type="email" placeholder="Entrer l'email du client" autoComplete='email' />
</InputGroup>
</div>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<h5> <Label htmlFor="hf-adr"><strong>Adresse 1 </strong></Label></h5>
</Col>
<Col xs="12" md="9">
<div className="controls">
<InputGroup className="input-Adr">
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-location-arrow" aria-hidden="true"></i></InputGroupText>
</InputGroupAddon>
<Input id="adr" size="16" type="text" defaultValue={client.Adresse1} onChange={this.handleAdresse1Change.bind(this)} placeholder="Entrer l'adresse 1 du client" autocomplete='street-address' />
</InputGroup>
</div>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<h5> <Label htmlFor="hf-adr"><strong>Adresse 2 </strong></Label></h5>
</Col>
<Col xs="12" md="9">
<div className="controls">
<InputGroup className="input-Adr2">
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-location-arrow" aria-hidden="true"></i></InputGroupText>
</InputGroupAddon>
<Input id="adr2" size="16" type="text" defaultValue={client.Adresse2} onChange={this.handleAdresse2Change.bind(this)} placeholder="Entrer l'adresse 2 du client" autoComplete='address-line2' />
</InputGroup>
</div>
</Col>
</FormGroup>
<div className="form-actions" >
<Button active color="info" size="lg" style={btn} type="submit" onClick={() => this. handleEdit()} >Modifier</Button>
</div>
</Form>
))}
</CardBody>
</Card>
</Col>
</Row>
</div>);
}
}
export default EditClient;
How can I fix that ?
You should try without data: before the client and the comma ',' after it.
axios({
method: 'put',
url: "http://localhost:4000/app/editclient/" + this.props.match.params.Code,
client
});
Hope it helps.