Skip to content

Commit

Permalink
js and html form improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@comtom
comtom committed Aug 1, 2023
1 parent f6bf519 commit 4a5662d
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 25 deletions.
72 changes: 58 additions & 14 deletions dist/js/custom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,18 +86,21 @@ $(document).ready(function () {
});


$('#button-register').on("click", function (e) {
e.preventDefault();

// TODO: validate email
function send_form_register() {
// validate data
var email = $('#subscription-email').val();
if (email == "" | !email.includes("@")) {
$('#subscribe-failed').modal('show');
return
}

// TODO: disable button
// TODO: show spinner

$.ajax({
contentType: 'application/json',
data: JSON.stringify({
"email": $('#subscription-email').val()
"email": email
}),
dataType: 'json',
type: 'POST',
Expand All @@ -112,38 +115,79 @@ $(document).ready(function () {
// TODO: enable button
// TODO: hide spinner
});
});
}


$('#contact-form').on('submit', function (e) {
$('#register-form').on('submit', function (e) {
e.preventDefault();

send_form_register();
});

$('#register-btn').on('click', function (e) {
e.preventDefault();

// TODO: validate data
send_form_register();
});



function send_form_contact() {
// validate data
var name = $('#contact-name').val();
var email = $('#contact-email').val();
var message = $('#contact-message').val();
if (email == "" | !email.includes("@")) {
$('#contact-failed').modal('show');
return
}
if (message == "") {
$('#contact-failed').modal('show');
return
}
if (name == "") {
$('#contact-failed').modal('show');
return
}

// TODO: disable button
// TODO: show spinner

$.ajax({
contentType: 'application/json',
data: JSON.stringify({
"name": $('#contact-name').val(),
"name": name,
"phone": "5555555",
"email": $('#contact-email').val(),
"message": $('#contact-message').val(),
"email": email,
"message": message,
}),
dataType: 'json',
type: 'POST',
url: 'https://comtomengineering-serverless.vercel.app/api/contact',
success: function (response) {
$('#contact-success').modal('show');
},
error: function (response) {
$('#contact-fail').modal('show');
}
}).done(function () {
$('#contact-success').modal('show');
}).fail(function () {
$('#contact-failed').modal('show');
}).always(function () {
// TODO: enable button
// TODO: hide spinner
});
}

$('#contact-form').on('submit', function (e) {
e.preventDefault();

send_form_contact();
});


$('#contact-btn').on('click', function (e) {
e.preventDefault();

send_form_contact();
});

$(window).scroll(function () {
Expand Down
21 changes: 10 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -640,22 +640,22 @@ <h6 class="text-white">Sofia Fernandez</h6>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="form-group">
<label class="form-label text-white fs-7 mb-3">Full Name</label>
<input id="contact-name" type="text" class="form-control border-0"
placeholder="Enter your name">
<input id="contact-name" type="text" required="required" pattern="[A-Za-z0-9]{1,20}"
class="form-control border-0" placeholder="Enter your name">
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="form-group">
<label class="form-label text-white fs-7 mb-3">Email address</label>
<input id="contact-email" type="email" class="form-control border-0"
<input id="contact-email" type="email" required class="form-control border-0"
placeholder="Enter your email address">
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="form-label text-white fs-7 mb-3">Inquiry</label>
<textarea id="contact-message" class="form-control border-0"></textarea>

<textarea id="contact-message" type="text" required="required"
pattern="[A-Za-z0-9]{1,20}" class="form-control border-0"></textarea>
</div>
</div>

Expand All @@ -668,8 +668,8 @@ <h6 class="text-white">Sofia Fernandez</h6>
class="text-warning text-decoration-none">terms and conditions of use.</a>
</div>
<div class="col-12">
<button
class="btn btn-warning btn-hover-secondary text-capitalize mt-2 w-auto contact-btn">Contact
<button class="btn btn-warning btn-hover-secondary text-capitalize mt-2 w-auto"
id="contact-btn" type="submit">Contact
Us</button>
</div>
</div>
Expand Down Expand Up @@ -748,14 +748,13 @@ <h5 class="text-white">Company</h5>
<h5 class="text-white">Subscribe</h5>
<p class="blue-light fw-500">Subscribe to get the latest news form us
</p>
<form>
<form id="register-form">
<div class="input-group">
<input id="subscription-email" type="email" class="form-control br-15"
placeholder="Enter email address" aria-label="Enter email address"
aria-describedby="button-addon2">
placeholder="Enter email address" required aria-label="Enter email address">
<button
class="btn btn-warning btn-hover-secondary ms-xxl-2 ms-xl-2 ls-lg-0 ms-md-0 ms-sm-0 ms-0"
type="button" id="button-register">Register</button>
type="submit" id="register-btn">Register</button>
</div>
</form>
</div>
Expand Down

0 comments on commit 4a5662d

Please sign in to comment.