javascript - Showing form input data in a different ID in same form

Question

I have a form with input textboxes with IDs as follows:

#ApplicantFirstName
#ApplicantSurname
#ApplicantAddress
#ApplicantPostcode

Later in the form, there is a consent where I need to show the above details in a statement.

I have the consent as follows:

<p>I <span id="ApplicantFullName"></span> of <span id="ApplicantFullAddress"></span> hereby give my permission for the company to share personal information with other service providers</p>

The function is then triggered on a dropdown being clicked with onclick="updateConsent(); being added to the dropdown.

I have written the following but it's not working:

<script type="text/javascript">
   function updateConsent(){
      document.querySelectorAll("#ApplicantFirstName, #ApplicantSurname").innerHTML = document.getElementById(ApplicantFullName).innerHTML ;
      document.querySelectorAll("#ApplicantAddress, #ApplicantPostcode").innerHTML = document.getElementById(ApplicantFullAddress).innerHTML ;
   }
</script>

Is that the correct script to use?

I'm not getting any errors, just doesn't appear to be working

question from:https://stackoverflow.com/questions/65922390/showing-form-input-data-in-a-different-id-in-same-form

Answer 1

You use "#ApplicantFirstName, #ApplicantSurname","#ApplicantAddress, #ApplicantPostcode" but your id in the HTML has the first letter as lower case. Note that Javascript is cAsE sEnSiTivE

Change the Javascript:

   function updateConsent(){
      document.querySelectorAll("#applicantFirstName, #applicantSurname").innerHTML = document.getElementById(applicantFullName).innerHTML ;
      document.querySelectorAll("#applicantAddress, #applicantPostcode").innerHTML = document.getElementById(applicantFullAddress).innerHTML ;
   }

OR change the HTML:

<p>I <span id="ApplicantFullName"></span> of <span id="ApplicantFullAddress"></span> hereby give my permission for the company to share personal information with other service providers</p>