Answer the question
In order to leave comments, you need to log in
How to display a message about the successful submission of the form and send the data to the server?
I have a form component to collect email addresses. How to make if the form is submitted, hide the form and display a message about successful submission? and add sending data to the server?
import React, { Component } from 'react';
import { FormErrors } from '../components/FormsErrors';
class SubscibeFrom extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
formErrors: { email: ''},
emailValid: false,
formValid: false
}
}
handleUserInput = (e) => {
const name = e.target.name;
const value = e.target.value;
this.setState({ [name]: value },
() => { this.validateField(name, value) });
}
validateField(fieldName, value) {
let fieldValidationErrors = this.state.formErrors;
let emailValid = this.state.emailValid;
switch (fieldName) {
case 'email':
emailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
fieldValidationErrors.email = emailValid ? '' : ' is invalid';
break;
default:
break;
}
this.setState({
formErrors: fieldValidationErrors,
emailValid: emailValid,
}, this.validateForm);
}
validateForm() {
this.setState({ formValid: this.state.emailValid && this.state.passwordValid });
}
errorClass(error) {
return (error.length === 0 ? '' : 'has-error');
}
render() {
return (
<form className="demoForm mb-10">
<div className="panel panel-default">
<FormErrors formErrors={this.state.formErrors} />
</div>
<div className={`form-group ${this.errorClass(this.state.formErrors.email)}`}>
<label htmlFor="email">Email address</label>
<input type="email" required className="form-control" name="email"
placeholder="Email"
value={this.state.email}
onChange={this.handleUserInput} />
</div>
<button type="submit" className="btn btn-primary" disabled={!this.state.formValid}>Send</button>
<div className='form-success'>
<div className='form-success__title'>
<h2>Thank you for subscribing!</h2>
</div>
<div className='form-success__text'>
<p>We will send you a confirmation email shortly.</p>
</div>
</div>
</form>
)
}
}
export default SubscibeFrom;
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question