Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • create element with dynamic id on click event with jquery

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 8.04k
    Comment on it

    If you want to create multiple elements with dynamic id on click of button or an HTML element see below program for reference.

    /* The following html/jquery snippet will create multiple input boxes with dynamic id on clicking an individual element. */

    <html>
    <head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
    
            function addCounter() {     //this function set the counter variable value static.
            var cust_count = 0;
                return function() {
                    cust_count++;
                    return cust_count;   //return the incremented value on click
                };
            }
    
        var countVar = addCounter();
    
            $("#add-more").click(function(){   // click function of element having id named "add-more"
    
                var j = countVar();         // get the incremented value of counter from previous counter.
    
                $("#add-more-field").append('<li>'  //append the html with li tags inside the div/element having id named "add-more-field"
                  +'<div class="col-sm-12">'
                    +'<label>Drop Off Address or Landmark  </label>'
                    +'<input type="text" id="anotherdropoffAddrr_'+j+'" name="anotherdropoffAddrr[]" class="form-control">'   
                           // Here "j" will increased dynamically every time user clicked on the button.
                  +'</div>'
                +'</li>');
    
            });
         });
    </script>
    </head>
    <body>
    
        <div>
        
        <a id="add-more" class="add_more-stop btn-Rmore" href="javascript:void(0);">
            <span>Add Another Stop</span>
        </a>
    
        <ul id="add-more-field"></ul>
    
        </div>
    
    </body>
    </html>

 1 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: