dhtmlxForm. Filling the Gap.

| Comments (51)

With the coming update of the DHTMLX library, we’re going to introduce a new component, which will be also available as a separate download. This component was probably missing in our library by accident, but now it’s time to fix it! This component is dhtmlxForm.

By offering dhtmlxForm to our users, we plan to solve the following tasks:

  • Make form building and handling easy and convenient to those who are already working with DHTMLX.
  • Simplify data loading into the form, and provide an easy way to save data on the server.
  • Provide convenient ways to do form validation.
  • Match the form interface to the DHTMLX skin design.

 
dhtmlxform within dhtmlxwindow

dhtmlxForm provides the following ways of building the form:

  • Generate a form based on a JSON object.
  • Generate a form based on external XML.
  • Generate a form based on HTML lists.
  • It’s also possible to attach the handler to a ready HTML form to apply dhtmlxForm validation, completion, and database binding capabilities.

 
As with other DHTMLX objects, dhtmlxForm provides a flexible script API to manage elements on the fly, process events, and validate data. To load data into the form and save it back to the server, you can use either dhtmlxConnector or your own server scripts.

A form built with the dhtmlxForm component supports all the usual types of elements. The use of DHTMLX controls such as Grid, Tree, or Combo within dhtmlxForm – as well as the creation of custom controls for dhtmlxForm – is coming soon in the official release. Also, when dependencies are used, dhtmlxForm manages the activity of form elements (e.g. – fields(s) will be active if a certain checkbox is checked or a certain radio button is selected).

Those who are interested may download and try dhtmlxForm before the official release. Your feedback is much appreciated, as it will help us to make the component really useful and easy to use. Apart from the component itself, the package also includes documentation and examples.

Please leave your comments here or go the Forum to discuss dhtmlxForm.

Posted by Mike Bremberg

