Adding input fields dynamically based on user choice

Question

I have a FieldItems dictionary in ASP.NET model and this dictionary has values as below.

Age - checkbox, Name - text, Company - text

In my view file I was creating controls based on key, value pair which are available in the dictionary.

<div class="@Model.CssClass sf-fieldWrp">
<table>
    <tr>
        <td>
            <table>
                @foreach (var item in Model.FieldItems)
                {
                    <tr>
                        @if (item.Value == "checkbox")
                        {
                            <td>@item.Key</td>
                            <td> <input id="associationCheckbox" type="@item.Value" name="@item.Key" placeholder="@item.Key" value="false"/></td> 
                        }
                        else
                        { 
                            <td>@item.Key</td>
                            <td> <input type="@item.Value" name="@item.Key" value="@Model.Value" placeholder="@item.Key" /> </td>
                        }
                    </tr>
                }
            </table>
        </td>

        <td>
            <span>
                <button type="button" class="btn btn-success" style="float:none;cursor:pointer" ng-click="RemoveWidget()">AddPerson</button>
            </span>
        </td>
    </tr>

</table>
<span>
    <button type="button" class="btn btn-danger" style="float:none;cursor:pointer" ng-click="AddWidget()">Remove</button>
</span>

</div>

Now my requirement for me is to include/remove the chosen fields based on button click. Rough design looks as below. Could you please provide few suggestions for this implementation?

Please check images in this order. 1. Initial 2. AfterAdd 3. AfterRemove

Intial

AfterAdd

AfterRemove

Images Link:

Thanks, Balu

Please post your initial code at least and ask for help where you stuck. — Bhushan Kawadkar
– Bhushan Kawadkar, Commented Jul 18, 2016 at 10:31
Hi, I am new to ASP.NET mvc. You just suggest me the ways so that I can try else Please give me sometime. — Balanjaneyulu K
– Balanjaneyulu K, Commented Jul 18, 2016 at 10:34
Which framework are you targetting to handle this? You seem to have used Angular for some nifty clientside stuff, but it sounds like you are asking an MVC question? .. You should really be using Angular/javascript to clone stuff on the client, if you wish to continue using Angular. — Brunis
– Brunis, Commented Jul 18, 2016 at 10:48

Brunis · Accepted Answer · 2016-07-18 10:45:34Z

1

that is a very simple matter of using jQuery's .clone() and .remove() functions.

I created a plunker to demonstrate here: http://plnkr.co/edit/Kf0Vxn?p=preview

Right now it just clones the last one, including values.

Hope that helps.

answered Jul 18, 2016 at 10:45

Brunis

1,0738 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Balanjaneyulu K Over a year ago

Hi Bruins, Thank you so much. The solution which you have provided works me perfectly. However, I have a small requirement on your solution. Below one is Jsbin code. I have cloned your solution. jsbin.com/tuxacitoju/1/edit?html,output 1. Open the link. 2. Click “Adperson” 3. Now click Remove two times. Observe, all control are removed and then you are not allowed to add controls. My page should have at least one set of controls. Can you please have a look at my requirement. Thanks, Balu

Brunis Over a year ago

@Balu no, i can't, this is not a "create others work for free" website.

Collectives™ on Stack Overflow

Adding input fields dynamically based on user choice

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related