CODEWITHSUNDEEP
jqueryforms
MK69
MK69

Reputation: 57

auto-fill or combine two input fields

I have a form with 3 input fields. 1 for firstname, 1 for lastname and 1 for fullname. What I want to achieve if the user is:

filling in firstname & lastname, and the form -on the fly- combines firstname and lastname in the "fullname field"

OR

The fullname field is provided, and the form -on the fly- puts the firstname in the firstname field and the lastname in the lastname field.

<label>Firstname<span class="small">Add the Artists firstname</span>
</label>
<input type="text" name="artistfield_fname" id="Artist_fname" />

<label>Lastname<span class="small">Add the Artists lastname</span>
</label>
<input type="text" name="artistfield_lname" id="Artist_lname" />

<label>Artist<span class="small">Add the Artists full name</span></label>
<input type="text" name="artistfield_fullname" id="Artist_fullname" />

Upvotes: 1

Views: 1592

Answers (2)

LoopCoder
LoopCoder

Reputation: 182

Try This. In Html..

<label>Firstname<span class="small">Add the Artists firstname</span>
</label>
<input type="text" name="artistfield_fname" id="Artist_fname" onkeyup="SetFullName()"/>

<label>Lastname<span class="small">Add the Artists lastname</span>
</label>
<input type="text" name="artistfield_lname" id="Artist_lname" onkeyup="SetFullName()"/>

<label>Artist<span class="small">Add the Artists full name</span></label>
<input type="text" name="artistfield_fullname" id="Artist_fullname" onkeyup="NameSplitter()"/>

In Javascript 

function SetFullName()
     {
         document.getElementById("Artist_fullname").value="";
         document.getElementById("Artist_fullname").value=document.getElementById("Artist_fname").value+" "+document.getElementById("Artist_lname").value;
     }
     function NameSplitter()
     {
         var namedata=document.getElementById("Artist_fullname").value.split(" ");
         if(namedata.length==1) 
            document.getElementById("Artist_fname").value=namedata[0];
         if(namedata.length>1 && namedata.length<=2) 
         {
            document.getElementById("Artist_fname").value=namedata[0];
            document.getElementById("Artist_lname").value=namedata[1];
         } 
         if(namedata.length>2) 
            {
                for(var i=0;i<namedata.length-1;i++){
                    if(i==0)
                        document.getElementById("Artist_fname").value=namedata[i]; 
                    else
                        document.getElementById("Artist_fname").value=document.getElementById("Artist_fname").value+" "+namedata[i];  
                }
                document.getElementById("Artist_lname").value=namedata[namedata.length-1];
            }
     }

Upvotes: 1

Hitmands
Hitmands

Reputation: 14169

You need to create a data-binding among these fields... there is an example: 

jQuery(document).ready(UserInfoCtrl);
function UserInfoCtrl($) {
  var self = this;
  
  var form = $('#form');
  var fname = $('#fname');
  var lname = $('#lname');
  var fullname = $('#fullname');
  
  self.updateFirstName = function(firstName) {
    var _lname = lname.val() || (fullname.val() || '').trim().split(' ').pop(); 
    fullname.val(firstName + ' ' + _lname);
  };
  
  self.updateLastName = function(lastName) {
    var _fname = fname.val() || (fullname.val() || '').trim().split(' ').shift(); 
    fullname.val(_fname + ' ' + lastName);
  };
  
  self.updateFullName = function(fullName) {
    var _fullname = (fullName || '').trim().split(' ');
    
    fname.val((_fullname[0] || ''));
    lname.val((_fullname[1] || ''));
  };
  
  self.onFieldChange = function(e) {
    switch(this.id) {
      case 'fname':
        self.updateFirstName(this.value);
        break;
        
      case 'lname':
        self.updateLastName(this.value);
        break;
      
      case 'fullname':
        self.updateFullName(this.value);
        break;
    }
  };
  
  fname.add(lname).add(fullname).change(self.onFieldChange);
  
  form.submit(function(e) {
    e.preventDefault();
    return false;
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  
  <label for="fname">First Name</label>
  <input type="text" id="fname" />
  <hr>
  
  <label for="lname">Last Name</label>
  <input type="text" id="lname" />
  <hr>
  
  
  <label for="fullname">Full Name</label>
  <input type="text" id="fullname" />
  
</form>

Upvotes: 1

Related Questions