Create a Form Dynamically using Dform and jQuery
Last Updated :
14 Feb, 2023
If you have ever used Google forms, you might have wondered how does it work. How an end-user can create their 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
<!DOCTYPE html>
<html>
<body>
<!-- Including jQuery -->
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</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. [email protected]"
},
{ "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>
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
Similar Reads
How to Dynamically Add Select Fields Using jQuery? Select Fields can be added dynamically using jQuery. This increases the flexibility and interactivity of web forms, allowing users to add or remove options as needed. In this article, we will learn two different approaches to Dynamically Add Select Fields Using jQuery. These are the following approa
3 min read
Create a Div Element using jQuery In this article, we will see how to create a <div> element using jQuery. We can create a div element with the following steps: Steps to Create a Div ElementCreate a new <div> element.Choose a parent element, where to put this newly created element.Put the created div element into the par
2 min read
How to create an HTML element using jQuery ? In this article, we will see how to create an HTML element using jQuery. To create and append the HTML element, we use the jQuery append() method. The jQuery append() method is used to insert some content at the end of the selected elements. Syntax: $(selector).append( content, function(index, html)
2 min read
How to Create a Form Dynamically with the JavaScript? The task is to create an HTML form dynamically with the help of JavaScript. There are two approaches that are discussed below.Approach 1: Use document.createElement() to create the new elements and use setAttribute() method to set the attributes of elements. Append these elements to the <form>
3 min read
How to create a Form Popup using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a form popup using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=âstylesheetâ href=âh
2 min read