Auto-Split Fields

Auto-Split-Fields.markdown

Auto-Split Fields

A simple demonstration of form fields which split on change. The name field, on change, splits into two fields, first name and last name. The email field, splits into two fields, the email itself and the username. The password field splits into the password and a password confirmation field which needs to be filled by the user.

This concept could probably reduce the form filling time.

A Pen by Kunal Varma on CodePen.

License.

index.html

<div class="outer">
  <div class="container">
    <h1>Create an Account</h1>
      <form class="form"> 
        <div class="full-name form-group">
        <label for="name">Name</label>
        <input type="text" id="name" placeholder="Name" class="input"/>
        </div>
        <div class="row name-split split">
          <div class="col-lg-6 form-group">
            <label for="first_name">First Name</label>
            <input type="text" name="fist_name" id="first_name" placeholder="First Name" class="input"/>
          </div>
          <div class="col-lg-6 form-group">
            <label for="last_name">Last Name</label>
            <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="input"/>
          </div>
        </div>
        <div class="full-email form-group">
            <label for="full_email">Email</label>
            <input type="email" id="full_email" placeholder="Email" class="input"/>
        </div>
        <div class="row email-split split">
          <div class="col-lg-6 form-group">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" placeholder="Email" class="input"/>
          </div>
          <div class="col-lg-6 form-group">
            <label for="username">Username</label>
            <input type="text" name="username" id="username" placeholder="Username" class="input"/>
          </div>
        </div>
        <div class="full-password form-group">
            <label for="full_password">Password</label>
            <input type="password" id="full_password" placeholder="Password" class="input"/>
        </div>				
				<div class="row password-split split">
          <div class="col-lg-6 form-group">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" placeholder="Password" class="input"/>
          </div>
          <div class="col-lg-6 form-group">
            <label for="password_confirm">Confirm Password</label>
            <input type="password" name="password_confirm" id="password_confirm" placeholder="Confirm Password" class="input"/>
          </div>
        </div>     
        <input type="submit" class="submit" value="Create Account"/>				
      </form>
		<p class="well-sm text-center">
			By signing up, you agree to our <a href="#">Terms &amp; Conditions</a>
		</p>
  </div>
</div>

script.js

jQuery(document).ready(function($){  
  //Name Split
  $("#name").change(function(){    
  	var nameVal = $(this).val()
    var nameLength = nameVal.length;
    var nameSplit = nameVal.split(" ");    
    var lastNameLength = nameSplit[0].length + 1;
    var lastName = nameVal.slice(lastNameLength);   
    $(".full-name").fadeOut(0);
    $('#first_name').val(nameSplit[0]);
    $('#last_name').val(lastName);
    $('.name-split').fadeIn(100);
  });  
  
  //Email Split
  $("#full_email").change(function(){    
  	var emailVal = $(this).val();    
    var emailSplit = emailVal.split("@");    
    $(".full-email").fadeOut(0);		
    $('#email').val(emailVal);
    $('#username').val(emailSplit[0]);    
		$('.email-split').fadeIn(100);
  });  

	//Password Split
  $("#full_password").change(function(){    
  	var passwordVal = $(this).val();        
    $(".full-password").fadeOut(0);
    $('#password').val(passwordVal);   
    $('.password-split').fadeIn(100);
		$('#password_confirm').focus();
  });  		
});

style.scss

//Variables
$font-family: 'Roboto', sans-serif;
$font-size: 14px;
$body-bg: #503D2E;
$form-bg: darken($body-bg, 10%);
$primary-color: #D54B1A;
$secondary-color: lighten($body-bg, 15%);
$input-padding: 10px 12px;

::-webkit-input-placeholder{
  color: $secondary-color;   
	opacity: 0.9;
}
::-moz-placeholder {
	color: $secondary-color;   
	opacity: 0.9;
}

body{
  margin:0;
  height: 100%;
  background: $body-bg;
  font-family: $font-family;
  font-size: $font-size;
  line-height: 1.4; 
	color: lighten($secondary-color, 10%);
}
a {
  color: $primary-color;
  //active, hover, focus
  &:hover, &:focus, &:active{
    color: $primary-color;  
    text-decoration: underline;
  }
}
input{
  font-family: $font-family;
  font-size: $font-size;
	outline: none;
}
.outer{
  height: 410px;
}
.container{
  max-width: 420px;
  width: 100%;
  margin: auto;  
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  //form
  .form{
    background: $form-bg;
    border-radius: 4px;
    padding: 20px;
  }
}
h1{
  color: $secondary-color;
  text-align: center;
  padding-bottom: 10px;
	font-weight: lighter;
}
.input{  
  display: block;
  width: 100%;
	background: darken($form-bg, 5%);
  color: $secondary-color;
  padding: $input-padding;
  border-radius: 3px;
  border: none;
	//:focus
	:focus{
		color: lighten($secondary-color, 10%);
	}
}
.submit {
  background: $primary-color;
  color: #fff;
  cursor: pointer;
  padding: $input-padding;
  display: block;
  width: 100%;
  border-radius: 3px;        
  border: none;    
  font-weight: bold;
  text-transform: uppercase;    
  margin: 0;	
	text-shadow: 0px 1px 1px darken($primary-color, 10%);
}
.split{
  display: none;
}
label{
  color: $secondary-color;	
}