mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-09 11:16:39 -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() {
|
||||
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++;
|
||||
}
|
||||
}
|
||||
|
|
4
resources/assets/sass/pages/_contact.scss
vendored
4
resources/assets/sass/pages/_contact.scss
vendored
|
@ -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%);
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue