ASP.NET MVC Ajax extensible form using jquery
My jquery knowledge is not very extensive, but what I am trying to do is allow the user to click a button on the form to add more fields to the form to be submitted to that form ... Something similar to how gmail is used to handle email attachments mail adding a bunch of input fields for each file, who has some pointers on how to do this?
source to share
For a button with id = "buttonId" and a div where you want to put your new fields in id = "contentDiv":
$('#buttonId').click(
function() {
$('<div>someinput, like textboxes ecc</div>')
.appendTo($('#contentDiv'));
}
);
With this syntax, you can directly work with new content, for example:
$('#buttonId').click(
function() {
$('<div>someinput, like textboxes ecc</div>')
.hide()
.appendTo($('#contentDiv'))
.fadeIn('fast');
}
);
This way the new content disappears rather than just being displayed.
source to share
Without writing all the code for you, create a container like a div inside your form.
<div id="morefields"></div>
Keep global var c # fields
var fieldCount = 0;
Then add to the html of this div
fieldCount++;
var id = 'fieldname' + fieldCount;
var fields = $("#morefields").html() + "<input id='" + id + "' name = '" + id + "' />";
$("#morefields").html( fields);
ask the controller function to accept the FormCollection as a parameter, read the fields.
Hopefully this is a cleaner way someone will post. This is how I did it before. The code cannot compile, write from memory, but you get the gist.
source to share
Using jQuery,
Static form data
You can .show () and .hide () DIV push the button. This will allow you to toggle the display of additional DIV information.
or
Dynamic Form Data Using .load () you can dynamically load content from file / server and use .html () to add it to your form.
Write back which one you want to do with and I will provide you with more information.
source to share