Preenchendo forms com jQuery Form Fill

Quando estamos desenvolvendo sistemas web sempre aparece aquela tela monstro com mais de 20 campos, dai bate aquele desânimo. Cansado de sofrer com isso desenvolvi o jQuery Form Fill Plugin.

O Form Fill recebe um objeto JSON e preenche um form com os valores do objeto, simples assim!

Seguem abaixo as features do plugin:

  • Preenche todos os tipos de elementos do form:
    • text
    • password
    • hidden
    • textarea
    • checkbox
    • radio
    • select
  • Preenche campos que utilizam o jQueryUI Datepicker
    • Data no formato texto. Ex: mm/dd/yyyy ou yyyy-mm-dd
    • Data em milisegundos.
  • Resolve nomes de elementos em estilo de objeto (usuario.nome) por default, mas também funciona sem estilo (nome).

Vamos fazer um exemplo com as opções default um form com os nomes dos elementos no estilo O.O.

        <form id="form1"> 
            <label>Nome:</label> 
            <input type="text" name="user.name" />
            
            <label>E-mail:</label>
            <input type="text" name="user.email" />
            
            <label>Phone:</label>
            <input type="text" name="user.phone.codeArea" size="3" maxlength="3" />
            <input type="text" name="user.phone.number" size="11" maxlength="10" />
            
            <label>Date:</label>
            <input type="text" name="user.date1" id="date1" /> from string (mm/dd/yyyy, mm-dd-yyyy, yyyy-mm-dd or yyyy/mm/dd)
            
            <label>Date 2:</label>
            <input type="text" name="user.date2" id="date2"/> from milliseconds
            
            <label>Gender:</label>
            <select name="user.gender"> 
                <option>--select--</option> 
                <option value="F">Female</option> 
                <option value="M">Male</option> 
            </select> 
            
            <label>Is Administrator?</label><br /> <!--input type="checkbox" name="user.admin" value="Y" -->
            <input type="radio" name="user.admin" value="Y"> Yes
            <input type="radio" name="user.admin" value="N"> No
            
            <label>Rules:</label>
            <input type="checkbox" name="user.rules&#91;0&#93;.id" value="1" /> Admin
            <input type="checkbox" name="user.rules&#91;1&#93;.id" value="2" /> User
            <input type="checkbox" name="user.rules&#91;2&#93;.id" value="3" /> Developer
            <input type="button" id="btnExample1" value="Fill" />
            <input type="reset" value="Reset" />
        </form> 
    

Agora vamos implementar o evento onclick do botão Fill do form1. Vamos criar um objeto JSON e chamar o método fill no seletor do form1 e a mágica será feita.

        $("#btnExample1").click(function() {
            var user = {
                "name" : "Makoto Hashimoto", 
                "email" : "makoto@makoto.blog.br", 
                "phone" : {
                    "codeArea": "+55",
                    "number" : "2755555555"
                },
                "date1": "03/30/1981",
                "date2": "354769200000", // 1981-03-30 in milliseconds
                "gender" : "M",
                "admin" : "Y",
                "rules" : [
                    {
                        "id" : "1", 
                        "name": "Admin"
                    },
                    {
                        "id" : "3", 
                        "name": "Developer"
                    }
                ]
            };
            $("#form1").fill(user);
        });
    

Seguem abaixo os links das páginas do projeto e do projeto no Github.

Página do Projeto – http://makoto.blog.br/formFill

Projeto no Github – http://github.com/makotohashimoto/formFill