Comments

  1. jc March 22, 2010 at 9:00 am

    Hello,

    dhtmlxForm is great.

    I’ve noticed that fieldset html tag support is missing. I use often fieldset and legends tags
    when I create forms. Is there any plan to support fieldset ?

    Thanks for any answer :)

  2. ivan March 22, 2010 at 9:24 am

    JC, yes, we’ll try to add fieldset html tag suppor in the final release of dhtmlxForm. Thanks for your feedback.

  3. Pedro Pinto March 25, 2010 at 2:55 am

    Hi,

    It would be nice if the Validation API could support to add a custom validation message after the element, similar to what is done in http://livevalidation.com/ out of the box :)

    Regards,

    • ivan March 25, 2010 at 3:27 am

      Validation API allows to definy any custom reaction by using onValidateError event, so something similar can be added without changes in js files of dhtlmxform.

      • Pedro Pinto March 25, 2010 at 4:15 am

        True, but AFAYK, it would have to be made a custom validation for each different validation type, as per example 04_validate/05_custom_message.html I was suggesting something like:

        formData = [
        {type:”input”, name:”field_a”, label:”User name”, validate:”NotEmpty”, invalidMessage: “Field can’t be empty”},
        {type:”input”, name:”field_b”, label:”Email”, validate:”ValidEmail”, invalidMessage: “Field ain’t a valid Email”}
        ];

        probably it would make more sense to be an sub-option in validate :)

        anyway, it would just be nice ;)

        btw, this new component is already quite useful, thx :D

        • ivan March 25, 2010 at 5:15 am

          We will check how such functionality can be added to the existing one (beta version was released to collect such recommendations :), so thank you for your suggestion :)

          • Terry July 8, 2010 at 11:52 pm

            Ivan,

            I, too, would greatly like the functionality mentioned here. Having an invalidMessage parameter (and perhaps even a validMessage parameter) would be very useful!

  4. Nassim Bennouna March 29, 2010 at 5:24 am

    Hi,

    This is very interesting.
    How ever i culdn’t manage to do a lot of things :
    1/ equivalent
    2/when we apply on a button element a “validate” command :
    {type: “button”, name: “button_submit”, value: “Valider”, command: “validate”}
    the attachEvent(“onButtonClick”) is never called
    Also i couldn’t manage to call a custom function :
    {type: “button”, name: “button_submit”, value: “Valider”, command: “customCommand”}
    […]
    function customCommand(){
    alert (“Hi There!”);
    }
    bu then the onButtonClick is fired
    3/when is try to submit the form in “get” :
    this.send(“login.php”,”post”,function(xml){
    alert (“Saved”);
    });
    I can see in the web server logs that the form elements are not sent as arguments
    In addition to that the page form is “disabled” and no action is then possible. The alert “saved” doesn’t popup
    Wen we replace “get” by “post” the page doesn’t freeze and the alerts shows up (but i didn’t test if the form args args are submitted)

    4/css problems with the dhc_dark and dhx_blue templates prevent button images from displaying.

    Good work. Can’t wait for the next release …

    • ivan March 29, 2010 at 7:14 am

      Nassim,

      Thank you for the feedback.

      1. Could you please clarify what you mean by “equivalent”?

      2. For the button, custom command is not a function, but a parameter. It means that in any case onButtonClick will be called, and it will use the value of parameter command (in your case it will be customCommand)

      3. We’ll check what can cause this problem.

      4. We’ll be fixed in the official release.

  5. Nassim Bennouna March 29, 2010 at 10:21 am

    Hi !
    1- By equivalent i mean how to you configure dhtmlxform for ?
    In the documentation i only found
    * checkbox;
    * radio for radio button;
    * input for text input field and textarea;
    * select for dropdown lists;
    * label for sector titles;
    * file for file upload control;
    * button
    * hidden

    2- Thanks for the explanation. How ever still is it normal that onButtonClick is not called when the command is “validate” for the button definition ?

    3- I also checked with post and no data is submitted.
    Here is my code :
    […]

  6. Nassim Bennouna March 29, 2010 at 10:24 am

    Sorry for the last post. All html tags were stripped by the validation process …
    For 1- I meant how do you configure input type=”password” name=”password” value=””

    Thx again

    • ivan March 30, 2010 at 4:47 am

      Nassim,

      1. Input type “password” is currently missing in dhtmlxForm, but it will be added in the official release.

      2. “is it normal that onButtonClick is not called when the command is “validate” for the button definition ?”
      Yes, onButtonClick is not called for the standard commands. Please check the docs:
      http://docs.dhtmlx.com/doku.php?id=dhtmlxform:event_onbuttonclick

      3. We’ll investigate your code.

  7. banmidou March 30, 2010 at 1:44 am

    How can i integrated dhtmlxform with some Web editor such as FCKeditor,TinyMCE…
    Thanks.

    • ivan March 30, 2010 at 5:46 am

      Could you please explain how you imagine such integration?

  8. banmidou March 31, 2010 at 2:29 am

    I want to integrate Textarea field with TinyMCE or FCKeditor in dhtmlxform when i load data from a table in database. But i don’t know how to do it .
    Thanks.

    • ivan April 1, 2010 at 2:24 am

      Sample related to this question has been sent to your email address.

      • Joe April 15, 2010 at 4:23 am

        I am also interested in integrating an FCKEditor element into DHTMLXForm.

        • ivan April 15, 2010 at 4:39 am

          We’ve sent you the sample.

          • jc May 18, 2010 at 11:49 pm

            Hellow :)

            Can you send me this sample ?

            Thanks, JC :)

          • johann November 15, 2011 at 12:37 am

            Hi!

            Im also interested in TinyMCE Integration! Please send me the example.

          • Dennis February 22, 2012 at 9:48 am

            I am also interested in integrating an FCKEditor element into DHTMLXForm. can you send me the samples?

          • Hoda June 29, 2012 at 7:48 pm

            I also would very much need this integration. Could you please send me a sample too? Thanks in advance

      • Raymond May 21, 2012 at 5:41 am

        I am interested in integrating FCKEditor with DHTMLX. Would you please make the sample available either as a download link or sent to the email address provided. Thnx

  9. dhtmlxForm. Filling the Gap. | Source co... April 10, 2010 at 7:33 am

    […] the original here: dhtmlxForm. Filling the Gap. If you enjoyed this article please consider sharing […]

  10. Joe April 15, 2010 at 9:10 am

    Is it possible to call form validation on individual form elements when they are changed? The only function I can see exposed now is myform.validate() which fires all validation. I would like to do something like

    myform.attachEvent(“onChange”, function (id, value){
    myform.validate(id);
    });

    Also, it would be nice to be able to apply these event handlers to form elements in pre-existing html forms, not only created elements.

    • ivan April 16, 2010 at 1:36 am

      The possibility to call form validation on individual form elements will be available in the final version of dhtmlxForm (will be released in May or June).

      • Terry July 8, 2010 at 11:56 pm

        How close are we? I’m starting a new project using dhtmlxForm (beta).

        • ivan July 9, 2010 at 3:59 pm

          If everything goes well, we’ll release a new version of dhtmlxSuite with dhtmlxForm component in the end of the next week.

          • Terry July 9, 2010 at 7:55 pm

            Great! Will the idea of invalidMessage make it into dhtmlxForm for this release?

  11. P. Spence April 18, 2010 at 7:53 am

    Will dhtmlxForm be a supported component of dhtmlxConnector?

    • ivan April 19, 2010 at 1:28 am

      dhtmlxForm package already includes the connector, so yes, it will be supported in the final release as well.

  12. gss007 April 25, 2010 at 5:05 pm

    oh…. very good , but it’s big, will load more slowly

    • ivan April 26, 2010 at 10:10 am

      It takes about 10kb in gzipped state – must not be a problem even for a slow connection.

  13. Nickie West April 27, 2010 at 1:31 pm

    Is there any future plans to integrate Excell into forms? We have several custom formatters for things like traffic (Gb/s etc) and it would be nice to be able to use these. As would being able to use things like calendarA etc.

    • Nickie West April 27, 2010 at 7:07 pm

      Also I notice that Firefox (both Windows and Unix versions) don’t allow double mouse click in an input item to select all the data. Probably a firefox thing, just wondering if anyone has a work around?

      • ivan April 28, 2010 at 2:03 am

        Thanks for reporting this problem. We’ll add the fix to the final release.

    • ivan April 28, 2010 at 2:02 am

      Nickie, we might add this functionality in the future, but for now we don’t have such plans.

  14. Nickie West May 7, 2010 at 1:39 am

    When trying to fire validate on an individual element, I found while debugging that the name returned was always the config_reset in the name var regardless of which button was activated.

    ConfigureForm.attachEvent(“onButtonClick”, function(name,command){
    if(name==”config_submit”){
    ConfigureForm.validate();
    }
    });

    Any suggestions?

    • Nickie West May 7, 2010 at 1:40 am

      oops, post dropped the xml…
      item type=”button” name=”config_submit” value=”Submit”
      item type=”button” name=”config_reset” value=”Reset Form”

      • ivan May 11, 2010 at 9:05 pm

        Nickie, a working demo with updated dhtmlxform.js has been sent to your email address.

  15. Pit May 18, 2010 at 11:15 am

    How can I collect all the values from a form?

    The forEachItem() collector function does not pass the “name” as it is documented, but a “technical” id instead.

    And the getItemValue()-function does not accept this id.

    Some API functions work with the id, some with the name.

    But anyway, dhtmlxForms is great!

    • ivan May 28, 2010 at 3:37 pm

      Pit,

      Technical id is generated automatically if name is not specified (it performs the role of the name, i.e. you can apply to it the same way).

      getItemValue exists only for input-element

      Everything works good on our side. Maybe you are trying to call getItemValue not for input?

  16. Terry July 9, 2010 at 11:56 pm

    Just found a major flaw in the beta dhtmlxForm validation routine.

    If I have a hierarchial form, such as:

    var formData = [
    {type: “radio”, name: “customer”, value: “returning”, label: “Returning Customer”, checked: true, list:[
    {type: “input”, name: “username”, label: “User Name”, validate: “NotEmpty”},
    {type: “input”, name: “password”, label: “Password”}
    ]},
    {type: “radio”, name: “customer”, value: “new”, label: “New Customer”, list:[
    {type: “input”, name: “username”, label: “User Name”, validate: “NotEmpty”},
    {type: “input”, name: “password”, label: “Password”, validate: “NotEmpty”},
    {type: “input”, name: “confirmpassword”, label: “Confirm Password”, validate: “NotEmpty”},
    {type: “input”, name: “email”, label: “Email Address”, validate: “NotEmpty”},
    {type: “input”, name: “confirmemail”, label: “Confirm Email Address”, validate: “NotEmpty”},
    {type: “input”, name: “city”, label: “City”, validate: “NotEmpty”},
    {type: “input”, name: “state”, label: “State”, validate: “NotEmpty”}
    ]}
    ];

    and I have the first radio button selected and the first two fields filled out, this form will fail validation since the disabled fields are empty.

    • ivan July 12, 2010 at 1:58 pm

      Thank you for reporting this issue. It will be fixed in the final version (hopefully it will be released in the end of this week).

      • Terry July 21, 2010 at 5:34 pm

        How is the final version release coming?

        • ivan July 23, 2010 at 9:23 pm

          The update has been released today.

  17. Jayanto Chua August 14, 2010 at 1:56 pm

    In real live, web base application try to do like desktop application, but it’s not easy. So, when I try to re-write my application, first I looking for control/component that do like desktop application.

    So most wanted control/component:
    1. Edit just for Currency or Numeric
    2. Date Edit, just one component no need to add more script
    3. Look Up Field link with Windows

    It would be great if you can add this component or control

  18. Prashant Shetty September 2, 2010 at 1:05 pm

    it’s also possible to attach the handler to a ready HTML form to apply dhtmlxForm validation, completion, and database binding capabilities.

    Has any one been able to use this feature of dhtmlx form

    Please help me out how to go about it

    It’s pros and cons.

    Thanks All

    • Inga September 2, 2010 at 4:37 pm

      Yep, it’s possible. Just init dhtmlxForm by using existing form as target container. Please check the samples:
      samples4_validate1_simple.html
      samples5_data1_load.html

  19. Hatem December 19, 2011 at 1:52 pm

    Great work, but is it possible to add extra form elements with javascript during run time ?

    also I find it annoying not to be able to add normal HTML tags…

    • Mike Bremberg December 19, 2011 at 4:15 pm

      VCurrent version doesn’t support this. But you can add all necessary controls initialy and hide those you do not need. In other words you can show/hide elements when necessary.

Leave a Reply