We Keep Coding

how can i make the input text display in the textfield?

I want this input project name and address displayed in the text area.
currently, the input project name and checkbox text can be displayed in the textbox.
ps: I forgot to add checkbox HTML codes in the previous question.
I would appreciate your help.
here is my code:
let existValue = "";
$('input:checkbox').click(function(){
var tb = "#"+$(this).attr('rel');
let text_to_add = this.name + "\n";
let inputVal = $('#pname').val()
//when click a checkbox and show checked items in the text area
if($(this).is(":checked")){
$(tb).val($(tb).val() + text_to_add);
}else{
let remove = this.name +"\n";
//when a box is unchecked it clears the previously populated text from checkbox
$(tb).val($(tb).val().replace(remove,""));
}
//storing the value to existValue
existValue = $(tb).val().replace(`${inputVal}\n`, "");
});
$('#pname').on('input',(e)=>{
//here to adding the input value to the existValue
$('#textbox1').val(`${e.target.value}\n${existValue}`)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">
<form>
<label for="projectname">Project name:</label>
<input type="text" id="pname" name="pname">
<br>
<div class="form-group">
<label>Project Address:</label>
<input type="text" class="form-control" id="search_input" placeholder="Type address..." />
<input type="hidden" id="loc_lat" />
<input type="hidden" id="loc_long" />
</div>
<div class="latlong-view">
<p><b>Latitude:</b> <span id="latitude_view"></span></p>
<p><b>Longitude:</b> <span id="longitude_view"></span></p>
</div>
</div>
<div class="series1">
<tr><input type="checkbox" rel="textbox1" name="Cabinets" class=test/>
Cabinets
</tr>
<input type="checkbox" rel="textbox1" name="Doors"/>
Doors
<input type="checkbox" rel="textbox1" name="Drawers">
Drawers
<input type="checkbox" rel="textbox1" name="Drawer Fronts">
Drawer Fronts
<input type="checkbox" rel="textbox1" name="Handles">
Handles
</div>
<br>
<textarea id="textbox1" ></textarea>

This should do it:
const inps=$('input[type=text]').on('input',()=>
$('#textbox1').val(inps.get().map(i=>i.value).join("\n"))
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">
<form>
<label for="projectname">Project name:</label>
<input type="text" id="pname" name="pname">
<br>
<div class="form-group">
<label>Project Address:</label>
<input type="text" class="form-control" id="search_input" placeholder="Type address..." />
<input type="hidden" id="loc_lat" />
<input type="hidden" id="loc_long" />
</div>
<div class="latlong-view">
<p><b>Latitude:</b> <span id="latitude_view"></span></p>
<p><b>Longitude:</b> <span id="longitude_view"></span></p>
</div>
</div>
<textarea id="textbox1"></textarea>
As there are no checkboxes in your current HTML I removed the event handling for these elements and concentrated on the text-inputs. In my snippet I selected the input fields by their type (=text). In a real example you should apply a common class to them and select them through that.

JQuery - Get values from html array inputs

A user has the capacity to add as many items as possible through html inputs. The inputs look like;
<input class="form-control" name="part_number[]" number" type="text">
<input class="form-control" name="part_number[]" number" type="text">
<input class="form-control" name="part_number[]" number" type="text">
<input class="form-control item" name="description[]" type="text">
<input class="form-control item" name="description[]" type="text">
<input class="form-control item" name="description[]" type="text">
I would like to add the items to my database for storage.. How do i iternate through each input? part number and description belong to a single row.

function getdata() {
var partNumbers = [];
var descriptions = [];
$('[name="part_number[]"]').each(function() {
partNumbers.push(this.value);
})
$('[name="description[]"]').each(function() {
descriptions.push(this.value);
})
var data = {
partNumbers: partNumbers,
descriptions: descriptions
}
$('#output').val(JSON.stringify(data))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="part_number[]" type="text" value="part number 1">
<input class="form-control" name="part_number[]" type="text" value="part number 2">
<input class="form-control" name="part_number[]" type="text" value="part number 3">
<br>
<input class="form-control item" name="description[]" type="text" value="description 1">
<input class="form-control item" name="description[]" type="text" value="description 2">
<input class="form-control item" name="description[]" type="text" value="description 3">
<hr>
<button type="button" onclick="getdata()">get data</button>
<textarea id="output" rows="10" cols="100" placeholder="output"></textarea>

If your inputs are within a form, you can use .serializeArray() and then .reduce() it to create an object which stores keys and array values for multiple input types like below. You can then submit this data to your server to then store in your database:
const data = $("#myform").serializeArray().reduce((acc, o) => {
if (o.name.slice(-2) === "[]") {
acc[o.name] = acc[o.name] || [];
acc[o.name].push(o.value);
} else {
acc[o.name] = o.value;
}
return acc;
}, {});
console.log(data); // data to POST
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<input class="form-control" name="part_number[]" value="pn1" type="text">
<input class="form-control" name="part_number[]" value="pn2" type="text">
<input class="form-control" name="part_number[]" value="pn3" type="text">
<input class="form-control item" name="description[]" value="desc1" type="text">
<input class="form-control item" name="description[]" value="desc2" type="text">
<input class="form-control item" name="description[]" value="desc3" type="text">
<input class="form-control item" name="single_data" value="non-array data" type="text">
</form>

From your question, I understand that you want the description and part number in a row.
Please find my answer using .each function of jQuery.
The .each() function iterates through all the specified elements and it returns the index position of each element. Here I'm iterating through the part number, so I want to take the corresponding description, that is the description at the index position of part_number. To achieve this am using another jQuery selector :eq(). It will select the element at index n within the matched set.
$(".submit").on("click", function(){
let user_input = [];
$("input[name='part_number[]']").each(function(index){
user_input.push({
part_number: $(this).val(),
description: $(`.item:eq(${index})`).val()
});
});
console.log("final result = ", user_input);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="part_number[]" placeholder="number" type="text">
<input class="form-control" name="part_number[]" placeholder="number" type="text">
<input class="form-control" name="part_number[]" placeholder="number" type="text">
<input class="form-control item" name="description[]" placeholder="description" type="text">
<input class="form-control item" name="description[]" placeholder="description" type="text">
<input class="form-control item" name="description[]" placeholder="description" type="text">
<button type="submit" class="submit"> Save</button>

I would rather fix the HTML than trying to fix the data afterwards.
You have items with the values descriptionand part_number, in order to group the data i would firstly group them visually in your HTML by adding a wrapper around each part_number + description pair:
<div class="item">
<input type="text" name="part_number[]" />
<input type="text" name="decription[]" />
</div>
After that we fix the input names' and add them to a group item:
<div class="item">
<input type="text" name="item[part_number]" />
<input type="text" name="item[decription]" />
</div>
To add multiple item elements in your form you need to add an ID to each item when adding it to your form:
<div class="item">
<input type="text" name="item[0][part_number]" />
<input type="text" name="item[0][decription]" />
</div>
<div class="item">
<input type="text" name="item[1][part_number]" />
<input type="text" name="item[1][decription]" />
</div>
When adding these values to your database you can then iterate over them like so: ( I'm just guessing you will use PHP)
foreach( $_POST['item'] as $item) {
$item['part_number'];
$item['description];
}

Why is the childNodes giving me text before input element when I console.log the parent?

Why when I console.log the parent's childNodes it gives me this 'text' as one of their childNode?
How can I overcome it?
<div id="inputDiv">
<input type="text" id="name" placeholder="Enter the name">
<input type="text" id="age" placeholder="Enter the age" >
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female">Female
<input type="text" id="language" placeholder="Enter the language" >
<input type="text" id="empid" placeholder="Enter a employeeId" disabled>
<input type="text" id="salary" placeholder="Enter the salary" >
<input type="text" id="experience" placeholder="Enter experience" >
<select id="employeesType" onchange="ChangeEmployeeType()">
<option value="manager">Manager</option>
<option value="staff">Staff</option>
</select>
<input type="text" id="managerName" placeholder="Enter the manager name">
<button id="addPerson" onclick="addPerson()">Person</button>
</div>
When I console.log(getElementById("inputDiv").childNodes); it produces:
Actual Result :
NodeList(23) [text, input#name, text, input#age, text, input, text, input, text, input#language, text, input#empid, text, input#salary, text, input#experience, text, select#employeesType, text, input#managerName, text, button#addPerson, text]
0:text
1:input#name
2:text
3:input#age
4:text
5:input
6:text
7:input
8:text
9:input#language
10:text
11:input#empid
12:text
13:input#salary
14:text
15:input#experience
16:text
17:select#employeesType
18:text
19:input#managerName
20:text
21:button#addPerson
22:text
length:23
proto
: NodeList
Expected Result :
NodeList(23) [text, input#name, text, input#age, text, input, text, input, text, input#language, text, input#empid, text, input#salary, text, input#experience, text, select#employeesType, text, input#managerName, text, button#addPerson, text]
0:input#name
1:input#age
2:input
3:text
4:input
5:text
6:input#language
7:input#empid
8:input#salary
9:input#experience
10:select#employeesType
11:input#managerName
12:button#addPerson
length:13
proto
: NodeList

In HTML text elements are actually node elements.
Use children if you want only the "real elements" and create an array from them if you need an array of these elements:
console.log(Array.from(document.getElementById("inputDiv").children));
<div id="inputDiv">
<input type="text" id="name" placeholder="Enter the name">
<input type="text" id="age" placeholder="Enter the age">
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female">Female
<input type="text" id="language" placeholder="Enter the language">
<input type="text" id="empid" placeholder="Enter a employeeId" disabled>
<input type="text" id="salary" placeholder="Enter the salary">
<input type="text" id="experience" placeholder="Enter experience">
<select id="employeesType" onchange="ChangeEmployeeType()">
<option value="manager">Manager</option>
<option value="staff">Staff</option>
</select>
<input type="text" id="managerName" placeholder="Enter the manager name">
<button id="addPerson" onclick="addPerson()">Person</button>
</div>

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>

Get value from radio button AND copy value using JQuery

I've looked all over, and can see many ways to get the value of a radio button, but not take it the next step and set the same value to a similar set of radio buttons. Copying text values works fine, just can't get the radio buttons to copy also.
EDIT:
I added the entire relevant html:
<div class="form-container">
<div class="form-titles">
<h4>Customer <span>Shipping</span> Information</h4>
</div>
<div id="fillout-form">
<label for="name"><span>*</span>Contact Name:</label>
<input type="text" id="name" name="name" maxlength="50" class="required" />
<label for="company"><span>*</span>Company Name:</label>
<input type="text" id="company" name="company" maxlength="50" class="required" />
<label for="land-line"><span>*</span>Primary Phone:</label>
<input type="text" id="land-line" name="land-line" maxlength="50" class="required" />
<label for="cell">Cell Phone:</label>
<input type="text" id="cell" name="cell" maxlength="50" />
<label for="email"><span>*</span>Email:</label>
<input type="email" id="email" name="email" maxlength="50" class="required" />
<label for="fax">Fax:</label>
<input type="text" id="fax" name="fax" maxlength="50" />
<label for="address"><span>*</span>Street Address:</label>
<input type="text" id="address" name="address" maxlength="50" class="required" />
<label for="address-2">Street Address 2:</label>
<input type="text" id="address-2" name="address-2" maxlength="50" />
<label for="city"><span>*</span>City:</label>
<input type="text" id="city" name="city" maxlength="50" class="required" />
<label for="state"><span>*</span>State or Province:</label>
<input type="text" id="state" name="state" maxlength="50" class="required" />
<label for="zip"><span>*</span>Zip / Postal Code:</label>
<input type="text" id="zip" name="zip" maxlength="50" class="required" />
</div>
<div id="vertical-radio">
<div id="radio-buttons">
<label for="country"><span>*</span>Country:</label>
<div id="multi-line-radio"><input type="radio" name="country" id="country" value="USA" class="required" checked >United States</div>
<div id="multi-line-radio"><input type="radio" name="country" id="country" value="Canada" >Canada</div>
</div>
</div>
<div class="form-container">
<div class="form-titles">
<h4>Customer <span>Billing</span> Information</h4>
<div class="same-address">
<input type="checkbox" name="same-address" value="same-address" id="copyCheck"><p>Same as Shipping Address?</p>
</div>
</div>
<div id="fillout-form">
<label for="name_2"><span>*</span>Contact Name:</label>
<input type="text" id="name_2" name="name_2" maxlength="50" class="required" />
<label for="company_2"><span>*</span>Company Name:</label>
<input type="text" id="company_2" name="company_2" maxlength="50" class="required" />
<label for="land-line_2"><span>*</span>Primary Phone:</label>
<input type="text" id="land-line_2" name="land-line_2" maxlength="50" class="required" />
<label for="cell_2">Cell Phone:</label>
<input type="text" id="cell_2" name="cell_2" maxlength="50" />
<label for="email_2"><span>*</span>Email:</label>
<input type="email" id="email_2" name="email_2" maxlength="50" class="required" />
<label for="fax_2">Fax:</label>
<input type="text" id="fax_2" name="fax_2" maxlength="50" />
<label for="PO-Box_2">PO-Box:</label>
<input type="text" id="PO-Box_2" name="PO-Box_2" maxlength="50" />
<label for="address_2">Street Address:</label>
<input type="text" id="address_2" name="address_2" maxlength="50" />
<label for="address-2_2">Street Address 2:</label>
<input type="text" id="address-2_2" name="address-2_2" maxlength="50" />
<label for="city_2"><span>*</span>City:</label>
<input type="text" id="city_2" name="city_2" maxlength="50" class="required" />
<label for="state_2"><span>*</span>State or Province:</label>
<input type="text" id="state_2" name="state_2" maxlength="50" class="required" />
<label for="zip_2"><span>*</span>Zip / Postal Code:</label>
<input type="text" id="zip_2" name="zip_2" maxlength="50" class="required" />
</div>
<div id="vertical-radio">
<div id="radio-buttons">
<div id="country_option_2">
<label for="country_2"><span>*</span>Country:</label>
<div id="multi-line-radio"><input type="radio" name="country_2" id="country_2" value="USA" class="required" checked >United States</div>
<div id="multi-line-radio"><input type="radio" name="country_2" id="country_2" value="Canada" >Canada</div>
</div>
</div>
</div>
And jQuery:
$(document).ready(function(){
$(function(){
$("#copyCheck").change(function() {
if ($("#copyCheck:checked").length > 0) {
bindGroups();
} else {
unbindGroups();
}
});
});
var bindGroups = function() {
$("input[id='name_2']").val($("input[id='name']").val());
$("input[id='company_2']").val($("input[id='company']").val());
$("input[id='land-line_2']").val($("input[id='land-line']").val());
$("input[id='cell_2']").val($("input[id='cell']").val());
$("input[id='email_2']").val($("input[id='email']").val());
$("input[id='fax_2']").val($("input[id='fax']").val());
$("input[id='address_2']").val($("input[id='address']").val());
$("input[id='address-2_2']").val($("input[id='address-2']").val());
$("input[id='city_2']").val($("input[id='city']").val());
$("input[id='state_2']").val($("input[id='state']").val());
$("input[id='zip_2']").val($("input[id='zip']").val());
$("input:radio[name=country_2]:checked").val($("input:radio[name=country]:checked").val());
$("input[id='name']").keyup(function() {
$("input[id='name_2']").val($(this).val());
});
$("input[id='company']").keyup(function() {
$("input[id='company_2']").val($(this).val());
});
$("input[id='land-line']").keyup(function() {
$("input[id='land-line_2']").val($(this).val());
});
$("input[id='cell']").keyup(function() {
$("input[id='cell_2']").val($(this).val());
});
$("input[id='email']").keyup(function() {
$("input[id='email_2']").val($(this).val());
});
$("input[id='fax']").keyup(function() {
$("input[id='fax_2']").val($(this).val());
});
$("input[id='address']").keyup(function() {
$("input[id='address_2']").val($(this).val());
});
$("input[id='address-2']").keyup(function() {
$("input[id='address-2_2']").val($(this).val());
});
$("input[id='city']").keyup(function() {
$("input[id='city_2']").val($(this).val());
});
$("input[id='state']").keyup(function() {
$("input[id='state_2']").val($(this).val());
});
$("input[id='zip']").keyup(function() {
$("input[id='zip_2']").val($(this).val());
});
};
var unbindGroups = function() {
$("input[id='name']").unbind("keyup");
$("input[id='company']").unbind("keyup");
$("input[id='land-line']").unbind("keyup");
$("input[id='cell']").unbind("keyup");
$("input[id='email']").unbind("keyup");
$("input[id='fax']").unbind("keyup");
$("input[id='address']").unbind("keyup");
$("input[id='address-2']").unbind("keyup");
$("input[id='city']").unbind("keyup");
$("input[id='state']").unbind("keyup");
$("input[id='zip']").unbind("keyup");
};
});

Close your input tags
for example
<input type="radio" name="country" value="Canada">
should be
<input type="radio" name="country" value="Canada"/>
IDs are unique
and exist once, and only once, in a particular document.
for example
<div id="radio-buttons">...</div><div id="radio-buttons">...</div>
should be something like
<div id="radio-buttons-1">...</div><div id="radio-buttons-2">...</div>
or
<div class="radio-buttons">...</div><div class="radio-buttons">...</div>
open your mind
There doesn't seem to be a need to handle each of these on an individual basis, you should think "how can i get those to copy here" not "lets copy this one and this one and this one..."
which would give you jquery that looks more like this:
var ship = $('.form-container').eq(0).find('input'),//first fields
bill = $('.form-container').eq(1).find('input').not('#copyCheck,#PO-Box_2');//second fields
$('#copyCheck').on('change', function () {
if ($(this).prop('checked')) { bindGroups(); }//checked:bind answers
else { unbindGroups(); }//!checked:remove answers
});
function brains(e,i) {//runs on bindgroups and on irt
var tc;
if (e.is('[type=radio]')) {//if radio
tc = e.prop('checked');//get checked
bill.eq(i).prop('checked',tc);//add checked to corresponding element
} else if(e.is('[type=text],[type=email]')) {//if text or email
tc = e.val();//get value
bill.eq(i).val(tc);//add value to corresponding element
}
}
function bindGroups() {//copy
ship.each(function(i){//for each input
brains($(this),i);//run brains
$(this).on('keyup change', function() {//on keyup or change
brains($(this),i);//run brains
});
});
}
function unbindGroups() {//clear the deck
ship.each(function(i){//for each input
if ($(this).is('[type=radio]')) {//if radio
bill.eq(i).prop('checked',false);//reset radio optional
} else if($(this).is('[type=text],[type=email]')) {//if text or email
bill.eq(i).val('');//empty text optional
}
}).unbind();//unbind actions
}
That way your not writing jquery for every element individually.
made a fiddle: http://jsfiddle.net/filever10/bC3mQ/