Form field duplication

I need to duplicate the content that is entered into a Forms ‘First Name’ and ‘Last Name’ fields into two new hidden fields.

Does anyone know how to complete this with javascript/jquery?

Something like this (not tested):

$('#YOUR-FORM_ID').submit(function() {
    var fn = $(this).find('[name="firstname"]').val();
    var ln = $(this).find('[name="lastname"]').val();

    $('#FISTNAME-HIDDEN-ID').val(fn);    
    $('#LASTNAME-HIDDEN-ID').val(ln);
});
1 Like

Threw this together had to do it in the past for Secure zone copying email to hidden username fields and also a div on the front end to show that change was actually happening…

Working Example : https://jsfiddle.net/jamezhall/ukqh83cz/5/

<div>
  <label for="Firstname">First Name</label>
  <input type="text" id="Firstname">
</div>
<div>
  <label for="FirstnameHidden">First Name Hidden</label>
  <input type="text" id="FirstnameHidden">
</div>

<div>
  <label for="Lastname">Last Name</label>
  <input type="text" id="Lastname">
</div>
<div>
  <label for="LastnameHidden">Last Name Hidden</label>
  <input type="text" id="LastnameHidden">
</div>

Jquery

 //This script auto updates on keyup and mobile when screen is no longer touched.
$("#Firstname, #Lastname").on('keyup touchend', function(){
  updateFields();
});

function updateFields() {
  $("#FirstnameHidden").val($('#Firstname').val());
  $("#LastnameHidden").val($('#Lastname').val());
}
1 Like

Thank you so much @James and @Adam.Wilson! Most appreciated. I will try these out now.

This worked like a charm!!! Thank you so much.

1 Like