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.

Disabling text boxes based on other radio box selection

I've two radio buttons, on active each radio buttton will span to two text boxes.
Now when I select first radio button, other radio buttion's two textboxes should be disabled and vice versa
can someone help me on this, I'm new to JS
Below is the HTML
<div class=radio_section>
<br></br>
<input type="radio" name="etime6.0" id="etime6.0-6.1" required>
<dev class="labelv">
<label for="etime6.0-dogs">ETIME source client 6.0 & 6.1 </label>
</dev>
<div class="reveal-if-active">
<label for="field1"><span class=text>Enter the Source DB Name<span class="required">*</span></span>
<input id="db" type="text" maxlength="8" pattern="(^((et.)|(Et.)|(ET.)).+)|(.{3}([eEtT]$))" title="Database Name starts with et (or) Ends with e or t minimum of 4 letters" class="input-field" name="database_name" value="" /></label>
<label for="field1"><span class=text>Enter Target Client name<span class="required">*</span></span>
<input id="client" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_name" value=""/></label>
</div>
</div>
<div class=radio_section>
<input type="radio" name="etime6.0" id="etime6.2">
<dev class="labelv">
<label for="etime6.0-cats">ETIME Source Client above 6.1</label>
</dev>
<div class="reveal-if-active">
<label for="which-cat"></label>
<label for="field1"><span class=text>Enter source client name<span class="required">*</span></span>
<input id="client1" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_name1" value=""/></label>
<label for="field1"><span class=text>Enter Target Client name<span class="required">*</span></span>
<input id="client" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_namei2" value=""/></label>
</div>
</div>
<dev class="submit">
<label><span> </span><input type="submit" value="Next" /><input type="reset" value="Reset"></label>

I would suggest to create a jsfiddle with your code and provide... This will help to quickly understand the problem and provide solution.

