S
S
Serghei QED2022-01-17 18:13:44
React
Serghei QED, 2022-01-17 18:13:44

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 question

Ask a Question

731 491 924 answers to any question