mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-22 07:54:11 -05:00
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:
parent
32bef04ced
commit
ac5697eeeb
3 changed files with 23 additions and 19 deletions
26
resources/assets/js/contact.js
vendored
26
resources/assets/js/contact.js
vendored
|
@ -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
4
resources/assets/sass/pages/_contact.scss
vendored
|
@ -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,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>
|
||||||
|
|
Loading…
Reference in a new issue