We Keep Coding

JavaScript: Close Modal on correct Values

Good Day,
I am currently nearly done creating a Modal with Vanilla JS, at present, my "Age Gate" does check if the age of the user is less than 18 and displays a error of 'Invalid Credentials',
I have tried to go further by trying to close the modal on the correct value and then the modal to close,
Please see my code below for the JS:
const modal = document.getElementById("myModal");
const form = document.querySelector('form');
const loading = document.getElementById("loading");
const btnSubmit = document.getElementById('btnSubmit');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
// Functions
function onlyNumbers(e) {
const ageGate = document.querySelectorAll('.ageGate');
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
const errMsgDiv = document.getElementById('errorMsg');
let containsNumber = false
ageGate.forEach(input => {
if(numbers.some(num => input.value.includes(num))) containsNumber = true;
})
if (containsNumber || ageGate.value !== numbers && ageGate.value == '' || ageGate[2].value < 2004) {
let paragraph = document.createElement('p');
paragraph.innerHTML = 'Invalid Credentials';
errMsgDiv.append(paragraph);
e.preventDefault()
} else if (containsNumber = true) {
btnSubmit.remove()
loading.classList.remove('hide')
}
};
and now the Modal html:
<div id="modal">
<div class="modal-content">
<div class="flex-container">
<div>
<img
src="{% static 'imgs/Fireball_logo.png' %}"
class="logo"
alt="fireball logo"
/>
<h1>WOAH THERE!</h1>
<p class="info-text">We just need to see something</p>
</div>
<form action="">
{% csrf_token %}
<div class="form-flex">
<input
class="ageGate"
type="text"
max-length="2"
placeholder="DD"
/>
<input
class="ageGate"
type="text"
max-length="2"
placeholder="MM"
/>
<input
class="ageGate"
type="text"
max-length="4"
placeholder="YYYY"
/>
</div>
<p class="cookie-policy">
<small>
This site uses cookies. Cookie Policy. I agree
to the terms of use, and the privacy policy.
This information will not be used for marketing
purposes
</small>
</p>
<div class="text-center">
<button id="btnSubmit" class="btn" type="submit">
<p class="btn-text">Enter</p>
</button>
<img
src="{% static 'imgs/spinner.gif' %}"
alt="spinner"
id="loading"
class="loading close">
</div>
<span id="errorMsg"></span>
</form>
<div>
<img
src="{% static 'imgs/Drinkaware_logo.png' %}"
alt="Drinkaware Logo"
/>
</div>
</div>
</div>
</div>
Please as usual, I am sort of new with it all and I am definitely trying, so in your help, please could I ask for a brief explanation on your solution so that I may see how to think as a dev as that kind of information does help me
Thanks!

function onlyNumbers(e) {
e.preventDefault()
const ageGate = document.querySelectorAll('.ageGate');
const errMsgDiv = document.getElementById('errorMsg');
const year = ageGate[2].value;
const month = ageGate[1].value;
const day = ageGate[0].value;
const userBirthday = new Date(year, month - 1, day);
// Date Right Now
const today = new Date();
// Users age in years
const acceptingYear = today.getFullYear() - userBirthday.getFullYear()
if (acceptingYear < 18 ||
acceptingYear == 18 &&
today.getMonth() < userBirthday.getMonth() ||
today.getMonth() == userBirthday.getMonth() &&
today.getDate() < userBirthday.getDate()
) {
let paragraph = document.createElement('p');
paragraph.innerHTML = 'Invalid Credentials';
errMsgDiv.append(paragraph);
} else {
btnSubmit.remove()
loading.classList.remove('hide')
modal.classList.add('close');
}
};
I needed to target the modal and make sure that it was closing on execution of my function

Find and compare input value with JSON data

I'm trying to compare user input value with JSON data.
I found some questions similar to this one, but it didn't solve my problem.
This is my code, do you know why it doesn't work.
Javascript
fetch('js/countries.json')
.then(res => res.json())
.then(data => {
function checkCountry() {
let input = document.getElementById("countryInput").value;
let country = data.find(check => check.country === "Norway");
let text;
if (input === data[country]) {
text = "Yes";
} else {
text = "No";
}
document.getElementById("alert").innerHTML = text;
}
document.getElementById("check").addEventListener("click", checkCountry);
console.log(data);
})
JSON
[{"country":"USA","active":true},
{"country":"Spain","active":true},
{"country":"Norway","active":true}]
HTML
<form action="">
<div class="input-container">
<input id="countryInput" type="text" placeholder="Country">
<i class="fas fa-search"></i>
</div>
<button id="check" type="button">CHECK</button>
</form>

