How can I use JS to take the values from a php form and populate it into another field alongside oth-CodePudding

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 >
          <?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 >
          <?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 >
              <?php
                  echo $api->input('subject', array(
                    'type' => 'hidden',
                    'value' => 'Form Name - ',
                    'id'=> 'subject',
                ));
              ?>
</div>

CodePudding user response：

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">

CodePudding user response：

In your case

PHP

<div >
          <?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 >
          <?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>

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