123 lines
4.1 KiB
JavaScript
123 lines
4.1 KiB
JavaScript
import React, { Component } from 'react'
|
|
|
|
class GetinTouch extends Component {
|
|
|
|
|
|
state = {
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
lastname: '',
|
|
events: '',
|
|
notes: '',
|
|
error: {}
|
|
}
|
|
|
|
|
|
changeHandler = (e) => {
|
|
const error = this.state.error;
|
|
error[e.target.name] = ''
|
|
|
|
this.setState({
|
|
[e.target.name]: e.target.value,
|
|
error
|
|
})
|
|
}
|
|
|
|
subimtHandler = (e) => {
|
|
e.preventDefault();
|
|
|
|
const { name,
|
|
email,
|
|
phone,
|
|
lastname,
|
|
events,
|
|
notes, error } = this.state;
|
|
|
|
if (name === '') {
|
|
error.name = "Please enter your name";
|
|
}
|
|
if (email === '') {
|
|
error.email = "Please enter your email";
|
|
}
|
|
if (phone === '') {
|
|
error.phone = "Please enter your phone";
|
|
}
|
|
if (lastname === '') {
|
|
error.lastname = "Please enter your Lastname";
|
|
}
|
|
if (events === '') {
|
|
error.events = "Select your event list";
|
|
}
|
|
if (notes === '') {
|
|
error.notes = "Please enter your note";
|
|
}
|
|
|
|
|
|
if (error) {
|
|
this.setState({
|
|
error
|
|
})
|
|
}
|
|
if (error.name === '' && error.email === '' && error.email === '' && error.lastname === '' && error.phone === '' && error.events === '' && error.notes === '') {
|
|
this.setState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
events: '',
|
|
notes: '',
|
|
error: {}
|
|
})
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { name,
|
|
email,
|
|
phone,
|
|
error } = this.state;
|
|
|
|
return (
|
|
<div className="question-area section-padding">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-8 offset-lg-2">
|
|
<div className="wpo-section-title">
|
|
<h2>Do You Have Any Question?</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-lg-8 offset-lg-2">
|
|
<div className="question-touch">
|
|
<h2>Get In Touch</h2>
|
|
<form onSubmit={this.subimtHandler}>
|
|
<div className="half-col">
|
|
<input value={name} onChange={this.changeHandler} type="text" name="name" placeholder="Name" />
|
|
<p>{error.name ? error.name : ''}</p>
|
|
</div>
|
|
<div className="half-col">
|
|
<input onChange={this.changeHandler} value={email} type="email" name="email" placeholder="Email" />
|
|
<p>{error.email ? error.email : ''}</p>
|
|
</div>
|
|
<div className="half-col">
|
|
<input onChange={this.changeHandler} value={phone} type="text" name="phone" placeholder="phone" />
|
|
<p>{error.phone ? error.phone : ''}</p>
|
|
</div>
|
|
<div>
|
|
<textarea className="form-control" name="note" id="note" placeholder="Your Question"></textarea>
|
|
</div>
|
|
<div className="submit-btn-wrapper">
|
|
<button type="submit" className="theme-btn">Submit Now</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
}
|
|
export default GetinTouch; |