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

4 Replies to “Preenchendo forms com jQuery Form Fill”

  1. Muito bom jahper, só de não ter que se preocupar com o preenchimento dos campos, já agiliza d+ o desenvolvimento

  2. Hi Makoto:

    I saw your jq-plugin on http://plugins.jquery.com/project/FormFill and it’s exactly what i need. Thank you… 🙂

    I modifyed your Code a little bit, maybe you want to release it in your plugin.
    I changed the else-clause on line 49 to the following:


    // check for a point in the field name attribute
    } else if ($(item).attr("name").match(/.*\..*/i)) {
    objName = $(item).attr("name").replace(/^[a-z]*[0-9]*[a-z]*\./i, 'obj.');
    } else {
    objName = 'obj.' + $(item).attr("name");
    }

    Like this, the plugin supports fieldnames without a point (.)
    i had the problem that my fields where not filled, because of this issue.

    There’s another nice to have, i would like. I had the problem, that my ajax-response was not interpretet as JSON-Object but as a String.
    Now i call your function this way:
    $(‘form#details’).fill($.parseJSON(data));

    (data ist the ajax response)
    Maybe you could check the obj-argument and parse it, if it’s not a JSON-Object… 😉

    Well….. Thank’s for the plugin, it would be nice to hear of you…

    Have fun…

    PS: Sorry, i don’t speak your Language… -.- (Is this portugues??)
    PPS: I hope, you understand my english, it’s realy terrible, since i speak german… 😉

  3. First, thank you to used the FormFill. I’m glad to know this.

    I think you downloaded an old version of formFill. On the new version you can inform how type of name your form elements have.
    Ex: If your form elements have names looks like objects use:
    $(“#formId”).formFill(jsonObject, {styleElementName: ‘object’});

    But if your form elements have normal names use:
    $(“#formId”).formFill(jsonObject, {styleElementName: ‘none’});

    I think second example can solve your problem.

    The new version can be downloaded at https://github.com/makotovh/formFill/archives/master

    For more examples you can go at http://makoto.blog.br/formFill/

    Hugs

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.