While you've already accepted an answer, I'd like to offer a slightly different approach, with explanatory comments in the code:
// I've camelCased the form, so that it's easier to read
// the name and understand the intent of the function;
// this is entirely a personal preference though so feel
// absolutely free to rename it to your own conventions
// and preferences:
function setAddress() {
// here we use an Array-literal with the spread syntax
// to assign the results of document.querySelectorAll()
// to an Array, and for that Array to be assigned to the
// variable of 'name':
let name = [...document.querySelectorAll('.name')]
// here we take the Array of .name elements and use
// Array.prototype.map() to create a new Array based
// on the Array of .name elements:
.map(
// 'el' is a reference to the current .name element
// in the Array of elements, and we return the
// trimmed value of the Array, using String.prototype.trim()
// to remove leading/trailing white-space:
(el) => el.value.trim()
// here we filter the Array, with Array.prototype.filter():
).filter(
// 'val' is a reference to the current Array-element,
// which is the value of a .name element; if the
// assessment - val.trim().length - results in a truthy
// value (so the val after trimming has a length greater
// than 0) we retain the value, otherwise it's discarded:
(val) => val.trim().length
);
// here we find the element with the id of 'fullName', and we
// update its value property to be equal to the Array of values
// joined with a white-space character:
document.querySelector('#fullName').value = name.join(' ');
}
// here we retrieve all <input> elements with a class-name of
// of '.name' and iterate over that collection using
// NodeList.prototype.forEach():
document.querySelectorAll('input.name').forEach(
// using an Arrow function to bind the setAddress() function
// as the event-handler for the 'input' event (which handles
// paste, keyup, keydown; any event which takes place in the
// element that modifies the value):
(el) => el.addEventListener('input', setAddress)
);
:root {
--commonSpacing: 1em;
--flexBasis: 3;
}
form {
display: grid;
inline-size: clamp(20em, 60vw, 1000px);
margin-block: var(--commonSpacing);
margin-inline: auto;
}
form > div {
display: flex;
justify-content: space-between;
gap: var(--commonSpacing);
}
label {
text-align: end;
flex-basis: calc((100%/var(--flexBasis)) - 0.75em);
}
label::after {
content: ':';
}
input {
flex-basis: calc(2*(100%/var(--flexBasis)) - 0.75em);
}
div + label {
text-align: start;
}
textarea {
height: 5em;
resize: block;
}
<!-- I've chosen to wrap the various elements in a <form> in order
that the various <input> elements and the <textarea> are
semantically grouped: -->
<form action="#">
<div class="col-md-4">
<!-- I've added a 'for' attribute which has an attribute-value
equal to the 'id' of the related <input>, which allows a
user to click on the <label> and focus the <input>; this
is also useful for users with disabilities relying on the
use of accessibility features to browse, navigate and use
the internet:-->
<label for="firstName">First Name</label>
<!-- I've used meaningful, non-numeric id attributes in order
for you to easily access the <input> elements via JavaScript: -->
<input class="form-control name" name="firstName" id="firstName" type="text">
</div>
<div class="col-md-4">
<label for="middleName">Middle Name</label>
<input class="form-control name" name="middleName" id="middleName" type="text">
</div>
<div class="col-md-4">
<label for="fullName">Last Name</label>
<input class="form-control name" name="familyName" id="familyName" type="text">
</div>
<label for="fullName">Complete Name</label>
<textarea class="form-control" id="fullName" name="fullName" type="text" readonly></textarea>
</form>
JS Fiddle demo.
It's important to remember that, as Mozilla notes in their reference documentation:
Note: Technically, the value for an id attribute may contain any character, except whitespace characters. However, to avoid inadvertent errors, only ASCII letters, digits, '_', and '-' should be used and the value for an id attribute should start with a letter. For example, . has a special meaning in CSS (it acts as a class selector). Unless you are careful to escape it in the CSS, it won't be recognized as part of the value of an id attribute. It is easy to forget to do this, resulting in bugs in your code that could be hard to detect. Citation: see reference for "id attribute", below.)
References:
