We Keep Coding

Use separate divs for each set of inputs and labels and place id in hidden input

I have been told i need to do as the title says and use separate divs for each set of inputs and labels and place ID in a hidden input. could any one give me advice on how to do this please as i am just learning at the moment, my code for my labels and inputs are below:::
```
<label for="editEmployeeFirstNameInput" class="form-label">First Name</label>
<input type="text" class="form-control" id="editEmployeeFirstNameInput" required>
<label for="editEmployeeLastNameInput" class="form-label">Last Name</label>
<input type="text" class="form-control" id="editEmployeeLastNameInput" required>
<label for="editEmployeePositionInput" class="form-label">Position</label>
<input type="text" class="form-control" id="editEmployeePositionInput">
<label for="editEmployeeEmailInput" class="form-label">Email</label>
<input type="email" class="form-control" id="editEmployeeEmailInput" required>
<label for="editEmployeeDepartmentSelect" class="form-label">Department</label>
<select id="editEmployeeDepartmentSelect" class="form-select" aria-label="Default select example">
```

<div>
<label for="editEmployeeFirstNameInput" class="form-label">First Name</label>
<input type="text" class="form-control" id="editEmployeeFirstNameInput" required>
</div>
<div>
<label for="editEmployeeLastNameInput" class="form-label">Last Name</label>
<input type="text" class="form-control" id="editEmployeeLastNameInput" required>
</div>
<div>
<label for="editEmployeePositionInput" class="form-label">Position</label>
<input type="text" class="form-control" id="editEmployeePositionInput">
</div>
<div>
<label for="editEmployeeEmailInput" class="form-label">Email</label>
<input type="email" class="form-control" id="editEmployeeEmailInput" required>
</div>
<div>
<label for="editEmployeeDepartmentSelect" class="form-label">Department</label>
<select id="editEmployeeDepartmentSelect" class="form-select" aria-label="Default select example">
</div>
<input type="hidden" id="id" name="id" />

Disable form submit button until all input/textarea fields are filled, without using for loop (no jQuery)

I have the following contact form:
<form id="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="surname">Surname</label>
<input id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input id="email" name="email" type="text">
<label for="subject">Object</label>
<input id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea id="text" name="text"></textarea>
<button type="submit" disabled>Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
In order to disable submit button until all input/textarea fields are filled, I'm using the following code:
post.oninput = function() {
var empty = false;
for (var i = 0; i < 5; i++) {
if (post[i].value.trim() === "") {
empty = true;
}
}
if (empty) {
post[5].disabled = true;
} else {
post[5].disabled = false;
}
};
It works perfectly.
post.oninput = function() {
var empty = false;
for (var i = 0; i < 5; i++) {
if (post[i].value.trim() === "") {
empty = true;
}
}
if (empty) {
post[5].disabled = true;
} else {
post[5].disabled = false;
}
};
<form id="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="surname">Surname</label>
<input id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input id="email" name="email" type="text">
<label for="subject">Object</label>
<input id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea id="text" name="text"></textarea>
<button type="submit" disabled>Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
But I would like to achieve the same result using methods such .filter, .find, .map or .some - if possible (the best one in terms of performance).
Would you give me some suggestions?

Use the :scope > [name] query string to select children of the form which are input-like, and if .some of them aren't filled, disable the button:
const post = document.querySelector('form');
post.oninput = function() {
post.querySelector('button').disabled = [...post.querySelectorAll(':scope > [name]')]
.some(input => !input.value.trim())
};
<form id="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="surname">Surname</label>
<input id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input id="email" name="email" type="text">
<label for="subject">Object</label>
<input id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea id="text" name="text"></textarea>
<button type="submit" disabled>Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
You could also use the required attribute, if it'll suit your needs, though the button won't appear disabled - rather, it'll redirect the user to the next required field:
<form id="post">
<label for="name">Name</label>
<input required id="name" name="name" type="text">
<label for="surname">Surname</label>
<input required id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input required id="email" name="email" type="text">
<label for="subject">Object</label>
<input required id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea required id="text" name="text"></textarea>
<button type="submit">Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>

How to get a list containing all input labels available in a form

I want a list containing all labels avaliable in a form, or just a way to loop through them all, and then check the text of one-by-one.
I tried first:
$('label').each(function() {
console.log(this); // this was to test :/
});
and later some variations:
$('input').labels().each(function() { ... });
$('label').siblings().each(function() { ... });
None worked on this form:
<form class="form-group">
<label for="id_name">Name:</label>
<input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">
<label for="id_cnpj">Cnpj:</label>
<input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">
<label for="id_cpf">Cpf:</label>
<input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">
<label for="id_rg">Rg:</label>
<input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">
<label for="id_federation_unity">Federation unity:</label>
<select name="federation_unity" class="form-control" required="" id="id_federation_unity">
and much more ....
</form>
references: .labels(), .siblings()
How could I do it?
EDIT
I commited a big noob fault here and I'm sorry.
I found out what was going wrong.
I should have put the entire code like this in first place:
<!doctype html>
<html>
<body>
<form class="form-group">
<label for="id_name">Name:</label>
<input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">
<label for="id_cnpj">Cnpj:</label>
<input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">
<label for="id_cpf">Cpf:</label>
<input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">
<label for="id_rg">Rg:</label>
<input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">
<label for="id_federation_unity">Federation unity:</label>
<select name="federation_unity" class="form-control" required="" id="id_federation_unity">
</form>
<script src="jquery-3.2.1.min.js" rel="javascript"></script>
<script type="javascript">
$('label').each(function() {
console.log(this);
});
</script>
</body>
</html>
THE PROBLEM
I changed <script type="javascript">jquery code here</script> by removing the type="javascript" attribute and it worked. I think the usage of type="javascript" is viable only when the <script>tag is defined inside <head> tag.
Another thing: I tested the version $('label').siblings().each(function() { ... }); and it worked as well.
I'm greatful for the time and effort you all had in helping me out with the first problem submitted.

Select the form-group class and label and iterate using each , .text() method will return the text content of the label. trim() to remove any white space
$(".form-group label").each(function(i, v) {
console.log($(v).text().trim())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-group">
<label for="id_name">Name:</label>
<input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">
<label for="id_cnpj">Cnpj:</label>
<input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">
<label for="id_cpf">Cpf:</label>
<input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">
<label for="id_rg">Rg:</label>
<input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">
<label for="id_federation_unity">Federation unity:</label>
<select name="federation_unity" class="form-control" required="" id="id_federation_unity"></select>
</form>

Maybe you were not able to do that because you had an unclosed select tag, as what I understood you want to iterate through all the labels in the form and want to access the siblings of the label too, i have added a code below see if that is what you wanted. I am printing the label text and the id of the next element to the label i.e input
$(document).ready(function() {
var labels = $("form label");
labels.each(function() {
console.log("Label Text " + $(this).text() + " ", "Next element id =" + $(this).next().attr('id'));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-group">
<label for="id_name">Name:</label>
<input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">
<label for="id_cnpj">Cnpj:</label>
<input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">
<label for="id_cpf">Cpf:</label>
<input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">
<label for="id_rg">Rg:</label>
<input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">
<label for="id_federation_unity">Federation unity:</label>
<select name="federation_unity" class="form-control" required="" id="id_federation_unity">
</select>
and much more ....
</form>

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

radio button change visible input fields

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>