Hi,
I have a create view. in that view header fields are there. i.e,.
SLNO Name DOB Relationship. and four text boxes for 4 headers, if I clicked on "Add" only 4 text boxes should repeat. So for me 4 text boxes with header fields are repeating. I want to repeat only text boxes if I click on Add option. below is my code.
Please help me.
Thanks in Advance
What I have tried:
@Html.DisplayNameFor(model => model.fSLNO) | @Html.DisplayNameFor(model => model.fName) | @Html.DisplayNameFor(model => model.familyDOB) | @Html.DisplayNameFor(model => model.fRelationship) | Add |
@Html.EditorFor(model => model.fSLNO, new { htmlAttributes = new { @class = "form-control" } }) | @Html.EditorFor(model => model.fName, new { htmlAttributes = new { @class = "form-control" } }) | @Html.EditorFor(model => model.familyDOB, new { htmlAttributes = new { @class = "form-control" } }) | @Html.EditorFor(model => model.fRelationship, new { htmlAttributes = new { @class = "form-control" } }) |
<input type="submit" id="btnSubmit" />
<!--below Script-->
<script type="text/javascript">
$(function () {
$("#addRow").click(function (e) {
e.preventDefault();
var template = $("#items").find(".itemRow").first();
var newRow = template.clone();
newRow.find("input.formfield").val("");
$("#items").append(newRow);
});
$("#btnSubmit").click(function (e) {
e.preventDefault();
var _this = $(this);
var url =_this.closest("form").attr("action");
var rows = [];
var items = $(".itemRow");
$.each(items, function (i, item) {
var fSLNO = $(item).find("input[name='SLNo']").val();
var fName = $(item).find("input[name='Name']").val();
var familyDOB = $(item).find("input[name='DOB']").val();
var fRelationship = $(item).find("input[name='Relationship']").val();
var row = { fSLNO: SLNo, fName: Name, familyDOB: DOB, fRelationship: Relationship };
rows.push(row);
});
//Let's post to server
$.ajax({
type:"POST",
url: url,
data: JSON.stringify(rows),
contentType: "application/json"
})
.done(function (result) {
//do something with the result
})
});
});
</script>