This line is not good: if (input === data[country]) {
you have to check with the same mechanism as you have checked for country above...
let inputCountry = data.find(check => check.country === input);
Like this:
const data = [{"country":"USA","active":true},
{"country":"Spain","active":true},
{"country":"Norway","active":true}];
document.getElementById("check").addEventListener("click", checkCountry);
function checkCountry() {
let input = document.getElementById("countryInput").value;
let country = data.find(check => check.country === "Norway");
let inputCountry = data.find(check => check.country === input);
let text;
// You have to check with the country
if (inputCountry && input === inputCountry.country) {
text = "Yes";
} else {
text = "No";
}
console.log(text);
}
<form action="">
<div class="input-container">
<input id="countryInput" type="text" placeholder="Country">
<i class="fas fa-search"></i>
</div>
<button id="check" type="button">CHECK</button>
</form>

You can't use data[country] because data isn't key value pair collection.
It consists of objects.
Try to change resulting json from {'country': 'Spain', 'active': true}, ... to
'Spain': {active: true}, ...
Or call data element via:
if (input === data.find(el => el.country == country)) {
text = "Yes";
} else {
text = "No";
}

Need to show the thankyou message instead of ajax response

I was trying to do the form submit response, like on submit the form fields should be hidden and to show the thank you message without refreshing the page, but when i click submit the page is getting refreshed and showing the ajax response {"result":"success","data":"{\"message\":[\"sample message\"]}"
tried using Send Email from a Static HTML Form using Google Apps Mail!
(function() {
'use strict';
function getFormData(form) {
var elements = form.elements;
var fields = Object.keys(elements).filter().map(function(k) {
if (elements[k].name !== undefined) {
return elements[k].name;
// special case for Edge's html collection
} else if (elements[k].length > 0) {
return elements[k].item(0).name;
}
}).filter(function(item, pos, self) {
return self.indexOf(item) == pos && item;
});
var formData = {};
fields.forEach(function(name) {
var element = elements[name];
// singular form elements just have one value
formData[name] = element.value;
// when our element has multiple items, get their values
if (element.length) {
var data = [];
for (var i = 0; i < element.length; i++) {
var item = element.item(i);
if (item.checked || item.selected) {
data.push(item.value);
}
}
formData[name] = data.join(', ');
}
});
// add form-specific values into the data
formData.formDataNameOrder = JSON.stringify(fields);
formData.formGoogleSheetName = form.dataset.sheet || "responses"; // default sheet name
//formData.formGoogleSend = form.dataset.email || ""; // no email by default
formData.formPage = form.dataset.page || "";
}
function handleFormSubmit(event) {
if (this.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
this.classList.add('was-validated');
} else if (this.checkValidity() === true) {
var form = event.target;
var formData = getFormData(form);
var data = formData.data;
var url = form.action;
var xhr = new XMLHttpRequest();
xhr.open('POST', url);
// xhr.withCredentials = true;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
form.reset();
var formElements = form.querySelector(".form-elements")
if (formElements) {
formElements.style.display = "none"; // hide form
}
var thankYouMessage = form.querySelector(".thankyou_message");
if (thankYouMessage) {
thankYouMessage.style.display = "block";
}
return;
};
// url encode form data for sending as post data
var encoded = Object.keys(data).map(function(k) {
return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
}).join('&');
xhr.send(encoded);
}
}
function loaded() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener("submit", handleFormSubmit, false);
});
}
document.addEventListener("DOMContentLoaded", loaded, false);
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="gform needs-validation" method="POST" data-page="form validation test" action="https://script.google.com/macros/s/AKfycbxXw4fshxotq4vkQ3LUjvBaHhjS2RjFvDvKs5FW4w/exec" novalidate>
<div class="form-elements col-md-6 m-5">
<div class="form-row">
<div class="col-md-12 mb-3">
<textarea id="visitorMessage" class="form-control" name="message" placeholder="Message" required></textarea>
<div class="invalid-tooltip"> Please enter the message </div>
</div>
</div>
<button class="btn btn-primary btn-sm mx-0" type="submit">Submit</button>
</div>
<div class="thankyou_message" style="display: none;">
<h2>Thanks for contacting us! We will get back to you soon!</h2>
</div>
</form>
I expect to show the thankyou message without refreshing the page but the actual result is the page getting refreshed and showing the Ajax response

