Gaurav Chauhan Gaurav Chauhan - 3 months ago 13
CSS Question

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

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?

Answer

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

Comments