kevin/hypothetical
1
0
Fork 0
mirror of https://github.com/prurigro/hypothetical.git synced 2024-11-26 00:51:26 -05:00
Code Issues Projects Releases Packages Wiki Activity

Update the contact form to reflect changes to laravel and use name instead of id so it doesn't monopolize the keywords on potential global forms

Browse source
This commit is contained in:
Kevin MacMartin 2017-09-26 15:43:02 -04:00
parent 32bef04ced
commit ac5697eeeb
3 changed files with 23 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
resources/assets/js/contact.js vendored
View file

@ -2,21 +2,26 @@
function contactFormInit() { function contactFormInit() {
const $form = $("#contact-form"), const $form = $("#contact-form"),
$input = $form.find(":input"), $input = $form.find(":input"),
$notify = $("#notification"); $name = $form.find("[name='name']"),
$email = $form.find("[name='email']"),
$message = $form.find("[name='message']"),
$token = $form.find("[name='_token']"),
$submit = $form.find("[name='submit']"),
$notify = $form.find(".notification");
let contact = {}, let contact = {},
submitting = false; submitting = false;
const getContactData = function() { const getContactData = function() {
contact = { contact = {
name: $("#name").val(), name: $name.val(),
email: $("#email").val(), email: $email.val(),
message: $("#message").val(), message: $message.val(),
_token: $("#token").val() _token: $token.val()
}; };
}; };
$("#submit").on("click", function(e) { $submit.on("click", function(e) {
const $submit = $(this); const $submit = $(this);
e.preventDefault(); e.preventDefault();
@ -30,7 +35,7 @@ function contactFormInit() {
url: "/api/contact-submit", url: "/api/contact-submit",
data: contact data: contact
}).always(function(response) { }).always(function(response) {
let responseJSON, errors, prop; let errors;
$form.find(".error").removeClass("error"); $form.find(".error").removeClass("error");
$notify.removeClass("visible"); $notify.removeClass("visible");
@ -40,13 +45,12 @@ function contactFormInit() {
$submit.addClass("disabled"); $submit.addClass("disabled");
$notify.text("Thanks for your message!").addClass("success").addClass("visible"); $notify.text("Thanks for your message!").addClass("success").addClass("visible");
} else { } else {
responseJSON = response.responseJSON;
errors = 0; errors = 0;
// add the error class to fields that haven't been filled out // add the error class to fields that haven't been filled out
for (prop in responseJSON) { for (let errorName in response.responseJSON.errors) {
if (responseJSON.hasOwnProperty(prop)) { if ($form.find(`[name='${errorName}']`).length) {
$("#" + prop).addClass("error"); $form.find(`[name='${errorName}']`).addClass("error");
errors++; errors++;
} }
} }

4
resources/assets/sass/pages/_contact.scss vendored
View file

@ -21,7 +21,7 @@
height: 150px; height: 150px;
} }
#submit { .submit {
background-color: lighten($c-base, 5%); background-color: lighten($c-base, 5%);
color: $c-text-light; color: $c-text-light;
font-weight: bold; font-weight: bold;
@ -31,7 +31,7 @@
&.disabled { background-color: $c-base; } &.disabled { background-color: $c-base; }
} }
#notification { .notification {
margin: 0px auto 15px auto; margin: 0px auto 15px auto;
padding: 5px 10px; padding: 5px 10px;
background-color: lighten($c-error, 15%); background-color: lighten($c-error, 15%);

12
resources/views/website/contact.blade.php
View file

@ -12,14 +12,14 @@
<div class="col-xs-12 col-md-8 col-md-offset-2"> <div class="col-xs-12 col-md-8 col-md-offset-2">
<div id="contact-form"> <div id="contact-form">
<form action="#" method="POST" accept-charset="UTF-8"> <form action="#" method="POST" accept-charset="UTF-8">
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" /> <input type="hidden" name="_token" value="{{ csrf_token() }}" />
<input type="text" name="name" id="name" placeholder="Name" /> <input type="text" name="name" placeholder="Name" />
<input type="text" name="email" id="email" placeholder="Email" /> <input type="text" name="email" placeholder="Email" />
<textarea name="message" id="message" placeholder="Message"></textarea> <textarea name="message" placeholder="Message"></textarea>
<input id="submit" type="submit" value="Submit" /> <input class="submit" type="submit" name="submit" value="Submit" />
</form> </form>
<div id="notification"><strong>Error:</strong> There were problems with the <span>0</span> fields highlighted above</div> <div class="notification"><strong>Error:</strong> There were problems with the <span>0</span> fields highlighted above</div>
</div> </div>
</div> </div>
</div> </div>