Remove 2nd RSVP button on home page, auto validates and submits now
This commit is contained in:
@@ -23,16 +23,6 @@
|
|||||||
|
|
||||||
.formGroup {
|
.formGroup {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rsvpGroup {
|
|
||||||
width: 65%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rsvpButtonGroup {
|
|
||||||
width: 30%;
|
|
||||||
float: right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
|||||||
@@ -36,10 +36,17 @@ class RsvpButton extends React.Component {
|
|||||||
|
|
||||||
handleRsvpChange = () => {
|
handleRsvpChange = () => {
|
||||||
this.setState({ inputInvalidMsg: null });
|
this.setState({ inputInvalidMsg: null });
|
||||||
|
if (this.rsvpInput.value && this.rsvpInput.value.length === 4) {
|
||||||
|
this.validateRsvp();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleFormSubmit = (event) => {
|
handleFormSubmit = (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
this.validateRsvp();
|
||||||
|
}
|
||||||
|
|
||||||
|
validateRsvp = () => {
|
||||||
fetch(`rsvp/${this.rsvpInput.value}`)
|
fetch(`rsvp/${this.rsvpInput.value}`)
|
||||||
.then(data => {
|
.then(data => {
|
||||||
if (data.status === 200) {
|
if (data.status === 200) {
|
||||||
@@ -82,8 +89,13 @@ class RsvpButton extends React.Component {
|
|||||||
this.state.showRsvpForm ? s.rsvpFormVisible : null,
|
this.state.showRsvpForm ? s.rsvpFormVisible : null,
|
||||||
].join(' ')}
|
].join(' ')}
|
||||||
>
|
>
|
||||||
<form method="post" action="/rsvp" onSubmit={this.handleFormSubmit}>
|
<form
|
||||||
<div className={[s.formGroup, s.rsvpGroup].join(' ')}>
|
method="post"
|
||||||
|
action="/rsvp"
|
||||||
|
ref={(form) => { this.rsvpForm = form; }}
|
||||||
|
onSubmit={this.handleFormSubmit}
|
||||||
|
>
|
||||||
|
<div className={s.formGroup}>
|
||||||
<label className={s.label} htmlFor="code">
|
<label className={s.label} htmlFor="code">
|
||||||
Enter your RSVP code
|
Enter your RSVP code
|
||||||
</label>
|
</label>
|
||||||
@@ -99,14 +111,12 @@ class RsvpButton extends React.Component {
|
|||||||
id="code"
|
id="code"
|
||||||
type="text"
|
type="text"
|
||||||
name="code"
|
name="code"
|
||||||
|
minLength="4"
|
||||||
|
maxLength="4"
|
||||||
placeholder="Enter your RSVP code"
|
placeholder="Enter your RSVP code"
|
||||||
|
autoComplete="off"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={[s.formGroup, s.rsvpButtonGroup].join(' ')}>
|
|
||||||
<button className={s.button} type="submit">
|
|
||||||
RSVP
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
<div
|
<div
|
||||||
className={[
|
className={[
|
||||||
|
|||||||
Reference in New Issue
Block a user