Unable To Copy 3 Input Fields In JS

Contents hide

1 Unable to copy 3 input fields in JS

2 Solution – 1

Problem Description:

Wants to merge 3 input field’s value in 1 input

Wants to print ‘fname mnane lname in’ fullname input field.

after than copy fullname value into fullname2.

My code is below.

HTML

<div class="col-md-4">
  <label>Last Name</label>
  <input class="form-control" id="lname" type="text" onchange="setaddress()" onkeyup="this.value = this.value.toUpperCase();">
</div>
<div class="col-md-4">
  <label>Middle Name</label>
  <input class="form-control" id="mname" type="text" onchange="setaddress()" onkeyup="this.value = this.value.toUpperCase();">
</div>
<div class="col-md-4">
  <label>First Name</label>
  <input class="form-control" id="fname" type="text" onchange="setaddress()" onkeyup="this.value = this.value.toUpperCase();">
</div>
<div class="col-md-4">
<label>Complete Name</label>
<input class="form-control" id="fullname" type="text" readonly>
</div>
<div class="col-md-4">
<label>Complete Name Again</label>
<input class="form-control" id="fullname2" type="text" readonly>
</div>

function setaddress() {
  var fname = document.getElementById('fname').value;
  var mname = document.getElementById('mname').value;
  var lname = document.getElementById('lname').value;

  document.getElementById('fullname').value =  fname +" " + mname +" " +  lname;
}

    //using JS 2 to copy input field

        window.onload = function() {
    var src = document.getElementById("fullname"),
        dst = document.getElementById("fullname2");
    src.addEventListener('input', function() {
        dst.value = src.value;
    });
};

Solution – 1

innerHTML is for normal tags if you want to change value of input field you should use

document.getElementById('fullname').value =  fname +" " + mname +" " +  lname;
document.getElementById('fullname2').value =  fname +" " + mname +" " +  lname;

Rate this post