In MVC: Copy view elements by jQuery and retrive value of them at relevant controller

This is my view:

@model PhoneBook.Models.Number
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<script src="../../Scripts/jQuery.AddNewNumber.js" type="text/javascript"></script>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.Contact.Id)
<fieldset>
    <legend>Number</legend>
    <div class="TargetElements">
        <div class="editor-label">
            @Html.LabelFor(model => model.PhoneNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PhoneNumber)
            @Html.ValidationMessageFor(model => model.PhoneNumber)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.NumberKind)
        </div>
        <div class="editor-field">
        @Html.DropDownListFor(model => model.NumberKind.Title, NumberKinds)
        </div>
    </div>
<p>
        <input class="AddNew" value="Add New" type="button" /></p>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
}

I need when press the "Add New" button All the elements in <div class="TargetElements"> Copied and in when press the submit button I can achieve all values.

At now i use this script:

$(document).ready(function () {
$('.AddNew').click(function () {
    $(".TargetElements:first").clone().insertAfter('.TargetElements');
});
});

but there is 2 problem with this: 1- when I add first time one div(include target elements) added but in second time two div added and grow in ascending 2- when copy the elements all the value of target element added but I need Empty inputs to add new value

How Can I fix the Script?

And finally I don't know how can I retrieve values of all element in my controller:

[HttpPost]
    public ActionResult Create(Number NewNumber, FormCollection collection) {
}

Answers


1- when I add first time one div(include target elements) added but in second time two div added and grow in ascending.

You insert the new field after every field that exist, take a look at: $(".TargetElements:first").clone().insertAfter('.TargetElements');

Should be: $(".TargetElements:first").clone().insertAfter('.TargetElements:last');

2- when copy the elements all the value of target element added but I need Empty inputs to add new value

There is no one that stops you from clearing the values with Javascript, just go through all the input elements in the new clone and clear their values.

function cloneTargetBox() {
    var targetBoxClone = $(".target-elements:first").clone();
    targetBoxClone.find("input").val(""); //Not sure this is the proper way, but hey, it works
    targetBoxClone.insertAfter(".target-elements:last")
}

Here is a code sample of what you want to achieve: http://jsfiddle.net/KVqW8/3/


Need Your Help

creating a regular expression to parse a file - Java

java regex

I have a log file I wanted to parse in the following format:

Accessing downstream annotations of a node in Rascal

rascal

Simple question: in Rascal how does one access annotations of descendants of a node? GetTraversalContextNodes() returns upstream nodes -- "myContext[-1]" doesn't work. getChildren() returns a lis...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.