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

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

View file

@ -2,21 +2,26 @@
function contactFormInit() {
const $form = $("#contact-form"),
$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 = {},
submitting = false;
const getContactData = function() {
contact = {
name: $("#name").val(),
email: $("#email").val(),
message: $("#message").val(),
_token: $("#token").val()
name: $name.val(),
email: $email.val(),
message: $message.val(),
_token: $token.val()
};
};
$("#submit").on("click", function(e) {
$submit.on("click", function(e) {
const $submit = $(this);
e.preventDefault();
@ -30,7 +35,7 @@ function contactFormInit() {
url: "/api/contact-submit",
data: contact
}).always(function(response) {
let responseJSON, errors, prop;
let errors;
$form.find(".error").removeClass("error");
$notify.removeClass("visible");
@ -40,13 +45,12 @@ function contactFormInit() {
$submit.addClass("disabled");
$notify.text("Thanks for your message!").addClass("success").addClass("visible");
} 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

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

View file

@ -12,14 +12,14 @@
<div class="col-xs-12 col-md-8 col-md-offset-2">
<div id="contact-form">
<form action="#" method="POST" accept-charset="UTF-8">
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" />
<input type="text" name="name" id="name" placeholder="Name" />
<input type="text" name="email" id="email" placeholder="Email" />
<textarea name="message" id="message" placeholder="Message"></textarea>
<input id="submit" type="submit" value="Submit" />
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
<input type="text" name="name" placeholder="Name" />
<input type="text" name="email" placeholder="Email" />
<textarea name="message" placeholder="Message"></textarea>
<input class="submit" type="submit" name="submit" value="Submit" />
</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>