how to append a number of dropdowns on button click with each dropdown having different indexing in name attribute?

Question

I am trying to append a number of dropdowns on Button click.These dropdowns should have proper indexing in its 'name' attribute.

This is the dropdown:-

<div id="dropdownDiv" style="display:none">
    <div class="form-group">
        @Html.LabelFor(model => model.PropertyInvestors, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.PropertyInvestors, (IEnumerable<SelectListItem>)@ViewBag.Investors, "Select Investor", htmlAttributes: new { @id = "dropdown",@name= "[#].PropertyInvestors", @class = "form-control",@onChange="dropdownChange()" })
            @Html.ValidationMessageFor(model => model.PropertyInvestors, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

This is the JS code that I am trying in order to clone the dropdown and replace its name attribute with desired indexing.

$('#addDropdown').click(function () {
    var index = (new Date()).getTime();
    var clone1 = $('#dropdownDiv').clone();        
    clone1.html($(clone1).html().replace(/\[#\]/g, '[' + index + ']'));
    $('#field1').append(clone1.html());
});

Problem:- The dropdowns are being appended as they are clicked but their name attributes are same for all of the dropdowns produced due to which I cant postback the data to the controller.

Look at the html that you generating. Your `new { @name= "[#].PropertyInvestors" }` does nothing at all (fortunately) - your generating `name="PropertyInvestors"` so the `.replace()` function has nothing to replace. — , Dec 21 '17 at 07:13
@StephenMuecke i was thinking of writing a dummy code in simple html for dropdown like you said yesterday.But I did not know what to do with <<(IEnumerable)@ViewBag.Investors>> part of the dropdown,so i tried this instead :/ — SudeepS, Dec 21 '17 at 07:17
My recommendation to you is to use the `BeginCollectionItem()` helper method and to make an ajax call to a method that returns a partial view that you add to the DOM as per as per [this answer](http://stackoverflow.com/questions/40539321/partial-view-passing-a-collection-using-the-html-begincollectionitem-helper/40541892#40541892). (while its possible to to do what you want, its going to become a nightmare to maintain) — , Dec 21 '17 at 07:21
@StephenMuecke okay,One quick question.In my case,I have a PropertyViewModel which contains FounderInvestmentViewModel. The dropdown items are extracted from PropertyViewModel.As you saw yesterday,after I select a dropndown item,textbox is appended and its value has to go to FounderInvestmentViewModel. Is the answer still same for my case? — SudeepS, Dec 21 '17 at 08:00
Sorry, not sure what you mean (and I still have not had a chance to add an answer for that question yet) — , Dec 21 '17 at 08:03
@StephenMuecke okay, if i create a partial view for the dropdown then the textboxes that should be appended when the dropdown 'Change' event occurs will also have to be partial?? — SudeepS, Dec 21 '17 at 08:12
Sorry, Its still unclear. When you select a number in the main dropdownlist, are you wanting to add (say) 3 textboxes and 3 associated dropdownlists to represent 3 records? — , Dec 21 '17 at 08:14
No! Okay let me try to say this more clearly. I have a "Add Button",upon clicking this button ONE dropdown gets appended.In this dropdown,there are a list of "names".I select one item from dropdown,upon selection (say) ONE textboxes gets appended. I again click THE "Add Button",another dropdown gets appended which has the same list of names.I select another name and again ONE textboxes gets appended.This is the proccess that I want :| — SudeepS, Dec 21 '17 at 08:20
Can you access and add comments to [this chat](https://chat.stackoverflow.com/rooms/161618/discussion-on-question-by-sudeep-shrestha-how-to-produce-n-no-of-text-boxes-h)? — , Dec 21 '17 at 08:22

score 1 · Accepted Answer · answered Dec 25 '17 at 15:55

While this problem can be solved by using dummy code and manipulating the Index no. by using JS, a good method would be to use Html.BeginCollectionItem() by creating a partial view for the dropdown and later making an ajax call to append the partial view to the main view. Refer to the answer HERE

Mittal Patel · Answer 2 · 2017-12-21T09:12:08.970

0

You can replace ID and Name as follows:

$('#addDropdown').click(function () {
    var index = (new Date()).getTime();
    var clone1 = $('#dropdownDiv').clone();        
    $(clone1).find('select').attr("id", index);      
    $(clone1).find('select').attr("name", "PropertyInvestor[" + index +"]");  
    $('#field1').append(clone1.html());
});

JSFiddler: https://jsfiddle.net/qj24yybe/6/

edited Dec 21 '17 at 09:12

answered Dec 21 '17 at 07:24

Mittal Patel

2,732
14
23

@ Sudeep Shrestha, I have updated the code and created sample JSFiddler. It adds the ID and name as the timestamp like – Mittal Patel Dec 21 '17 at 08:46
In order for the dropdown value to be posted back to the controller,shoudn't the name attribute look something like this: name="PropertyInvestor[#]" . – SudeepS Dec 21 '17 at 08:57
@ Sudeep Shrestha, I have updated the code and updated the JSFiddler link. Will this work for you? – Mittal Patel Dec 21 '17 at 09:12

how to append a number of dropdowns on button click with each dropdown having different indexing in name attribute?

2 Answers2