kpolosin
1/27/2018 - 6:30 PM

Credit card form

Credit card form

Credit card UI example
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
	<title>Credit card example</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
// максимальное кол-во символов и перепрыгивание на следующий инпут
function Jump(x){
    var ml = ~~x.getAttribute('maxlength');
    if(ml && x.value.length >= ml){
        do{
            x = x.nextSibling;
        }
        while(x && !(/text/.test(x.type)));
        if(x && /text/.test(x.type)){
            x.focus();
        }
    }
}
// максимальное кол-во символов и перепрыгивание на следующий инпут
// запрет на ввод букв
   $(function(){
$('.number_card').on('input', function(){
         this.value = this.value.replace(/^\.|[^\d\.]|\.(?=.*\.)|^0+(?=\d)/g, '');
     });
});
// запрет на ввод букв
var months = [
  {DaysInMonth:31, Name:"01"},
  {DaysInMonth:31, Name:"02"},
  {DaysInMonth:31, Name:"03"},
  {DaysInMonth:31, Name:"04"},
  {DaysInMonth:31, Name:"05"},
  {DaysInMonth:31, Name:"06"},
  {DaysInMonth:31, Name:"07"},
  {DaysInMonth:31, Name:"08"},
  {DaysInMonth:31, Name:"09"},
  {DaysInMonth:31, Name:"10"},
  {DaysInMonth:31, Name:"11"},
  {DaysInMonth:31, Name:"12"}
];
$(function() {
    var monthSelector = $('select[name=month]');
    $.each(months, function(index,month) {
        $('<option></option>')
            .attr('label', month.Name)
            .attr('value', index)
            .html(month.DaysInMonth)
            .appendTo(monthSelector);
    });

    var yearSelector = $('select[name=year]');
    for(var year=2018;year>=1917;year--)
        $('<option></option>')
            .attr('label', year)
            .attr('value', year)
            .html(year)
            .appendTo(yearSelector);            
});
</script>

<h1>Card FORM</h1>
<div>
    <input type="text" name="" class="number_card" onkeyup="Jump(this);" maxlength="4" size="1">
    <input type="text" name="" class="number_card" onkeyup="Jump(this);" maxlength="4" size="1">
    <input type="text" name="" class="number_card" onkeyup="Jump(this);" maxlength="4" size="1">
    <input type="text" name="" class="number_card" onkeyup="Jump(this);" maxlength="4" size="1">
<br>
<br>
	<select required="" name="month"></select>
	<select required="" name="year"></select>

<input id="validateFormSubmitButton" type="submit" class="button" value="Оплатить">
</div>


</body>
</html>


<!-- http://jsfiddle.net/vkfarha6/8/ -->
<!-- http://xiper.net/collect/js-plugins/ui/groupinputs -->
<!-- Create mounth and year -->
<!-- https://www.thesoftwareguy.in/create-month-and-year-dropdown-list-using-javascript/ -->
<html>
<head>