How to dynamically add a div using JQuery?

I have the following html which displays 3 textboxes and an add button:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
    <div id="line-item">
    <asp:TextBox ID="txtLineNumber" runat="server"></asp:TextBox>
    <asp:TextBox ID="txtQty" runat="server"></asp:TextBox>
    <asp:TextBox ID="txtItemCode" runat="server"></asp:TextBox>
    <asp:ImageButton ID="imgBtnAddNewLineItem" ImageUrl="~/images/add_button.jpg" 
    runat="server" />
   </div>
   </div>
   </form>

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2
   /jquery.min.js">
   </script>
   <script src="js/invoice.js" type="text/javascript"></script>
</body>
</html>

When the user clicks the add button, I want to create another div with the line-item id and put it on the next line. I created a js file, but I am not sure how to do it?

Here is what I have so far:

var itemCount = 0;

function getLineItem(number) {
    var div = document.createElement('div');

   $(div).attr("id", "lineitem" + number);
   var t1 = getTextbox("txt" + number.toString() + "1");
   var t2 = getTextbox("txt" + number.toString() + "2");
   var t3 = getTextbox("txt" + number.toString() + "3");

   $(div).append(t1);
   $(div).append(t2);
   $(div).append(t3);

   return $(div);
}

function getTextbox(id) {
    var textbox = document.createElement('input');
    $(textbox).attr("id", id);
    return $(textbox);
}


var lineItemCount = 0;

   $('#imgBtnAddNewLineItem').click(function() {

    lineItemCount++;

   $('#line-item').clone().attr('id',getLineItem(lineItemCount)).appendTo('#container');
    });
});

Contents hide

Answers:

Method 1

Method 2

Method 3

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

$(document).ready(function() {
    $('#imgBtnAddNewLineItem').click(function() {
        $('#container').append('<div></div>');
    });
});

Update 2

Create a normal button like so:

<input type="button" id="imgBtnAddNewLineItem" value="Add lineitem" />

Update ** This is also updated with comments etc.. **

//Count the lineItems to make sure they are unique
var lineItemCount = 0;

//On document ready 
$(document).ready(function() {
    //On button click
    $('#imgBtnAddNewLineItem').click(function(e) {
        /*
           ADD THE FOLLOWING LINE TO PREVENT THE POSTBACK
           P.S. - Make sure you pass -e- to this function... 

         */
         e.preventDefault();



         //Increase the lineitemcount
         lineItemCount++;
         //Add a new lineitem to the container, pass the lineItemCount to make sure getLineItem() can generate a unique lineItem with unique Textbox ids
         $(container).append(getLineItem(lineItemCount));
    });
});

//Create a new DIV with Textboxes
function getLineItem(number) {
    var div = document.createElement('div');
    //Give the div a unique id

    div.setAttribute('id','lineitem_' + number);

    //pass unique values to the getTextbox() function
    var t1 = getTextbox('txt_' + number + '_1');
    var t2 = getTextbox('txt_' + number + '_2');
    var t3 = getTextbox('txt_' + number + '_3');

    div.appendChild(t1);
    div.appendChild(t2);
    div.appendChild(t3);

    return div;
}

//Create a textbox, make sure the id passed to this function is unique...
function getTextbox(id) {
    var textbox = document.createElement('input');
    textbox.setAttribute('id',id);
    textbox.setAttribute('name',id);
    return textbox;
}

Method 2

Try something like this:

$(document).ready(function() {
  $('#imgBtnAddNewLineItem').click(function() {
    var container = $("#container");
    var line = $('#line-item').clone().attr("id", "line-item-2")
    var lineCount = container.children().length + 1;
    line.attr("id", line.attr("id") + "-" + lineCount);
    line.find(":text").each(function() {
      // IDs need to be unique
      $(this).attr("id", $(this).attr("id") + "-" + lineCount);
      $(this).attr("name", $(this).attr("name") + "-" + lineCount);
      // clear the value since we're cloning a line that may have values in it
      $(this).val("");
    });
    container.append(line);
  });
});

Note: you need to change the id.

Method 3

You can use .append() method or .html()

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating