We Keep Coding

Detecting display: inline-block with Javascript vanilla

I have a multilanguage registration page. All the of it is on one HTML document, and each language is in its own div, with display:none; or display:visible depending on the language selected.
All of the forms are identical, ie. <input type="email" class="email"> is the same on all forms (with different placeholders etc.).
I would like to know how I could use a conditional statement to see which div is visible, so I could take out the appropriate class information via index.
For example, the user filled out the English registration page, I know I need to use getElementsByClassName(".email")[1].value. (index 1).
Or is there a way to detect which element in the array has actual content/value (as the specific class array will be empty, except for 1 entry).
HTML
<div class="lng" id="sl">
<div class="registerTitle">
Slo - Register
</div>
<div class="registerForm">
<form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
<input type="text" name="fname" required maxlength="50" minlength="1" placeholder="Janez"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Janez'" /><br />
<input type="text" name="lname" required maxlength="50" minlength="1" placeholder="Novak"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Novak'" /><br />
<span class="radioS">Spol: </span><br /><br />
<div class="radioC"><label><input type="radio" name="spol" value="M">Moski</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="Z">Zenski</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="O">Ostalo</label></div><br /><br />
<input type="email" name="email" autofocus="autofocus" required placeholder="moj#email.com"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'moj#email.com'" />
<br />
<input type="button" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
</div>
</div>
<div class="lng" id="en">
<div class="registerTitle">
Eng - Register
</div>
<div class="registerForm">
<form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
<input type="text" name="fname" required maxlength="50" minlength="1" placeholder="John"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'John'" /><br />
<input type="text" name="lname" required maxlength="50" minlength="1" placeholder="Doe"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Doe'" /><br />
<span class="radioS">Gender: </span><br /><br />
<div class="radioC"><label><input type="radio" name="spol" value="M">Male</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="Z">Female</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="O">Other</label></div><br /><br />
<input type="email" name="email" autofocus="autofocus" required placeholder="my#email.com"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'my#email.com'" />
<br />
<input type="button" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
</div>
</div>

Have a look at - how can I disable everything inside a form using javascript/jquery?
Disabling other form inputs might be an option, so when you go to submit, the form that isn't disabled submits.

Here's a way to detect if an array of inputs has a value and then log to the console. I know it's general, but I'm having a hard time understanding exactly what you need in your case:
const emailInputs = Array.from(document.querySelectorAll('.email'));
const form = document.querySelector('form');
form.addEventListener('change', () => {
const hasValue = emailInputs.filter((input) => input.value);
console.log('these inputs are active...\n');
hasValue.forEach(val => console.log(val));
});
<form action="" method="get" class="form-example">
<div class="form-example">
<label for="en">English </label>
<input type="email" name="en" id="email" class="email">
</div>
<div class="form-example">
<label for="fr">French </label>
<input type="email" name="fr" id="email2" class="email">
</div>
<div class="form-example">
<label for="es">Spanish </label>
<input type="email" name="es" id="email3" class="email">
</div>
<div class="form-example">
<label for="it">Italian </label>
<input type="email" name="it" id="email4" class="email">
</div>
</form>
Here's a JSFiddle if you want to play with it outside of this setting.

jQuery: Adding html elements dynamically using jquery

