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.
Related
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
I am trying to make sure my inputs aren't empty on my form. I am using jQuery to check the inputs, but it isn't checking the inputs. The submit button allows it to go through:
<form id="preenrollment-airlines" name="preenrollment-airlines" class="tn-form-conversion" method="post" action="#" onSubmit="return(validate());">
<div class="form-col">
<input id="firstName" name="firstName" onFocus="if (this.value=='firstName') this.value = ''" type="text" placeholder="First name*">
</div>
<div class="form-col">
<input id="lastName" type="text" name="lastName" onfocus="if (this.value=='lastName') this.value = ''" type="text" placeholder="Last name*" />
</div>
<div class="form-col">
<input id="addr" type="text" name="address" onfocus="if (this.value=='address') this.value = ''" type="text" placeholder="Address*" />
</div>
<div class="form-col">
<input id="city" type="text" name="city" onfocus="if (this.value=='city') this.value = ''" type="text" placeholder="City*" />
</div>
<div class="form-col">
<input id="zip" type="text" name="postalCode" onfocus="if (this.value=='postalCode') this.value = ''" type="text" placeholder="Postal Code*" />
</div>
<div class="form-col">
<input id="dm" type="text" name="dm" onfocus="if (this.value=='dm') this.value = ''" type="text" placeholder="DM # * (Bottom left corner of your letter)" id="dm" />
</div>
<div class="form-col">
<input id="email" type="text" name="email" onfocus="if (this.value=='email') this.value = ''" type="text" placeholder="Email*" />
</div>
<div class="form-col">
<input type="text" name="digits" onfocus="if (this.value=='digits') this.value = ''" type="text" placeholder="Last 4 digits of current BMO AIR MILES World credit card*" id="digits" />
</div>
</div>
<div class="clear"></div>
<input type="hidden" name="formName" id="formName_id" value="preenrollment-airlines" />
<div style="clear: both;">
<br />
<div style="text-align: center;">
<input id="submit" style="margin-top: 25px;" class="primary button" type="submit" value="Submit" />
</div>
</div>
Here is the javascript I have so far:
$(document).ready(function () {
$('#preenrollment-airlines input').blur(function () {
if ($(this).val().length === 0) {
$(this).parents('input').addClass('warning');
}
});
});
I'm not sure where to go from here. I can't use any plugins to do the validation, so I need to check if the inputs are blank and then I can add a class to it.
You want to capture the Submit event in order to prevent the form from sending. In this function you can check to ensure the inputs are all valid.
For more on the submit event and how to capture it using jQuery,
view the docs here
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
I have a problem with a regular expression. console.log shows me the login regular expression isn't respected, but my span doesn't show, my email span works.
I think it's a basic JS/jQuery problem, but I couldn't find the solution.
HTML:
<form name="formSignup">
<fieldset>
<label for="nom">Nom :</label>
<input type="text" name="nom" id="nom" class="required" />
<label for="prenom">Prenom :</label>
<input type="text" name="prenom" id="prenom" class="required" />
<label for="email">Votre Email:</label>
<input type="email" name="email" id="email" class="required" onclick="spanHide()" />
<label for="username">Login:</label>
<input type="text" name="username" id="username" class="required" />
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="required" />
<input id="Submit1" type="button" value="Login" data-role="button" data-inline="true" data-theme="b" onclick='createuser()' />
</fieldset>
</form>
JS:
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
var loginReg= /^[a-zA-Z0-9]+$/;
if (email == '') {
$("#email").after('<span id="errormail" class="error">Please enter your email address.</span>');
}
if (!loginReg.test(myLogin)) {
console.log("error");
$("#username").after('<span id="errorlogin" class="error">only letter + digits plz</span>');
}
if (!emailReg.test(email)) {
$("#email").after('<span id="errormail" class="error">Enter a valid email address.</span>');
}
I'm trying to do a separate formulary for individuals and corporations
If the visitor check the "Individual" radio button, it would display a form
If the visitor check the "Corporation" radio button, it would display a different form
<fieldset>
<input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important">
<strong>Individual Form</strong><br/>
<input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important">
<strong>Corporation Form</strong>
<!-- If Individual Form is checked -->
<legend>Personal Data</legend>
<label for="Name">Full Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
<!-- If Corporation Form is checked -->
<legend>Corporation Data</legend>
<label for="Name">Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</fieldset>
Ps: Because of my other javascript, I can't use other <fieldset> than the existing one
You'd need to wrap something around the fields to show/hide, even just a <div> tag with an ID.
Then for your radio buttons, you'd want to add onchange & onmouseup event handlers (to account for people either clicking to change the value, or using their keyboard).
eg.
<script type="text/javascript">
function onchange_handler(obj, id) {
var other_id = (id == 'personal')? 'corporate' : 'personal';
if(obj.checked) {
document.getElementById(id + '_form_fields').style.display = 'block';
document.getElementById(other_id + '_form_fields').style.display = 'none';
} else {
document.getElementById(id + '_form_fields').style.display = 'none';
document.getElementById(other_id + '_form_fields').style.display = 'block';
}
}
</script>
<fieldset>
<input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important" onchange="onchange_handler(this, 'personal');" onmouseup="onchange_handler(this, 'personal');">
<strong>Individual Form</strong><br/>
<input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important" onchange="onchange_handler(this, 'corporate');" onmouseup="onchange_handler(this, 'corporate');">
<strong>Corporation Form</strong>
<!-- If Individual Form is checked -->
<div id="personal_form_fields">
<legend>Personal Data</legend>
<label for="Name">Full Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</div>
<!-- If Corporation Form is checked -->
<div id="corporate_form_fields" style="display: none;">
<legend>Corporation Data</legend>
<label for="Name">Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</div>
</fieldset>