Move the subscription form to its own blade so it can be imported, remove the address/location as that's not standard, get things working correctly, add errors, and use name instead of id for the form fields so it can be used on any page

This commit is contained in:
Kevin MacMartin 2017-09-26 15:35:30 -04:00
parent e4cab7cb86
commit 32bef04ced
6 changed files with 31 additions and 29 deletions

View file

@ -10,22 +10,19 @@ class SubscriptionController extends Controller {
{
$this->validate($request, [
'name' => 'required',
'email' => 'required|email',
'address' => array('required', 'regex:/^([A-Za-z][0-9][A-Za-z] *[0-9][A-Za-z][0-9]|[0-9][0-9][0-9][0-9][0-9])$/')
'email' => 'required|email'
]);
$name = $request['name'];
$fname = preg_replace('/ .*$/', '', $name);
$lname = preg_match('/. ./', $name) === 1 ? preg_replace('/^[^ ][^ ]* /', '', $name) : '';
$email = $request['email'];
$address = $request['address'];
if (env('MAILCHIMP_APIKEY', '') != '' && env('MAILCHIMP_LISTID', '') != '') {
// Submit the subscription request
Newsletter::subscribe($email, [
'FNAME' => $fname,
'LNAME' => $lname,
'ADDRESS' => $address
'LNAME' => $lname
]);
}
@ -33,7 +30,6 @@ class SubscriptionController extends Controller {
$subscriptions = new Subscriptions;
$subscriptions->name = $name;
$subscriptions->email = $email;
$subscriptions->location = $address;
$subscriptions->save();
return 'success';

View file

@ -17,7 +17,6 @@ class AddSubscriptionTable extends Migration
$table->increments('id');
$table->string('name');
$table->string('email');
$table->string('location');
$table->timestamps();
});
}

View file

@ -2,21 +2,24 @@
function subscriptionFormInit() {
const $form = $("#subscription-form"),
$input = $form.find(":input"),
$notify = $("#notification");
$name = $form.find("[name='name']"),
$email = $form.find("[name='email']"),
$token = $form.find("[name='_token']"),
$submit = $form.find("[name='submit']"),
$notify = $form.find(".notification");
let subscribe = {},
submitting = false;
const getSubscribeData = function() {
subscribe = {
name: $("#name").val(),
email: $("#email").val(),
address: $("#address").val(),
_token: $("#token").val()
name: $name.val(),
email: $email.val(),
_token: $token.val()
};
};
$("#submit").on("click", function(e) {
$submit.on("click", function(e) {
e.preventDefault();
if (!submitting) {
@ -25,10 +28,10 @@ function subscriptionFormInit() {
$.ajax({
type: "POST",
url: "/subscription-submit",
url: "/api/subscription-submit",
data: subscribe
}).always(function(response) {
let responseJSON, errors, prop;
let errors;
$form.find(".error").removeClass("error");
$notify.removeClass("visible").removeClass("error");
@ -41,13 +44,12 @@ function subscriptionFormInit() {
$input.fadeOut(150);
}, 1000);
} else {
responseJSON = response.responseJSON;
errors = 0;
// add the error class to fields that haven't been filled out
for (prop in responseJSON) {
if (responseJSON.hasOwnProperty(prop)) {
$("#" + prop).addClass("error");
for (let errorName in response.responseJSON.errors) {
if ($form.find(`[name='${errorName}']`).length) {
$form.find(`[name='${errorName}']`).addClass("error");
errors++;
}
}

View file

@ -1,4 +1,5 @@
#subscription-form {
$trans-speed: 100ms;
position: absolute;
top: 50%;
right: 0px;
@ -12,5 +13,11 @@
margin: 5px;
width: calc(100% - 10px);
padding: 3px;
border: 1px solid lighten($c-accent, 50%);
transition: border-color $trans-speed;
&.error {
border-color: $c-error;
}
}
}

View file

@ -0,0 +1,7 @@
<form id="subscription-form" action="#" method="POST" accept-charset="UTF-8">
<div class="notification"></div>
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
<input type="text" name="email" placeholder="Email" />
<input type="text" name="name" placeholder="Name" />
<input type="submit" name="submit" value="Subscribe" />
</form>

View file

@ -1,14 +1,5 @@
@extends('layouts.public', [ 'title' => 'Home' ])
@section('content')
<div id="subscription-form">
<form action="#" method="POST" accept-charset="UTF-8">
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" />
<input type="text" name="email" id="email" placeholder="Email" />
<input type="text" name="name" id="name" placeholder="Name" />
<input type="text" name="address" id="address" placeholder="Postal / ZIP" />
<div id="notification"></div>
<input id="submit" type="submit" value="Subscribe" />
</form>
</div>
@include('elements.subscription-form')
@endsection