Using JavaScript To Pass Field Value To Another Field

pass field input value from one field to another

This is a tutorial where I am going to show you how you can pass the user input value from one field to another on the same online form by using a Javascript code.

JavaScript can be used in many ways on your forms to extend their capabilities and control interactions. If you are new to JavaScript or don’t have much technical skills, you don’t need to worry, because I am going to provide you the entire code and specify what you need to change on your end.

Firstly, what does this code do exactly? Well, if someone starts completing your online form and gets to fill a particular field, the input will be automatically copied to another field. This works great for forms where the user has to provide the same information more than once.

Check out this sample. Fill in the first field and move towards the second one:



The code is triggered once you have moved from the first field.

Keep in mind that for this workaround to work on your 123ContactForm web form, you’ll need to enable the JavaScript feature on your form, which is located in the Advanced section.

Step 1. Create Your JavaScript file

Open your notepad and copy the code provided below:

var demo123CF_CopyFieldValue = new function() {
    var self = this;

    this.errorMessage = '';

    this.id123cf = '#id123-control';
    this.fieldOrigin = '';
    this.fieldDestination = '';

    this.setFieldOriginID = function ( fieldId ) {
        this.fieldOrigin = fieldId;
    }

    this.setFieldDestinationID = function ( fieldId ) {
        this.fieldDestination = fieldId;
    }


    this.init = function () {
        this.setOnChange();
    }

    this.validateData = function () {
        if(!$(this.id123cf+this.fieldOrigin).length)
            this.errorMessage = 'Invalid origin field';
        if(!$(this.id123cf+this.fieldDestination).length)
            this.errorMessage = 'Invalid destination field';

        return this.errorMessage == '';
    }

    this.updateDestinationValue = function (){
        if(!this.validateData()) {
            alert(this.errorMessage);
            return;
        }

        $(this.id123cf+this.fieldDestination).val($(this.id123cf+this.fieldOrigin).val());
    }

    this.setOnChange = function () {
        if(!this.validateData()) {
            alert(this.errorMessage);
            return;
        }

        //change event from start date to be copied to end date
        $(this.id123cf+this.fieldOrigin).change(function() {
            self.updateDestinationValue();
        });

    }
}

$( document ).ready(function() {
    demo123CF_CopyFieldValue.setFieldOriginID('field-id-1');
    demo123CF_CopyFieldValue.setFieldDestinationID('field-id-2');
	
    demo123CF_CopyFieldValue.init();
});

Now you will need to adjust the code a bit. You will need the ID of the field from where you are going to pass its input value and the ID of the field where the input value is passed.

This is the function that will pass/copy the value from the first field:

demo123CF_CopyFieldValue.setFieldOriginID('field-id-1'); 

This is the function that will paste the copied value to the second field:

demo123CF_CopyFieldValue.setFieldDestinationID('field-id-2');

Now you need to replace field-id-1 and field-id-2 with the respective IDs of your field inputs.

What you need to do in this step is enable developer tools in your browser. You can check on how to do this on Google Chrome, Mozilla Firefox, Safari, Opera and IE.

Next, view your online form from a visitor’s perspective and right-click the field input from where you want to pass its value. An option that allows you to inspect elements should appear in the context menu. Click it to continue.

using inspect element to pass user input from one field to another on the form

Look for the input tag and copy the field ID that appears after “control”. Read our blog article on how to inspect your form fields for more details.

pass user value from field to another by using the field ID

Now get back to your notepad where the JavaScript code is located. Add your field ID by replacing the old one within the function:

demo123CF_CopyFieldValue.setFieldOriginID('field input ID goes here'); 

Do the same for the second function, but replace the ID with that of the second field, instead.

demo123CF_CopyFieldValue.setFieldDestinationID('field input ID goes here');

Finally, save your notepad document as a JavaScript file. You can do this easily by providing the .js extension next to the name. For example passvalue.js

Step 2. Apply The JavaScript On The Form

At 123ContactForm, in order to add a custom JavaScript to your web form, you will need to go the Settings → Advanced section and click the Form tab. There, tick the option Add a JS script to your form and provide the URL of your script.

passing value from one field input to another with javascript url on form

If you don’t have a server where you can upload the JS file, try GitHub. It’s a free hosting platform for developers where they can upload all sorts of scripts. Create an account on GitHUb and upload your .js file there. Obtain the URL to your script and provide it in the JS URL box on 123ContactForm.

[Update]: The URL of your Javascript file must be hosted on a secure (HTTPS) environment.

If you want to pass field input values from one web form to another, 123ContactForm provides a great feature that makes it possible without coding. Read our documentation about it.

And there you have it! You can now test your form and see the results. If you require assistance, don’t hesitate to contact our customer support specialists.

Olivian Stoica
Olivian Stoica
is the Search Engine & Conversion Optimization Analyst at 123ContactForm. He has a keen knowledge of the platform, providing useful articles and guides about building web forms.

2 Comments

  1. Pritom says:

    This feature is great. But the problem is it only accepts https(js file) not http(js file).

    • Olivian Stoica says:

      Hello,

      Sorry for replying this late. You are correct, you can only use JS files that are hosted on HTTPS. What I would recommend is using a host that supports HTTPS and make sure you use the HTTPS version of your URL. If you have any other questions, don’t hesitate to contact our support specialists at support[at]123contactform.com.

      I’m glad you enjoy the feature.

      Thanks.

Leave a Reply

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