How to copy an html form fields value to another field on click using javascript?

Question

Friends how can i do the following? I am having three input fields

 <input name="firstname" type="text" class="text" id="firstname" value="" />
 <input name="lastname" type="text" class="text" id="lastname" value="" />
 <input name="displayname" type="text" class="text" id="displayname" value="" />

I want to do this. After the user enters the first name and lastnaeme and then he clicks on the display name field, it should be populated with a value as "firstname lastname", How can I do it javascript?

Jayendra · Accepted Answer · 2011-12-04 08:52:13Z

2

Add onclick or keypress events on the displayname element with function -

function populateDisplayName(){
    var firstName = document.getElementById('firstname');
    var lastName = document.getElementById('lastname');
    document.getElementById('displayname').value = firstName.value + ' ' + lastName.value;
}

Demo

answered Dec 4, 2011 at 8:52

Jayendra

52.8k4 gold badges83 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saeed Neamati · Accepted Answer · 2011-12-04 08:36:30Z

1

var fullName = document.getElementById('displayname');
var firstName = document.getElementById('firstName');
var lastName = document.getElementById('lastName');
fullName.value = firstName.value + ' ' + lastName.value;

answered Dec 4, 2011 at 8:36

Saeed Neamati

35.9k42 gold badges140 silver badges192 bronze badges

1 Comment

Manjula Over a year ago

need to put the above code in a function and attached that function to onclick event of displayname input text box.

Collectives™ on Stack Overflow

How to copy an html form fields value to another field on click using javascript?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related