CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mazin Al-Bahrani
Mazin Al-Bahrani

Reputation: 75

Change div id within a div using jQuery

I was able to successfully clone and remove certain part of my form thanks to David Carr - Duplicate form sections with jQuery

Now I have been trying to change two div ids (#ifYes & #ifNo) which are hidden to provide them with a unique id every time the form is cloned, I have added two line of coding to change the div ids which doesn't really work.

My code is as follows:

HTML:

<div id="content">
  <button type="button" id="cross" class="buttonImgTop cross"></button>
   <div id="ValuWrapper">
      <div id="ifYes"> .. </div>
      <div id="ifNo">  .. </div>
   </div>
</div>

<button type="button" class="buttonImg" id="repeat"></button>

JavaScript:

//define template
var template = $('#content:first').clone();


//define counter
var count = 0;

//add new section
$('body').on('click', '#repeat', function() {

//increment
count++;

//remove cross button div
template.clone().find('cross').removeAttr("#cross");

//update id of ifYes & ifNo
template.clone().find('#ifYes').attr("id", "#ifYes"+count);
template.clone().find('#ifNo').attr("id", "#ifNo"+count);

//loop through each input
var inputSection = template.clone().find(':input').each(function(){

    //set id to store the updated section number
    var newId = this.id + count;

    //update id
    this.id = newId;

}).end()

//inject new section with animation
.appendTo('#content').hide()
.appendTo('#content').slideDown(500)
return false;
});

//remove section
$('#content').on('click', '.cross', function() {
//slide up section
$(this).parent().slideUp(500, function(){
    //remove parent element (main section)
    $(this).parent().child().empty();
    return false;
});
return false;
});

Appreciate your assistance.

Upvotes: 1

Views: 2529

Answers (3)

Mohhamad Hasham
Mohhamad Hasham

Reputation: 2032

<html>
  <head>
    <title>Change Html Div ID Using jQuery</title>
 </head>
 <body>
    <div id="ChangeID"></div>
</html>

<script src="jQuery CDN"></script>
$(document).ready(function(){        
$('#ChangeID').attr('id', 'NewID')      
});
 <script>   

</body>
</html>

Upvotes: 1

Rakib
Rakib

Reputation: 643

Here is the fiddle: https://jsfiddle.net/zh7wejzb/

Here is the working example. Please have a look:

    <!DOCTYPE html>
<html>

<head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <meta charset="utf-8">
    <title>Test</title>
    <meta name="description" content="Fullscreen backgrounds with centered content">
</head>

<body>
    <div id="content">
        <button type="button" class="buttonImgTop cross">Cross</button>
        <div id="ValuWrapper">
            <div id="ifYes" class="yes"> .. </div>
            <div id="ifNo" class="no"> .. </div>
        </div>
    </div>
    <button type="button" class="buttonImg" id="repeat">Repeat</button>
    <script type="text/javascript">
    //define template
    var template = $('#content:first');


    //define counter
    var count = 0;

    //add new section
    $('body').on('click', '#repeat', function() {

        //increment
        count++;

        //remove cross button div
        var clone = template.clone()
            .appendTo('#content').hide()
            .slideDown(500);

        //update id of ifYes & ifNo
        clone.find('.yes').prop("id", "ifYes" + count);
        clone.find('.no').prop("id", "ifNo" + count);

        //loop through each input
        clone.find(':input').each(function() {

            //set id to store the updated section number
            var newId = this.id + count;

            //update id
            this.id = newId;

        }).end()


        return false;
    });

    //remove section
    $('#content').on('click', '.cross', function() {
        //slide up section
        $(this).parent().slideUp(500, function() {
            //remove parent element (main section)
            $(this).empty();
            return false;
        });
        return false;
    });
    </script>
</body>

</html>

Upvotes: 1

user4354205
user4354205

Reputation:

I have to do this sort of thing often. What I do is probably not ideal but it works. I do something like this...

function getRandomInt(000000, 999999) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var uniqueScriptID = “anythingStartingLowercase” + getRandomInt();

and then concatenate the entire script into a variable, but where the ID is written literally in the script, replace it with the uniqueScriptID variable.

You can then use that variable to throw out as many of those forms as you like, all with unique ID’s.

Hope that helps. That code is NOT tested at all.

Upvotes: 0

Related Questions