I want to add some html elements dynamically using jQuery inside a form tag but it is not working .
$(document).ready(function() {
var requirements = 0;
var container = $(document.createElement('div').addClass('form-group'));
$('#add-req').click(function() {
if (requirements <= 15) {
requirements = requirements + 1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post">
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
when I click add requirement button it should create another div tag and input element inside form element.

Just replace the code $(document.createElement('div').addClass('form-group')); to $(document.createElement('div')).addClass('form-group');

Try the following
We can directly Insert a html element to the targer Element as follow
$(document).ready(function(){
var requirements=0;
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$('#requirement-div').after('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>

you mixing between JS and JQuery, where document.createElemet('div') is a JS function while addClass is a JQuery function.
$(document).ready(function(){
var requirements = 0;
var container=$('<div>').addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
container.append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$(this).before(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>

Replace the Below Code
<script>
$(document).ready(function(){
var requirements=0;
var container=$(document.createElement('div')).addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
</script>

I wrote a script here (Adding html elements dynamically using jquery) that you can test
<form action="#" method="post">
<div class="form-group">
<input type="text" class="form-control test" placeholder="Your Name" name="Course name" required="">
</div>
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<div class="styled-input">
<input type="button" class="btn btn-primary" value="Add Requirements" id="add-req">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
JQuery Code
$(function() {
var requirements=0;
$('#add-req').click(function(e){
e.preventDefault();
$('.test').val('Okay');
if(requirements <= 15) {
$('.styled-input').prepend('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
requirements++;
} else {
alert('Max requirement has been reached');
}
});
});

Add current page URL in input in AMP page

I just want to ask that how do I add current URL in an input of form, so I can save it where I want to save.
I have tried simple Javascript, succeed but amp page become invalid.
My code is as follows
<form method="GET" class="p2" action="SUBMIT URL" target="_top">
<input type="hidden" value="" name="redirect" />
<div class="block-width2">
<div class="col-md-6"><p><input name="name" placeholder="Full Name *" type="text" required /></p></div>
<div class="col-md-6">
<p data-aos="fade-left" class="aos-init aos-animate"><input name="Email" placeholder="E-mail ID *" type="email" required /></p>
</div>
</div>
<div class="block-width2">
<div class="col-md-5"><p><input name="Mobile" placeholder="Contact No.*" type="text" required /></p></div>
<div class="col-md-7"><p><input name="city" placeholder="City*" required type="text"></p></div>
</div>
<div class="block-width2">
<div class="col-md-12"><p><input name="comments" placeholder="Comments*" required type="text" /></p></div>
</div>
<input type="hidden" name="vendor" value="VMware" />
<input type="hidden" name="course" value="VMware Training" />
<input type="hidden" name="url" id="url" value="" /> //Here I want page URL.
<div class="block-width2">
<div class="col-md-12"><p><button class="button-set" type="submit">Submit Now </button></p></div>
</div>
</form>
<script>document.getElementById("url").value = location.href;</script> // working with invalid AMP

Javascript failing to validate form

I am having trouble pinpointing why my javascript code is failing to validate the form on the bottom. Any help is appreciated. I'm new and learning when in comes to javascript.
Here's the javascript:
<script type="text/javascript" language="javascript">
function validate(){
//Initialize array
var field = new Array;
var field = [document.getElementById('first_name'),document.getElementById('last_name'),document.getElementById('address'),document.getElementById('eadress'),document.getElementById('city'),document.getElementById('state'),document.getElementById('telephone'),document.getElementById('comments')];
//Error tracker
var error = 0;
//Validation Loop
for (i=0;i<field.length;i++)
{
if (field[i].value == "")
{
error++;
}
}
//If no errors are present, submit
if (error == 0)
{
document.contact-form.submit();
}
//Else, display alert
else {
alert("One or more fields are empty.");
return false;
}
}
Here's the form:
<div id="registration">
<form action="" method="post" onsubmit="return validate();" id="contact-form">
<h2>Contact Us
</h2>
<div>
<label for="first_name">First Name:</label>
<input id="first_name" name="first_name" type="text" class="required" />
</div>
<div>
<label for="last_name">Last Name:</label>
<input id="last_name" name="last_name" type="text" class="required" />
</div>
<div>
<label for="address">Address:</label>
<input id="address" name="address" type="text" />
</div>
<div>
<label for="city">City:</label>
<input id="city" name="city" type="text" />
</div>
<div >
<label for="state">State:</label>
<input id="state" name="state" type="text" />
</div>
<div >
<label for="zip">Zip:</label>
<input id="zip" name="zip" type="text" />
</div>
<div>
<label for="eaddress">Email address:</label>
<input id="eaddress" name="eaddress" type="text" class="required"/>
</div>
<div>
<label for="telephone">Telephone:</label>
<input id="telephone" name="telephone" type="text" />
</div>
<div>
<label>Comments:</label>
<textarea rows="4" cols="4" name="comments" id="comments" ></textarea>
</div>
<div>
<label></label>
<input id="submit" type="submit" value="Submit" />
<input id="reset" type="reset" value="Reset" />
</div>
</form>

I just corrected your code. it seems that in the array you are asking for eadress and the field is eaddress with 2 d's

In the script, you misspelt eaddress as eadress :)

You misspelled one of the fields ids in your array definition document.getElementById('eadress') is eaddress in HTML id attribute

ng-animate in AngularJS validation

I'm trying to integrate the shake effect in an AngularJS validation but I am failing to do so using animate.css. Here is my code:
<div class="form-group">
<input type="text" name="firstName" id="firstName"
ng-model="firstName"
ng-class="{'animate shake':submitted && myForm.firstName.$invalid }"
class="form-control" placeholder="First Name" value="" required/>
</div>
<div class="form-group">
<input type="text" name="lastName" id="lastName"
ng-model="lastName"
ng-class="{'animate shake':submitted && myForm.lastName.$invalid }"
class="form-control" placeholder="Last Name" required />
</div>
<div class="form-group">
<input type="email" name="input" id="emailId"
ng-model="email"
ng-class="{'animate shake':submitted && myForm.input.$invalid }"
class="form-control" placeholder="Email" required />
</div>
<button class="button primary" id="submit_form" type="submit"
ng-click="submitted = true">Submit</button>
What is wrong here?