Create a Form Dynamically using Dform and jQuery

If you have ever used Google forms, you might have wondered how does it work. How an end-user can create there form dynamically. If these questions ever came across your mind, then this article can help you.

Prerequisite:

  • Basic of HTML and CSS
  • Basic of JQuery

The plugin which we are going to use here is dform. The jQuery.dForm plugin generates HTML markup from JavaScript objects and JSON for HTML forms.

What you can do with the dform plugin?

  • You can naturally, generate JavaScript-enhanced markup with your own extensions and custom types.
  • You can use JSON and JavaScript instead of HTML markup.
  • It’s an easy way to include JQuery UI elements.
  • Scaffold forms from business objects of your server-side framework.
  • For More Details you can refer here:  Click Here

How to use this plugin?



  • Create an empty file, name it index.js to use it in our HTML file.
  • Click here and copy the whole text, paste it in index.js.
  • Save index.js.
  • The plugin is ready to use.

Approach:

  • We will use type classifiers for adding form input fields.
  • See the myFunction1 and myFunction2 in code for used classifiers and their attributes. Each and every attribute could be used in the same way.
  • Types of Classifiers: All the type classifiers are sent in the function in JSON format. Here are some type classifiers:
Type JSON Format Description
text {“type” : “text”} Creates a text input field
number {“type” : “number”}  Creates an HTML 5 number input field
password {“type” : “password”} Creates a password input field
container

{“type” : “container”}

{“type” : “div”}

Creates a <div> container
hidden {“type” : “hidden”} Creates a hidden input element
file {“type” : “file”} Create a file upload field
radio button {“type” : “radio”} Creates a radio button
multiple radio buttons {“type” : “radiobuttons”} Creates a group of radiobuttons. (Used with option attributes in JSON)
checkbox  {“type” : “checkbox”} Creates a checkbox
checkboxes {“type” : “checkboxes”} Creates a group of checkboxes. (Used with option attributes in JSON)
url {“type” : “url”} Creates an HTML 5 url input field
tel {“type” : “tel”} Creates an HTML 5 phone number input field
email {“type” : “email”} Creates an HTML 5 email input field
reset {“type” : “reset”} Creates a reset button input element
submit {“type” : “submit”} Creates a submit button input element.

Example: Here is the basic example to show how this can be used.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <!-- Including jQuery -->
    <script src=
    </script>
      
    <!-- Including index.js that we 
        had just created -->
    <script type="text/javascript" 
        src="index.js">
    </script>
  
    <script>
        $(document).ready(function () {
  
            // Defining  myFunction1 
            $.fn.myFunction1 = function () {
                $("#myform").dform({
                    "html": [{
                        // Other attributes
                        "name": "username",
                        "id": "txt-username",
                        "caption": "username",
          
                        // Type Classifier
                        "type": "text",
                        "placeholder": 
                        "E.g. user@example.com"
                    },
                    { "type": "br" }
                    ]
                });
            }
            $(".call-btn-text").click(function () {
  
                // Calling myFunction1 on click 
                $.fn.myFunction1();
            });
        });
  
        $(document).ready(function () {
  
            // Defining  myFunction2 
            $.fn.myFunction2 = function () {
                $("#myform").dform({
                    "html": [{
                        // Other attributes
                        "name": "PhoneNumber",
                        "id": "num_phone",
                        "caption": "Phone Number",
          
                        // Type Classifier
                        "type": "number",
                        "placeholder": "E.g. 0123456789"
                    },
                    { "type": "br" }
                    ]
                });
            }
            $(".call-btn-number").click(function () {
  
                // Calling myFunction2 on click
                $.fn.myFunction2();
            });
        });
    </script>
    <form>
        <input type="button" class="call-btn-text" 
            value=" Click me to input text">
        <br>
        <input type="button" value=
            "Click me to input number" 
            class="call-btn-number">
        <br>
    </form>
    <form id="myform"></form>
</body>
  
</html>

chevron_right


Output:

Before Clicking the Button:

When the page loads

After Clicking First Button:

After Clicking First Button

After Clicking Second Button:

After Clicking Second Button

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.