javascript – Copy field value from one field to another-ThrowExceptions

Exception or error:

I need to copy two field values from two individual fields to their corresponding fields further on in another form on the same page.

Input field: First Name
Input field: Last Name

Copy these values to:

Input field: Billing First Name
Input Field: Shipping First Name

I have tried the following code to no avail, I hacked it from another website which has a checkbox for the same thing, in my case, there is a form for entering customers first name, last name and email, the customer then clicks the Continue button, and the next form loads, this form is where I would like to auto-full the first/last name as per the initial form.

This is the code I am using between the in the of the document.

<script type = "text/javascript">
function FillBilling(f) {
  if(f.dispatch[checkout.update_steps].submit == true) {
    f.user_data[firstname].value = f.user_data[b_firstname].value;
    f.user_data[lastname].value = f.user_data[b_lastname].value;

The fields are generated as default like this, unfortunately I cannot change the ID nor the name values.

First Name:

<input type="text" class="input-text " value="" size="32" name="user_data[firstname]" id="elm_6">

Last Name:

<input type="text" class="input-text " value="" size="32" name="user_data[lastname]" id="elm_7">

Continue Button:

<input type="submit" value="Continue" name="dispatch[checkout.update_steps]">

Billing First Name:

<input type="text" class="input-text " value="" size="32" name="user_data[b_firstname]" id="elm_14">

Billing Last Name:

<input type="text" class="input-text " value="" size="32" name="user_data[s_firstname]" id="elm_16">

I think, but may be wrong, that because the Continue submit button has a name containing a dot (dispatch[checkout.update_steps]), this breaks the Javascript, but I’m not sure.

I have also noted that the “First Name”, “Last Name” fields and “Continue” button are on a seperate form, the data is sent to the second form on the same page via Ajax. The first form has name=”step_one_contact_information_form” and the second form (Billing First Name, Billing Last Name) has name=”step_two_billing_address”.

Any ideas?

Thanks for your advice!

How to solve:

I suggest you make it with jQuery. It is very simple I have made this for you:

Here is an example of the code:



Try something like this:

Add an onclick event to your button (preferably with event listeners, but the following way will also work)

<input type="submit" value="Continue" name="dispatch[checkout.update_steps]" onclick="return fillBilling()">

and change your function to look do something like this:

function fillBilling() {
    document.getElementsByName("user_data[b_firstname]")[0].value = document.getElementsByName("user_data[firstname]")[0].value;
    document.getElementsByName("user_data[s_firstname]")[0].value = document.getElementsByName("user_data[lastname]")[0].value;
    return false;

You can use document.getElementByID("elm_[x]") instead if the id’s will always be the same (replace [x] with their respective IDs)

Also, I recommend changing the button to type “button” so if you’re not going to use it to submit the form:

<input type="button"... />

Hope this helps

Leave a Reply

Your email address will not be published. Required fields are marked *