Introduction
In this article I will create an application for creating the form. Here we provide the number of the creating form. There is also two buttons visible, "Remove Form" and "Remove All Forms". When we click on the "Remove Form" button then only one form is removed from the list at a time. And when we click on the "Remove All Froms" button then all the forms are deleted from the list.
Now let's see how to create the application.
- First we need to create an application as in the following:
- Start Visual Studio 2013.
- From the Start window select "New Project".
- Select "Installed" -> "Template" -> "Visual C#" -> "Web" -> "Visual Studio2012" and select the template as in the following:
![Create Web Application]()
- Click on the "OK" button.
- Now add the HTML page to the project.
- In the Solution Explorer.
- Right-click on the project and select "Add" -> "HTML Page".
![Add HTML Page]()
![Change Name]()
- Then click on the "OK" button.
Add the following code:
<!DOCTYPE html>
<html>
<head>
<title>Backbone.Form example</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="js/backbone-forms.js"></script>
<script src="main.js"></script>
</head>
<body>
<script id="frm-temp" type="text/html">
<form data-fieldsets>
Form <%= number %>
</form>
</script>
<div>
<input class="number" value="1" />
<button class="create">CreateNewForm</button>
</div>
<div>
<button class="remove">RemoveForm</button>
<button class="remove-all">Remove all Forms</button>
</div>
</body>
</html>
- Now add the JavaScript as in the following:
- In the Solution Explorer.
- Right-click on the project then select "Add" -> "New Item" -> "JavaScript".
![Add JavaScript file]()
- Click on the "Add" button.
Add the following code:
$(function () {
var TestForm = Backbone.Form.extend({
template: _.template($('#frm-temp').html()),
templateData: function () {
return { number: this.options.number };
},
schema: {
UseTitle: { type: 'Select', options: ['Mr', 'Mrs', 'Ms'] },
UserName: 'Text',
DateOfBirth: 'Date',
Email: 'Text',
Password: 'Password'
}
});
var forms = window.forms = [];
function createForm() {
var form = new TestForm({
templateData: {
number: forms.length + 1
}
}).render();
forms.push(form);
$('body').append(form.el);
}
function removeForm() {
var form = forms.shift();
form.remove();
}
$('.create').click(function () {
var number = parseInt($('input.number').val(), 10);
_.times(number, createForm);
});
$('.remove').click(removeForm);
$('.remove-all').click(function () {
for (var i = 0, len = forms.length; i < len; i++) {
removeForm();
}
});
});
- Now execute the application.
![displayform]()
Now input the number of forms in the TextBox that you want to create.
![Create2Forms]()