Thursday, June 23, 2011

Form Management

FormManager is a tool to easily map an object to form and form to object. There are only two interface one is fillForm and other is getForm.

It is very time consuming to write code to read/write form field one by one then create a JSON object. But this form manager do every thing just by calling two method

fillForm: takes object as arguments and convert its leaves path as string then search into form for field with same name. after finding the field it change the value of fields. for example if object is { x:{x-child:{child:"xyz"}}} fillForm will convert this object as "x.x-child.child" and search inside the for for the field with name "x.x-child.child".
To call fillForm use $("form#myform").fillForm( myObj );

getForm: takes no argument. It simply reads each fields inside form and use its name to generate a JSON object.
To call getForm use myObj = $("form#myform").fillForm( );

obj = {
                   x : [ "x1", "x2", "x3"],
                   y:{ 
                      y1 : "y1", 
                      y2 : { 
                             y21 : "y21",
                             y22 : "y22"
                            }
                     }
                 };
           to map this object int form use
           $("form").fillForm(obj);
           name of the form fields should be according 
          to object for above case it would be.
 
      <form>
          <input name="x.0" type="text" />
          <input name="x.1" type="text" />
          <input name="x.2" type="text" />
          <input name="y.y1" type="text" />
          <input name="y.y2.y21" type="text" />
          <input name="y.y2.y22" type="text" />
     </form>
   

      and to map object from form 
       use $("form").getForm ();



No comments:

Post a Comment