如何使用 JS 从 php 表单中获取值并将其与其他文本一起填充到另一个字段中？

Question

I'm using php to create a form that has a field for the first name, a field for the last name, and a hidden field called "Subject" (that will be used for an email upon submission). I wanted to know how I can use js to pull the values from the two fields and populate it into the Subject field in this way "My form - [First and last name]" in a cross-browser, yet simple way?

First Name and Last Name Fields:

        <div class="small-12 large-6 cell">
          <?php
             $url="https://".$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI];
             echo $api->input('source_url', array(
             'type' => 'hidden',
             'label' => false,
             'value'=>  $url

             ));

              echo $api->input('00NF0000008rWcG', array(
                'type' => 'text',
                'label' => false,
                'title' => 'First Name',
                'required' => true,
                'placeholder'=> false,
                'aria-label'=>'First name',
                'div'=> false,
                'id'=> '00NF0000008rWcG',
                'validation' => array('name'),
                'validation_msg' => 'Please enter your first name',
             )); ?>
            <label for="00NF0000008rWcG" aria-hidden="true">First Name *</label>
        </div>

        <div class="small-12 large-6 cell">
          <?php
             $url="https://".$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI];
             echo $api->input('source_url', array(
             'type' => 'hidden',
             'label' => false,
             'value'=>  $url

             ));

              echo $api->input('00NF0000008rWcL', array(
                'type' => 'text',
                'label' => false,
                'title' => 'Last Name',
                'required' => true,
                'placeholder'=> false,
                'aria-label'=>'Last name',
                'div'=> false,
                'id'=> '00NF0000008rWcL',
                'validation' => array('name'),
                'validation_msg' => 'Please enter your last name',
             )); ?>
          <label for="00NF0000008rWcL" aria-hidden="true">Last Name *</label>
        </div>

Hidden Subject Field:

<div class="small-12 large-12 cell">
              <?php
                  echo $api->input('subject', array(
                    'type' => 'hidden',
                    'value' => 'Form Name - ',
                    'id'=> 'subject',
                ));
              ?>
</div>

Answer 1

IDs have to start with a letter and cannot start with a number.

The below code just attaches an event listener with a single function to both input fields with an updated ID.

 let fName = document.querySelector("#A00NF0000008rWcL"); let lName = document.querySelector("#A00NF0000008rWcG"); let subject = document.querySelector("#subject"); let subjectSTR = ""; let subjectFormat = "My form - [{firstName} {lastName}]"; function buildSubject(){ subjectSTR = subjectFormat.replace("{lastName}",lName.value); subjectSTR = subjectSTR.replace("{firstName}",fName.value); subject.value = subjectSTR; } lName.addEventListener("input",buildSubject); fName.addEventListener("input",buildSubject);

 <input type="text" id="A00NF0000008rWcL"><br> <input type="text" id="A00NF0000008rWcG"> <hr> <input type="text" id="subject">

Answer 2

In your case

PHP

<div class="small-12 large-6 cell">
          <?php
             $url="https://".$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI];
             echo $api->input('source_url', array(
             'type' => 'hidden',
             'label' => false,
             'value'=>  $url

             ));

              echo $api->input('00NF0000008rWcG', array(
                'type' => 'text',
                'label' => false,
                'title' => 'First Name',
                'required' => true,
                'placeholder'=> false,
                'aria-label'=>'First name',
                'div'=> false,
                'id'=> '00NF0000008rWcG',
                'oninput' => 'handleValueChange()',
                
                'validation' => array('name'),
                'validation_msg' => 'Please enter your first name',
             )); ?>
            <label for="00NF0000008rWcG" aria-hidden="true">First Name *</label>
        </div>

        <div class="small-12 large-6 cell">
          <?php
             $url="https://".$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI];
             echo $api->input('source_url', array(
             'type' => 'hidden',
             'label' => false,
             'value'=>  $url

             ));

              echo $api->input('00NF0000008rWcL', array(
                'type' => 'text',
                'label' => false,
                'title' => 'Last Name',
                'required' => true,
                'placeholder'=> false,
                'aria-label'=>'Last name',
                'div'=> false,
                'id'=> '00NF0000008rWcL',
                'oninput' => 'handleValueChange()',
                'validation' => array('name'),
                'validation_msg' => 'Please enter your last name',
             )); ?>
          <label for="00NF0000008rWcL" aria-hidden="true">Last Name *</label>
        </div>

JS

function handleValueChange(){
document.getElementById("subject").value="My form -["+document.getElementById("00NF0000008rWcG").value+document.getElementById("00NF0000008rWcL").value+"]";
}

For General Use
You can simply use and experiment with this example

<input type="text" id="firstname" oninput="handleValueChange()">
<input type="text" id="lastname" oninput="handleValueChange()" >
<input type="hidden" id="subject" >

<script>

function handleValueChange(){
document.getElementById("subject").value="My form -["+document.getElementById("firstname").value+document.getElementById("lastname").value+"]";

}
</script>

For PHP

echo '
<input type="text" id="firstname" oninput="handleValueChange()">
<input type="text" id="lastname" oninput="handleValueChange()" >
<input type="hidden" id="subject" >
';
echo '
<script>
function handleValueChange(){
document.getElementById("subject").value="My form -["+document.getElementById("firstname").value+document.getElementById("lastname").value+"]";
}
</script>
';

Only jS

function handleValueChange(){
document.getElementById("subject").value="My form -["+document.getElementById("firstname").value+document.getElementById("lastname").value+"]";
}

I hope it will help