ArrestedDevelopment ArrestedDevelopment - 2 months ago 10
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

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.

Comments