How can I post innerHTML to my email using a PHP form?

Question

I am using a Registration form that includes First Name, Last Name, Email Address, Phone, and Password. The registration form on Submit posts data to myemail@domain.com.

Recently I created a function using Javascript to allow users to Generate a password rather than entering it as an input field in the form of text. Previously the password entered by the user was an input field. The password was sent just how First Name, Last Name, Email Address, and Phone were sent. I was using a PHP function to POST the password entered by the user in an input field.

However after creating a password generator script, that generates user passwords using function createPassword, the password is created in a Div with an ID "passwordBox". The passwordBox.innerHTML = password.

I am unable to POST the password to myemail@domain.com now. Of course, I am doing something which is wrong.

I am looking for some help to post the output of passwordBox.innerHTML to my email using the PHP function.

I have given the complete code below for the form, and the javascript.

Help from advanced developers will help me solve this critical solution for mankind.

Thank you.

1. FORM

<form action="index.php" id="contact-form" method="POST">
         
<input type="text" name="firstname" id="firstname" placeholder="First Name" class="form-control-2" autocomplete="off" required>
    
<input type="text" name="lastname" id="lastname" placeholder="Last Name" class="form-control-2" autocomplete="off" required>
    
<input type="text" name="email" placeholder="Enter Email Address" class="form-control-2" autocomplete="off" required>
    
<input type="tel" name="tel" id="phone" placeholder="Enter Phone Number" class="form-control-2" required>
    
<div id ="passwordBox"> THIS IS WHERE THE SCRIPT CREATES A RANDOM PASSWORD USING JAVASCRIPT. 
</div>

<button type="button" onclick="createPassword()">Generate Password</button>
         
<button id="contact-submit" type="submit" name="submit" id="submit"  data-loading-text="Sending..." class="btn form-cta">Submit</button>

</form>

2. PHP SCRIPT FOR POSTING FORM DATA TO MY EMAIL

    <?php
    $firstname = $_POST['firstname'];
    $lastname = $_POST['lastname'];
    $mailFrom = $_POST['email'];
    $phone = $_POST['tel'];
    $password = $_POST['password'];
    $mailTo = "myemail@domain.com";
    $headers = "From: ".$mailFrom;
    
    $subject ="New Lead From $name";
    
    $emailbody = "
    You have received a new enquiry from
    First Name: $firstname\n".
    "Last Name: $lastname\n".
    "User Phone: $phone\n".
    "User Email: $mailFrom\n".
    "Password: password\n";
    ?>

3. RANDOM PASSWORD GENERATE SCRIPT

      <script>
             const keys = {
              upperCase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
              lowerCase: "abcdefghijklmnopqrstuvwxyz",
              number: "0123456789",
              symbol: "!@#$%^&*()_+~\`|}{[]:;?><,./-="
            }
            const getKey = [
              function upperCase() {
                return keys.upperCase[Math.floor(Math.random() * keys.upperCase.length)];
              },
              function lowerCase() {
                return keys.lowerCase[Math.floor(Math.random() * keys.lowerCase.length)];
              },
              function number() {
                return keys.number[Math.floor(Math.random() * keys.number.length)];
              }];
            
            function createPassword() {
              const upper = document.getElementById("upperCase").checked;
              const lower = document.getElementById("lowerCase").checked;
              const number = document.getElementById("number").checked;
              if (upper + lower + number === 0) {
                alert("Please check atleast one box!");
                return;
              }
              const passwordBox = document.getElementById("passwordBox");
              const length = document.getElementById("length");
              let password = "";
              while (length.value > password.length) {
                let keyToAdd = getKey[Math.floor(Math.random() * getKey.length)];
                let isChecked = document.getElementById(keyToAdd.name).checked;
                if (isChecked) {
                  password += keyToAdd();
                }
              }
              passwordBox.innerHTML = password;
            }
            </script>

Answer 1

Use the below PHP code and it should work for you. I have stored the JS var output into a PHP variable and then used it in the PHP code

<?php
$pass = "<script>document.write(password)</script>";
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$mailFrom = $_POST['email'];
$phone = $_POST['tel'];
$password = $_POST['password'];
$mailTo = "myemail@domain.com";
$headers = "From: ".$mailFrom;

$subject ="New Lead From $name";

$emailbody = "
You have received a new enquiry from
First Name: $firstname\n".
"Last Name: $lastname\n".
"User Phone: $phone\n".
"User Email: $mailFrom\n".
"Password: $pass\n";
?>