range.js

import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import Header from "../components/header";
import axios from "axios";
import serialize from "form-serialize";

class Jurist extends Component {


    constructor(props) {
        super(props);
        console.log(this);

        this.state = {
            TEL: "",
            SELECT: "",
            EMAIL: "",
            MESSAGE: ""
        };

        this.onBtnSend = this.onBtnSend.bind(this);
        this.onMessageChange = this.onMessageChange.bind(this);
        this.onEmailChange = this.onEmailChange.bind(this);
        this.onSelectChange = this.onSelectChange.bind(this);
        this.onTelChange = this.onTelChange.bind(this);
        this.ajaxFunc = this.ajaxFunc.bind(this);

    }

    onSelectChange(e) {

        let val = e.target.value;
        this.setState({SELECT: val})
    }

    onTelChange(e) {


        let val = e.target.value;
        this.setState({TEL: val});

    }

    onEmailChange(e) {


        let val = e.target.value;
        this.setState({EMAIL: val});

    }

    onMessageChange(e) {


        let val = e.target.value;
        this.setState({MESSAGE: val});

    }

    onBtnSend(e) {

        e.preventDefault();
        if (this.state.TEL === '' || this.state.EMAIL === '' || this.state.SELECT === '') {

            alert('Заполните все поля!');
            return false;

        } else {
            this.ajaxFunc();

            console.log(this);


        }


    }


    ajaxFunc() {

        let form = document.querySelector('#order-jurist');
        let data = serialize(form);
        axios({

            method: 'post',
            url: 'http://военгарант.рф/api/jurist-order.php',
            data: data,

        })
            .then(res => {


                // console.log('ok');
                // console.log(item);
                if (res.data.STATUS === "OK") {
                    console.log('ok');
                    console.log(res);
                    alert('Заявка успешно отправлена!');

                } else {

                    console.log('error!');
                    console.log(res);

                }


            })
            .catch(function (er) {

                console.log('error');
                console.log(er);
            });
        console.log(data);

    }


    juristOrder() {
        return (
            <form id="order-jurist" name="jurist">
                <span className="l-title general-form__l-title">Задать вопрос</span>
                <ul>
                    <li>
                        <label>Тема*</label>
                        <input name="THEME" onChange={this.onSelectChange}/>
                    </li>
                    <li>
                        <label>Телефон*</label>
                        <input type="tel" name="TEL" onChange={this.onTelChange}/>
                    </li>
                    <li>
                        <label>E-mail*</label>
                        <input type="email" name="EMAIL" onChange={this.onEmailChange}/>
                    </li>
                    <li>
                        <label>Сообщение</label>
                        <textarea name="MESSAGE" onChange={this.onMessageChange}/>
                    </li>
                </ul>
                <button type="submit" onClick={this.onBtnSend} className="btn-e blue bubble">Отправить</button>
            </form>

        );
    }

    juristView() {

        return (
            <section className="jurist">
                <div className="container">
                    <div className="general-form general-form_jurist">
                        {this.juristOrder()}
                    </div>
                    <div className="jurist-content">
                        <span className="l-title jurist-content__l-title">Как предоставляется ответ</span>
                        <p>
                            Наши консультанты и юристы работают
                            с понедельника по пятницу с 10:00 до 19:00. В случае сложного вопроса или вопроса,
                            не связанного с НИС, на подготовку ответа может
                            потребоваться до 5 рабочих дней, ответ будет
                            направлен вам на e-mail. Будем рады вас
                            проконсультировать. Ответ мы гарантируем!
                        </p>
                    </div>
                </div>
            </section>

        );
    }


    render() {


        return (

            <div>
                <Header headTitle={"Вопрос юристу"} goBack={"/"}/>
                {this.juristView()}

            </div>

        );
    }


}

export default withRouter(Jurist);