Copying Billing Names into Cardholder

This code will allow you to populate the cardholder name with the billing first and last name, so your customers do not have to type in the same information twice.

Javascript

Locate this section:

<script type="text/javascript">
     var submitted = false;
     function submitform()
     {
       if(submitted) {
         return false;
       }
       submitted=true;
       document.epayform.submitbutton.value='Please Wait... Processing';
       return true;
     }
</script>

Insert a new line directly below and add the following code:

<script type="text/javascript">
function copyNameToCardholder()
{
  var form = document.epayform;
  var first = form.UMbillfname.value;
  var space = " ";
  var last = form.UMbilllname.value;
  var cardfirst = first.concat(space);
  var cardholder = cardfirst.concat(last);
  form.UMname.value= cardholder;
}
</script>

HTML

Next, add onChange to the first and last name input. Find the following code in the form:

<div class="form-group">
  <span class="col-form-label col-sm-4 col-xs-12 ">First Name</span>
  <div class="col-md-8 col-xs-12 ">
    <input id="UMbillfname" name="UMbillfname" class="form-control" type="text" placeholder="First Name" value="[UMbillfname]">
  </div>
</div>
<div class="form-group">
  <span class="col-form-label col-sm-4 col-xs-12 ">Last Name</span>
  <div class="col-md-8 col-xs-12 ">
    <input id="UMbilllname" name="UMbilllname" class="form-control" type="text" placeholder="Last Name" value="[UMbilllname]">
  </div>
</div>

And then change it to the code below:

<div class="form-group">
  <span class="col-form-label col-sm-4 col-xs-12 ">First Name</span>
<div class="col-md-8 col-xs-12 ">
  <input id="UMbillfname" name="UMbillfname" class="form-control" type="text" placeholder="First Name" value="" onChange="copyNameToCardholder()">
</div>
</div>
<div class="form-group">
<span class="col-form-label col-sm-4 col-xs-12 ">Last Name</span>
<div class="col-md-8 col-xs-12 ">
  <input id="UMbilllname" name="UMbilllname" class="form-control" type="text" placeholder="Last Name" value="" onChange="copyNameToCardholder()">
</div>
</div>

The last step is to remove the cardholder text box:

<div class="form-group">
  <span class="col-form-label col-sm-4 col-xs-12 ">Name as on Card</span>
  <div class="col-md-8 col-xs-12 ">
    <input id="UMname" name="UMname" class="form-control" type="text" placeholder="Name as on Card" value="[UMname]">
  </div>
</div>

Once saved, the form will automatically copy the billing name to the cardholder name field.