This would help you. I change some of your ID's
$('#rd1').click(function(){
$("#rd1").removeAttr('disabled');
$("#db").removeAttr('disabled');
$("#client").removeAttr('disabled');
$("#client1").attr('disabled',true);
$("#clientname").attr('disabled',true);
})
$('#rd2').click(function(){
$("#db").attr('disabled',true);
$("#client").attr('disabled',true);
$("#client1").removeAttr('disabled');
$("#clientname").removeAttr('disabled');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=radio_section>
<br></br>
<input type="radio" name="etime6.0" id="rd1" required>
<dev class="labelv">
<label for="etime6.0-dogs">ETIME source client 6.0 & 6.1 </label>
</dev>
<div class="reveal-if-active">
<label for="field1"><span class=text>Enter the Source DB Name<span class="required">*</span></span>
<input id="db" type="text" maxlength="8" pattern="(^((et.)|(Et.)|(ET.)).+)|(.{3}([eEtT]$))" title="Database Name starts with et (or) Ends with e or t minimum of 4 letters" class="input-field" name="database_name" value="" /></label>
<label for="field1"><span class=text>Enter Target Client name<span class="required">*</span></span>
<input id="client" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_name" value=""/></label>
</div>
</div>
<div class=radio_section>
<input type="radio" name="etime6.0" id="rd2">
<dev class="labelv">
<label for="etime6.0-cats">ETIME Source Client above 6.1</label>
</dev>
<div class="reveal-if-active">
<label for="which-cat"></label>
<label for="field1"><span class=text>Enter source client name<span class="required">*</span></span>
<input id="client1" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_name1" value=""/></label>
<label for="field1"><span class=text>Enter Target Client name<span class="required">*</span></span>
<input id="clientname" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_namei2" value=""/></label>
</div>
</div>
<dev class="submit">
<label><span> </span><input type="submit" value="Next" /><input type="reset" value="Reset"></label>

I think you can try this solution, this is not the optimal one, but it works.
//Getting all the radio elements
var radios = document.getElementsByName('etime6.0');
//Iterating though all the elements to add click event listner
for(var i = 0; i < radios.length; ++i){
radios[i].addEventListener('click',function(){
//Making all the input text not disabled for every time to refresh the state
var allInputFields = document.querySelectorAll('input[type="text"]');
[].forEach.call(allInputFields, function(input) {
input.disabled = false;
});
//Checking which radio is not checked
for(var i = 0; i<radios.length; i++){
if(!radios[i].checked){
//Getting all the input[type="text"] for unchecked radio button
var inputFields = radios[i].parentElement.querySelectorAll('input[type="text"]');
[].forEach.call(inputFields, function(input) {
input.disabled = true;
});
}
}
});
}
http://jsbin.com/jofupolaqa/1/edit?html,js,console,output

form validation cannot read property style of null

I have a form with validation but the date validation message is not showing and in the console it reads..property style of null and highlights this code "error_box.style.display = 'block';" within the context of this function.
function displayError(fieldname, message){
var input_field = document.querySelector('#'+fieldname);
var error_box = document.querySelector('#'+fieldname+'Message');
addClass(input_field, 'error');
removeClass(input_field, 'correct');
error_box.style.display = 'block';
}
I have the full code in a fiddle:
http://jsfiddle.net/tUa5e/
HTML
<form action="#">
<div class="formColumn1">
<label for="pickup"><span class="textStyle">Pick-up</span>
<input type="date" id="pickup"></label><br>
<label for="dropoff"><span class="textStyle">Drop-off</span>
<input type="date" id="dropoff"><br>
<span id="dropoff" class="message">That date is invalid</span></label>
<div id="pickuperror"></div>
</div>
<!--COLUMN ONE END -->
</div>
<!--COLUMN TWO -->
<div class="formColumn2">
<label for="name"><span class="textStyle">Full Name*</span>
<input type="text" id="name"><br>
<span id="nameMessage" class="message">You must have a valid name</span>
</label>
<label for="email"><span class="textStyle">Email*</span>
<input type="text" id="email"><br>
<span id="emailMessage" class="message">You must have a valid email</span>
</label>
<label for="phoneNumber"><span class="textStyle">Phone Number*</span>
<input type="text" id="phoneNumber"><br>
<span id="phoneNumberMessage" class="message">You must have a valid phone number</span>
</label>
<label for="postalAddress"><span class="textStyle">Postal Address</span>
<input type="text" id="postalAddress"><br>
</label>
<label for="city"><span class="textStyle">City</span>
<input type="text" id="city"><br>
</label>
<span class="textStyle">Addtional Information</span>
<textarea name="comment" form="usrform">Enter text here...</textarea>
<input type="submit" id="submit" value="Submit"/>
<!--COLUMN TWO END-->
</div>
</form>
<!--END OF FORM-->
</div>

Form field calculations

I have a working form but i need it to email a value which is text only (doesn't include the numerical value). If there's any easier way to do this please can you help.
Here's the js fiddle - http://jsfiddle.net/qeSZR/83/
Basically when you click on corporate it calculates the value and changes it to 3500 and when you click on private it changes it to 1800. The problem i have is that when you mail this, i have a field that says "client type" which includes "1800: Private" or "3500: Corporate" as its sent value. I don't want the numbers in it i'd rather just have the client type = private or corporate. Please help :) - thank you!
Here is the code:
HTML
<form action="mailer.php" data-validate="parsley" method="post">
<div class="driver-list">
<p>
<h2>Driver 1:</h2>
Name <span class="red">*</span> <input name="cf_driver1" data-required="true" type="text" class="form-text" />
Cellphone <span class="red">*</span> <input name="cf_cell1" data-required="true" type="text" class="form-text" />
Email <span class="red">*</span> <input name="cf_email1" data-required="true" data-type="email" type="text" class="form-text" /></p>
<h2>Driver 2:</h2>
Name <span class="red">*</span> <input name="cf_driver2" data-required="true" type="text" class="form-text" />
Cellphone <span class="red">*</span> <input name="cf_cell2" data-required="true" type="text" class="form-text" />
Email <span class="red">*</span> <input name="cf_email2" data-required="true" data-type="email" type="text" class="form-text" /></p>
<h2>Driver 3:</h2>
Name <span class="red">*</span> <input name="cf_driver3" data-required="true" type="text" class="form-text" />
Cellphone <span class="red">*</span> <input name="cf_cell3" data-required="true" type="text" class="form-text" />
Email <span class="red">*</span> <input name="cf_email3" data-required="true" data-type="email" type="text" class="form-text" /></p>
<h2>Driver 4:</h2>
Name <span class="red">*</span> <input name="cf_driver4" data-required="true" type="text" class="form-text" />
Cellphone <span class="red">*</span> <input name="cf_cell4" data-required="true" type="text" class="form-text" />
Email <span class="red">*</span> <input name="cf_email4" data-required="true" data-type="email" type="text" class="form-text" /></p>
</div>
<div class="vertical-space"></div><p><h2>Entry Type<span class="red">*</span></h2></p>
<select name="cf_client_type" id="cf_client_type" size="1" class="option2" >
<option value="1800: Private">Private</option>
<option value="3500: Corporate">Corporate</option>
</select>
<p>Corporate entries qualify for a tax donation certificate, please enquire via email.</p>
<!-- HIDDEN FIELD - HONEYPOT ANTI_SPAM -->
<input id="website" class="taken" name="cf_website" type="text" />
<!-- END -->
<!-- HIDDEN FIELD - CALCULATION -->
<input id="cf_calculate" class="taken" value="1" name="cf_blank" type="text" />
<!-- END -->
<div class="box-contact"><span class="result">Amount Due: R</span><input type="text" name="cf_amount" readonly="readonly" value="1800" id="result">
<input name="Submit" class="submit" value="Submit" type="submit" />
JAVASCRIPT
$(document).ready(function(){
$("select").change(function(){
var val1 = +parseInt($("#cf_client_type").val());
var val2 = +parseInt($("#cf_calculate").val());
$("#result").val(val1*val2);
});
});

Here is a fiddle
Set up your options with a data-value for your calculations and keep tha actual value for the text you want to pass along like so...
<option value="Private" data-value="1800">Private</option>
<option value="Corporate" data-value="3500">Corporate</option>
Then your script can be like this...
$(document).ready(function(){
$("select").change(function(){
var val1 = +parseInt($("#cf_client_type").find('option:selected').attr('data-value'));
var val2 = +parseInt($("#cf_calculate").val());
$("#result").val(val1*val2);
});
});

Replace the option value in your code to the following

Alert messages show my logic is correct but Google Chrome's html output viewer shows different

I am making a form for a website that allows a person to enter their information in input tags to register, so I need information (i.e. name, address, age). I also want a button, at the bottom of the screen, to be able to make an AJAX request to bring all the same input elements in again, so the user can register another person without going to another page.
I am doing this in one form, so I need each input to have an unique name, so that when I access the information on the server side I can get it.
So here is my code:
<div id="registrationfield">
<div class="registerfield">
<label>First Name:</label>
<input type="text" id="first" name="first0" />
</div>
<div class="registerfield">
<label>Last Name:</label>
<input type="text" id="last" name="last0" />
</div>
<div class="registerfield">
<label>Age:</label>
<input type="text" id="age" name="age0" />
</div>
<div class="registerfield">
<label>Gender</label>
<select name="gender0" >
<option></option>
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="registerfield">
<label>Email:</label>
<input type="text" id="emailregistration" name="email0" />
</div>
<div class="registerfield">
<label>Phone:</label>
<input type="text" id="phone" name="phone0" />
</div>
<div class="registerfield">
<label>Address:</label>
<input type="text" id="address" name="address0" />
</div>
<div class="registerfield">
<label>City:</label>
<input type="text" id="city" name="city0" />
</div>
<div class="registerfield">
<label>Zip Code:</label>
<input type="text" id="zip" name="zip0" />
</div>
<div class="registerfield">
<label>T-Shirt Size</label>
<select id="tshirt" name="tshirt0" >
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>XXL</option>
</select>
<button id="moreregistration">More</button>
</div>
</div>
</div>
And here is the HTML I am bringing in with the AJAX request:
<div class="registerfield">
<label>First Name:</label>
<input type="text" name="first" />
</div>
<div class="registerfield">
<label>Last Name:</label>
<input type="text" name="last" />
</div>
<div class="registerfield">
<label>Age:</label>
<input type="text" name="age"/>
</div>
<div class="registerfield">
<label>Gender</label>
<select name="gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="registerfield">
<label>Email:</label>
<input type="text" name="email" />
</div>
<div class="registerfield">
<label>Phone:</label>
<input type="text" name="phone" />
</div>
<div class="registerfield">
<label>Address:</label>
<input type="text" name="address" />
</div>
<div class="registerfield">
<label>City:</label>
<input type="text" name="city" />
</div>
<div class="registerfield">
<label>Zip Code:</label>
<input type="text" name="zip" />
</div>
<div class="registerfield">
<label>T-Shirt Size</label>
<select name="tshirt" >
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>XXL</option>
</select>
</div>
And what I do, once I load the HTML inside my main HTML document, is to change the name attribute of every input and select element to have an additional number on the end.
For example when the first AJAX request is made, it makes name="first" to name="first1", and for each time the request is made, that number increments by one.
Now in my JavaScript I made alerts to make sure that every element's attribute is being set like it should, and from the alerts I am getting it SEEMS correct.
However, I looked at the source code in Google Chrome and the name attributes are very incorrect. I have no idea what the issue could be. Here is my jQuery, any help would be greatly appreciated.
$(document).ready(function () {
//this is the variable that will be added on to the end of the form attribute
var counter = 1;
$('#moreregistration').click(function () {
$.get("registerform.html", function (data) {
$(data).appendTo('#registrationfield').hide().fadeIn();
}).complete(function () {
//this variable sets my index so I do not effect the input elements already in the html.
var formElementIndexToInsert = (counter * 10);
//loop through all elements for a single ajax request
for (var j = formElementIndexToInsert; j <= formElementIndexToInsert + 9; j++) {
alert(j);
if ((j % 10 == 3) || (j % 10 == 9)) {
var formName = $('.registerfield').eq(j).children('select').attr('name');
formName = (formName + counter);
alert(formName);
$('.registerfield').eq(j).children('select').attr('name', formName);
} else {
var formName = $('.registerfield').eq(j).children('input').attr('name');
formName = (formName + counter);
alert(formName);
$('.registerfield').eq(formElementIndexToInsert).children('input').attr('name', formName);
}
}
counter++;
});
});
});

I figured out my mistake. In my if-else statement the last line in the else the phrase 'formElementIndexToInsert' needs to be 'j'