ArrestedDevelopment ArrestedDevelopment - 1 year ago 63
CSS Question

Show form fields successively. (Javascript/CSS)

does anyone know how to show form fields successively like on https://www.hioscar.com/get-oscar/2016/quote/? It looks like Javascript, but I can't find the code. Should be animated and should show the next field without hitting return. Is there a framework for this?

kind regards

Answer Source

You can do it using jquery. Here is a basic example :

$(document).ready(function(){
	$('#input1').on('keyup',function(){
  	if ($('#input1').val().length === 5) {
    	$('#input2').show();
    }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="input1">
</div>
<div>
<input id="input2" style="display:none;">
</div>

In this example, the form opened showing only one field.

On key up, we check if the length of the value of the field is equal to 5.

If it is, we show the second field.