How to update id and name of html element inside div element?

Question

I have following html code. It is generated by Razor engine. This is dynamic. I mean the no of elements in drop down may vary according to user. I need to replicate this drop down exactly below the same drop down with new id and new name. I have looked here, here,here and here. Following is my html. I have added comments in code for more clarification.

<!-- the entire section with id and name template needs to be copied -->
<div id="template" name="template" class="form-group unique">
  <label class="control-label col-md-2" for="Course">Course</label>
  <!-- the drop down below has id and name as Course[0].Title
I need to increment index inside []  -->
  <div class="col-md-10">
    <select class="form-control drop valid" id="Course[0].Title" name="Course[0].Title">
      <option value="1">Statistics</option>
      <option value="2">Trigonometry</option>
      <option value="3">Biology</option>
      <option value="4">Neurology</option>
      <option value="5">Applied</option>
      <option value="6">Theoretical</option>
    </select>
  </div>
</div>

Now I came up with following jQuery code. It copies only once and then stops working. I checked in console and there is no error. The javascript code with comments for clarification is as follows.

< script src = "~/Scripts/jquery-1.10.2.min.js" > < /script>
<script type="text/javascript
">
    
    $(document).ready(function () {
 //copy the section with class name unique
        var clone = $('.unique').clone();
 //Copy again as i am modifying the id,name of div with unique class
        var clone2 = $('.unique').clone();  
 //initialize the index with 1, the item with 0 index is already in webpage.
        var i = 1;
 //Change name of drop down who has class drop and assign new name
        $(".unique ").find(".drop ").attr("
name ", "
Course[0].Title ");
 //Change id of drop down who has class drop and assign new id
        $(".unique ").find(".drop ").attr("
id ", "
Course[0].Title ");
 //on click of plus button, i add clone of drop down with parent div section and with new id and name
        $("#
plus ").click(function () {
 //Add after the element which has class unique
            $('.unique').after(clone2);
 //Find name inside unique and update
            $(".unique ").find(".drop ").attr("
name ", "
Course[" + i + "].Title ");
 //Find id inside unique and update
            $(".unique ").find(".drop ").attr("
id ", "
Course[" + i + "].Title ");
 //Increment the index
            i = i + 1;
        });

    });
</script>

Whats wrong in the script?

Vincent G · Accepted Answer · 2016-04-08T12:30:49.043

2

Is that what you wants ? There was some typo errors when setting attr("name") and attr("id")

Also here's my code to get the insert works as much as you wants :

I clone the element in the click() event to make it works.

$(document).ready(function () {
//initialize the index with 1, the item with 0 index is already in webpage.
    var i = 1;
    $("#plus").on('click', function () {
//Add after the element which has class unique
        var clone2 = $('#template').clone();  
        $("#template").after(clone2);
        $(clone2).attr('id',"template"+i);
        $(clone2).attr('name',"template"+i);
//Find name inside unique and update
        $(clone2).find(".drop ").attr("name", "Course[" + i + "].Title ");
//Find id inside unique and update
        $(clone2).find(".drop ").attr("id", "Course[" + i + "].Title ");
//Increment the index

        i++;
    });
});

See this fiddle

edited Apr 08 '16 at 12:30

answered Apr 08 '16 at 12:13

Vincent G

8,547
1
18
36

This works. i am not getting values in my controller. there might be something more to look up. I am checking. once i am done i will accept the answer. Appreciate the efforts. – Gaurav Chauhan Apr 08 '16 at 12:48
You're welcome. I also change the attr `id` and `name` of the `.unique` class you clone in your code because ID must be unique. – Vincent G Apr 08 '16 at 13:00
Yes. That i noticed. It is perfect. – Gaurav Chauhan Apr 08 '16 at 13:10
are you familiar with ASP.NET MVC? can you look here:https://stackoverflow.com/questions/36514111/how-to-receive-dynamically-added-values-from-view-to-controller-in-asp-net-mvc I am not sure asking like this is real practice but it is related with this question so asked. Thanks again. – Gaurav Chauhan Apr 09 '16 at 07:42
I read your other question but I'm not using ASP.NET at all, so sorry couldn't help on this point. – Vincent G Apr 09 '16 at 08:01
Thanks. This answer helps a lot. – Gaurav Chauhan Apr 09 '16 at 08:02

score 1 · Answer 2 · answered Aug 13 '16 at 06:32

1

You could post data via js but elements which has been added by js dynamically would not be returned to mvc action!

answered Aug 13 '16 at 06:32

Aidin A

33
7

score 0 · Answer 3 · answered Apr 08 '16 at 12:38

try using for loop sir

First, setup your select inside a div for instance:

<div class="select-inside">
   <select>
     <option value="1">Statistics</option>
     <option value="2">Trigonometry</option>
     <option value="3">Biology</option>
    <option value="4">Neurology</option>
    <option value="5">Applied</option>
    <option value="6">Theoretical</option>
   </select>
</div>

In your script, store the select element to a var using jquery selector. Then, use a for loop to clone the select element and append to the document.

var select = $(".select-inside select");

for(var i = 0; i < numberOfYourChoice; i++) {
     var clone = select;
     clone.attr("id", "id[" + i + "]");
     clone.attr("name", "name[" + i + "]");
    document.append(clone);
}

This is Razor (https://en.wikipedia.org/wiki/ASP.NET_Razor) generated code. I need all the section, not just div, which includes label, an outer div with id template and inside drop down.i need to copy based on user selection. so how can i find "numberOfYourChoice" ? — Gaurav Chauhan, Apr 08 '16 at 12:47

score 0 · Answer 4 · answered Aug 13 '16 at 06:28

< script src = "~/Scripts/jquery-1.10.2.min.js" > < /script>
<script type="text/javascript
">
    
    $(document).ready(function () {
 //copy the section with class name unique
        var clone = $('.unique').clone();
 //Copy again as i am modifying the id,name of div with unique class
        var clone2 = $('.unique').clone();  
 //initialize the index with 1, the item with 0 index is already in webpage.
        var i = 1;
 //Change name of drop down who has class drop and assign new name
        $(".unique ").find(".drop ").attr("
name ", "
Course[0].Title ");
 //Change id of drop down who has class drop and assign new id
        $(".unique ").find(".drop ").attr("
id ", "
Course[0].Title ");
 //on click of plus button, i add clone of drop down with parent div section and with new id and name
        $("#
plus ").click(function () {
 //Add after the element which has class unique
            $('.unique').after(clone2);
 //Find name inside unique and update
            $(".unique ").find(".drop ").attr("
name ", "
Course[" + i + "].Title ");
 //Find id inside unique and update
            $(".unique ").find(".drop ").attr("
id ", "
Course[" + i + "].Title ");
 //Increment the index
            i = i + 1;
        });

    });
</script>

How to update id and name of html element inside div element?

4 Answers4

Linked