Demo for jQuery Masked Input

Stack Overflow demo for the jQuery Masked Input plugin

by Luiz Silva

HTML

<script src="http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.js"></script>
<div id="gen-form">
<div><input name="qtd" type="radio" value="1" /> 1 Cliente</div>
<div><input name="qtd" type="radio" value="2" /> 2 Clientes</div>
<div><input name="qtd" type="radio" value="3" /> 3 Clientes</div>
<button id="generate">Gerar Form</button>
<hr/>
</div>
<form id="myform">
</form>

JavaScript

$('#generate').click(function() {
    
    //recupera radio selecionado
    var radio = $('input[name=qtd]:checked');
    if (radio.length == 0) {
        alert('Selecione a quantidade!');
        return;
    }
    
    //recupera valor do radio (quantidade de repetições)
    var count = parseInt(radio.val());
    
    //html com campos de cada seção do formulário
    var baseHtml = 
      '<div>Data <input name="data" class="campo-data" type="text"/></div>' +
      '<div>RG <input name="rg" class="campo-rg" type="text"/></div>';
    
    //laço para adicionar N vezes os campos
    for (var i = 0; i < count; i++) {
        $('#myform').append('<div> Cliente ' + (i+1) + '</div>');
        $('#myform').append(baseHtml);
    }
    
    //aplica máscara de acordo com os estilos
    $(".campo-data").mask("99/99/9999");
    $(".campo-rg").mask("999.999.999-9");
    
    //inibe formulário inicial
    $('#gen-form').hide();
    
});