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.

How is a mathematical operation performed in PHP?

How is a mathematical operation performed in PHP with values received from "number1" and "number2" The result is shown in "result" ?
<div class="row">
<form class="form " action="" method="post" enctype="multipart/form-data">
<form class="form1">
<div class="form-group text-right font-12">
<label for="number">number 1</label>
<input type="number" name="number1" value="" class="form-control" placeholder="number1">
</div>
</form>
<form class="form1">
<div class="form-group text-right font-12">
<label for="number">number 2</label>
<input type="number" name="number2" value="" class="form-control" placeholder="number2">
</div>
</form>
<form class="form1">
<div class="form-group text-right font-12">
<label for="number">The result here</label>
<input type="number" value="" class="form-control" disabled="disabled">
</div>
</form>
<button class="btn btn-info font-12 " type="submit" name="save" value="Show Result">save</button>
</form>
</div>

First of all you don't need nested forms to make the UI.
I will write a simple example that you can change to match your UI needs.
<?php
$a = $_GET['number1'];
$b = $_GET['number2'];
$result = NULL;
if (isset($a) && isset($b)) {
$result = $a + $b;
}
?>
<form action="?" method="GET">
<input name="number1" value="" />
<input name="number2" value="" />
<input value="<?= $result ?>" disabled />
<button type="submit">Show Result</button>
</form>

Can you be more specific next time? I think your question is about how to handle such a form in PHP. Just first read some tutorials about it. A great website is w3schools.com. Here is one about form handling: https://www.w3schools.com/php/php_forms.asp

Multiple JS with submit button

I have created a form that is submitting the form in its entirety and preventing the page from reloading locally.
As soon as it is posted to the website and we try and plug in the handler (SalesForce). The form still submits but the page reloads and we cant have that. As there is data that reveals once the "submit" button is clicked. The button is controlling multiple JS and functions.
Can anyone look at the code and see where the problem lies?
<div>
<div class="columns medium-6">
<script type="text/javascript">
function randomnumber() {
document.forms[0].Code.value=(Math.round(Math.random()*999999+1)); }
onload=randomnumber
</script>
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" class="form-control" name="first_name" id="firstname" aria-describedby="firstname" placeholder="First Name">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" name="last_name" id="lastname" aria-describedby="lastname" placeholder="Last Name">
<label for="email">Email address</label>
<input type="text" class="form-control" name="email" id="email" aria-describedby="email" placeholder="Email">
<label for="phone">Phone</label>
<input type="text" class="form-control" name="phone" id="phone" aria-describedby="phone" placeholder="Phone">
<!--<input type="hidden" name="Owner" value="00G1a000001I7EA"> -->
<input type="hidden" name="form_type" value="CSF">
<input type="hidden" name="visitor_type" value="NEW-CUST">
<input type="hidden" name="party_size" value="1">
<input type="hidden" name="source" value="Love Happens Here">
<input type="hidden" name="webtoleadstoreid" value="a0C1a00000BJhea">
<input type="hidden" name="company" value="New Guest">
<input type="hidden" name="reason_visit" value="other">
<button type="submit" id="randomNumber" onclick="javascript:toggle(); return false;" class="btn btn-primary" value="Generate Code">Submit</button>
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("randomNumber");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "Submit";
}
}
function showdiv() {
var error = false;
//validate your form.
if(error == true){ return true;}
else
{
//show div
return false;
}
}
</script>
<div id="toggleText" style="display: none">
<label for="code">Code</label>
<input type="text" name="Code" readonly id="Code" aria-describedby="code" placeholder="code">
<p> Check your email for the coupon code and details. Thanks again for your participation in our Share & Win contest, winners will be announced on <strong>February 14th.</strong></p>
</div>
</div>
</form>
</div>
</div>

Like I said, you can use Ajax to achieve what you want.
Here are a few links that will help you in that direction
Ajax
Ajax
If they don't really help you, try googling Ajax, you will definitely find a site that will explain everything to you.

Get input value using JavaScript

i need to get my input value using JavaScript but i get undefined only. Here is my code:
document.forms[0].elements[0] or
document.forms['form_id']['fieldname']
Where is my mistake?
Here is my form:
<form action="registrationHandler.php" onsubmit="return validateRegistrationForm()" method="post" name="reg_form" enctype="multipart/form-data" id="reg-form">
<div>
<label for="username">Username</label>
<input type="text" name="username" required="">
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" required="">
</div>
<div>
<label for="email">E-mail</label>
<input type="text" name="email">
</div>
<div>
<label for="telephone">Telephone</label>
<input type="text" name="telephone">
</div>
<div>
<label for="sex">Sex</label>
<input type="radio" value="male" name="sex">Male
<input type="radio" value="female" name="sex">Female
</div>
<div>
<label for="user_photo">User photo</label>
<input type="file" name="user_photo">
</div>
<div>
<label for="birthDate">Birth Date</label>
<input type="date" name="birthDate">
</div>
<div>
<label for="country">Country</label>
<input type="text" name="country">
</div>
<div>
<label for="info">Info about user</label>
<textarea name="info"></textarea>
</div>
<div>
<input type="hidden" name="PHPSESSID" value="<?php echo session_id(); ?>">
</div>
<div><input type="submit" value="Register"></div>
</form>
Form lies in php file, maybe problem in that? Because when i console log forms.length i get zero...

You need to put these DOM object accessing codes into the window.onload event handler,because it need to wait the document loaded before accessing the DOM objects.

Can you try for example:
document.forms['reg-form']['email'].value
I think you might not are not targeting the right Dom-element with
document.forms['form_id']['fieldname']
Please look at this jsfiddle-Sample:
http://jsfiddle.net/3gevoyn5/8/
I have two input fields and get the Values with this code, which is then output again:
function getValues(){
var test = document.forms['myform']['firstname'].value + " " + document.forms['myform']['lastname'].value;
document.getElementById("demo").innerHTML = test;
}

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