How to generate a form

Question

How can I duplicate the following form using MVC C# and ajax when I click on --> <input type="submit" value="Add another form" class="btn btn-default" />

For example if I click on a button 5 time, I want 5 form to be generated.

I want the user to add more clients instead of looping from inserting client information then submit, again with the same process.

Form to be duplicate -->

@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    {
        <div class="form-group">
            @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Phone_Number, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Phone_Number, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Phone_Number, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>
        </div>
        <hr />
        <br />


    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}

You can only submit one form at at time so this would make no sense. If you want to dynamically add items to a collection, I suggest you use the `BeginCollectionItem` helper method - refer [this answer](http://stackoverflow.com/questions/40539321/a-partial-view-passing-a-collection-using-the-html-begincollectionitem-helper/40541892#40541892) for an example — , May 21 '17 at 22:01

score 1 · Answer 1 · answered May 21 '17 at 20:19

with jquery using .clone() and .append() . You need to change the ids of your inputs also.

var inputIndex = 1;

$('.add').click(function(){
  inputIndex = inputIndex + 1;
  var inputIndexStr = inputIndex.toString();
  var inputClone = $('.inputDiv:first-child').clone();
  $(inputClone).find('input').val('').attr('id','input' + inputIndexStr + '');
  $('form').append(inputClone);
});

.add{
  color: red;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="inputDiv">
  <div>CLIENT NAME</div>
  <input id="input1" type='text'>
</div>
</form>
<div class="add">ADD NEW CLIENT</div>

Hello there, How do I clone a view with HtmlHelpers and @model List — shubhum230, May 22 '17 at 16:41

How to generate a form

1 Answers1