move event.preventDefault(); out of the if statement so the default submit action of the form is never triggered. You don't want to do an submit when you do an ajax request since the submit action will navigate to the form action url.
$('.needs-validation').on('submit', handleFormSubmit);
function handleFormSubmit(event) {
event.preventDefault();
if (this.checkValidity() === true) {
//Do this in the ajax succes event handler
$('.thankyou_message').show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="gform needs-validation" method="POST" data-page="form validation test" action="https://script.google.com/macros/s/AKfycbxXw4fshxotq4vkQ3LUjvBaHhjS2RjFvDvKs5FW4w/exec" novalidate>
<div class="form-elements col-md-6 m-5">
<div class="form-row">
<div class="col-md-12 mb-3">
<textarea id="visitorMessage" class="form-control" name="message" placeholder="Message" required></textarea>
<div class="invalid-tooltip"> Please enter the message </div>
</div>
</div>
<button class="btn btn-primary btn-sm mx-0" type="submit">Submit</button>
</div>
<div class="thankyou_message" style="display: none;">
<h2>Thanks for contacting us! We will get back to you soon!</h2>
</div>
</form>

How to set value at input text field

I have this below code. I can display the list of JSON file but I can't click the items of the list. Could you teach me How to add click and store item function.
What I would like to do is click the item of the list .After click it "NAME" value store the textbox. so then After set the value Click submit buttom then pass the NAME and related data. For example. Fist data https://api.myjson.com/bins/8x0ag
Fist data name is orange. When user click the orange. and press submit button I would like to send the code "102" and location "N34" data to Next page.
name "orange"
code "102"
location "N34"
Actually I had another code. To select item and store the value into the text field. but I changed the code after that I lost selecting function.
$(document).ready(function() {
Main.init();
});
var Main = (function($) {
return {
vars: { },
init: function() {
Main.build();
Main.events();
},
events: function() {
$(document).on('keyup', '.search', function() {
const ref = $(this).attr('data-ref');
const {
vars
} = Main;
$(`.resultUl[data-ref="${ref}"]`).html('');
const searchField = $(this).val();
const expression = new RegExp(searchField, "i");
$.each(vars.JSONdata, (key, value) => {
const {
name,
location,
code,
image
} = value;
if (name.search(expression) != -1 || location.search(expression) != -1) {
$(`.resultUl[data-ref="${ref}"]`).append(
`<li class="list-group-item link-class"
data-name="${name}"
data-code="${code}"
data-location="${location}">
<img src="${image}" height="40" width="40" class="img-thumbnail" />
${name}
<span class="text-muted">${location}</span>
</li>`
);
}
});
});
},
build: async function() {
JSONdata = await this.getJson();
this.vars = {
JSONdata
};
this.generateFields(20);
},
getJson: () => new Promise((resolve, reject) => {
$.getJSON('https://api.myjson.com/bins/8x0ag', (data) => {
resolve(data);
}).fail(function() {
reject([]);
})
}),
generateFields: (fieldNumber) => {
Array(fieldNumber).fill().map((v, i) => {
const ref = i + 1;
$('#container').append(
`<div class="fieldContainer">
<div class="btn-group">
<input type="text" class="search" data-ref="${ref}" placeholder="" class="form-control" size="3000" onkeypress="return event.keyCode!=13" />
<span class="searchclear glyphicon glyphicon-remove-circle"></span>
</div>
<ul class="list-group resultUl" data-ref="${ref}"></ul>
</div>`
)
});
},
}
})($);
I tried to add this code to above but it doesn't work.
$('#result').on('click', 'li', function() {
var name = $(this).data('name' );
var code = $(this).data('code' );
var location = $(this).data('location' );
var click_text = $(this).text().split('|');
$('#search').val($.trim(click_text[0]));
$("#result").html('');
$('#result').after('<input type="hidden" name="name" value="'+name+'">');
$('#result').after('<input type="hidden" name="code" value="'+code+'">');
$('#result').after('<input type="hidden" name="location" value="'+location+'">');
});

Mainly you need an event handler for the onClick for the li items.
It sets the name as value in the visible fields and creates hidden inputs in the form where you may have as much variables as you like but serialized in any way
Here is your working example
$(document).ready(function() {
Main.init();
});
var Main = (function($) {
return {
vars: {
},
init: function() {
Main.build();
Main.events();
},
events: function() {
$(document).on('keyup', '.search', function() {
const ref = $(this).attr('data-ref');
const {
vars
} = Main;
$(`.resultUl[data-ref="${ref}"]`).html('');
const searchField = $(this).val();
const expression = new RegExp(searchField, "i");
$.each(vars.JSONdata, (key, value) => {
const {
name,
location,
code,
image
} = value;
if (name.search(expression) != -1 || location.search(expression) != -1) {
$(`.resultUl[data-ref="${ref}"]`).append(
`<li
class="list-group-item link-class list-item"
data-name="${name}"
data-code="${code}"
data-location="${location}"
>
<img src="${image}" height="40" width="40" class="img-thumbnail" />
${name}
<span class="text-muted">${location}</span>
</li>
`
);
}
});
}),
$(document).on('click', '.list-item', function() {
const ul = $(this).closest('ul');
const ref = $(ul).attr('data-ref');
const name = $(this).attr('data-name');
const location = $(this).attr('data-location');
const code = $(this).attr('data-code');
const hiddenInput = $(`.hiddenField[data-ref=${ref}]`);
//console.log(hiddenInput.length);
$(`.search[data-ref=${ref}]`).val(name);
if (hiddenInput.length) {
$(hiddenInput).val(`${name}_${location}_${code}`);
} else {
$('#submitForm').append(
`<input
type="hidden"
class="hiddenField"
data-ref="${ref}"
name="search_${ref}"
value="${name},${location},${code}}"
/>
`
)
}
$(ul).html('');
})
},
build: async function() {
JSONdata = await this.getJson(); //JSONdata is a global variable which you can access from everywhere
this.vars = {
JSONdata
};
this.generateFields(20);
},
getJson: () => new Promise((resolve, reject) => {
// Change the path below with the path for your script
$.getJSON('https://api.myjson.com/bins/lpizs', (data) => {
resolve(data);
}).fail(function() {
reject([]);
})
}),
generateFields: (fieldNumber) => {
Array(fieldNumber).fill().map((v, i) => {
const ref = i + 1;
$('#container').append(
`<div class="fieldContainer">
<div class="btn-group">
<input type="text" class="search" data-ref="${ref}" placeholder="製品 その１" class="form-control" size="3000" onkeypress="return event.keyCode!=13" />
<span class="searchclear glyphicon glyphicon-remove-circle"></span>
</div>
<ul class="list-group resultUl" data-ref="${ref}"></ul>
</div>`
)
});
},
}
})($);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>JQuery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<br /><br />
<div class="container" style="width:900px;">
<h2 align="center"></h2>
<h3 align="center"></h3>
<br /><br />
<div align="center">
<div id="container">
</div>
<br />
<form action="recive.php" method="post" id="submitForm">
<input type="submit" id="submit" />
</form>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Angularjs check and compare two input field values

I have 3 sections of input fields separated with different heading(Laser Pass, The Giggsy, The set up) generated from a JSON array. Here is what it looks like:
I want to compare two fields Score and Attempts and show an error message if the value of Score is larger then Attempts. Something like this:
But some section like, The Giggsy have a different type of input fields and no need to compare/check those fields. Only where it has SCORE and ATTEMPTS should compare.
When the section is filled up Show success message like this:
What I can do to make those things in angular way. Here is what I've done so far: PLUNKER
HTML:
<div class="row" ng-repeat="all in options">
<h4> {{ all.name}} </h4>
<div class="col-sm-5ths" ng-repeat="measurement in all.measurements">
<div class="form-group no-margin form-oneline">
<label style="width: 100%">{{ measurement.name }}</label>
<input ng-model="measurement.value" type="{{ measurement.type }}" min="{{ measurement.min }}" max="{{ measurement.max }}" class="form-control display-inline" required>
<label style="width: 100%">{{ measurement.scale }}</label>
</div>
</div>
<span style="color:red;" ng-show="testDataFieldWarning(options.measurements)">
Score can't be larger then Attempts
</span>
<span style="color:Green;" >
Done!!
</span>
</div>
<button type="submit" style="margin-top:50px;" ng-disable="">Submit</button>
JS
$scope.testDataFieldWarning = function (measurements) {
var score = 0 , attempts = 0;
angular.forEach(measurements, function(measurement) {
if((measurement.name) == 'Score'){
score = measurement.value;
}
if((measurement.name) == 'Attempts'){
attempts = measurement.value;
}
});
return attempts < score;
}
$scope.testDataFieldValidate = function (measurement) {
var isInvalid = false;
angular.forEach(measurement, function(v) {
if(typeof (v.value) == 'undefined'){
isInvalid = true;
}
});
return (isInvalid);
}
Sorry for bad English and explanation.

I forked your plunker and added some additional validating functions...
function isScoreField(measurements) {
if (measurements[1].name === 'Score' && measurements[2].name ==='Attempts') {
return true;
} else {
return false;
}
}
$scope.testDataFieldInvalid = function (measurements) {
if (isScoreField(measurements) && parseInt(measurements[2].value) < parseInt(measurements[1].value)) {
return true;
} else {
return false;
}
};
$scope.testDataFieldsEntered = function (measurements) {
if (measurements[1].value && measurements[2].value) {
return true;
} else {
return false;
}
};
... that will conditionally show/hide the done/error messages.
<span style="color:red;" ng-show="testDataFieldInvalid(all.measurements)">
Score can't be larger than Attempts
</span>
<span style="color:Green;" ng-show="testDataFieldsEntered(all.measurements) && !testDataFieldInvalid(all.measurements)">
Done!!
</span>
Hope this helps!