CODEWITHSUNDEEP
javascriptjquery
Alen
Alen

Reputation: 1291

jquery adding divs twice

I have created a jquery function that adds a div along with fields inside it. First time I click it, it adds one div but when I click second time it adds two divs and it should only add one.

What I am doing, is that I am counting the divs and then adding 1 and then attaching new count along with ids of fields. Can anyone check and tell why this is giving unexpected behaviour?

$(".add_product").click(function(e) {
  e.preventDefault();
  var div_count = $(".product_fields").length;
  alert(div_count);
  var new_div_count = (div_count + 1);
  $(".product_fields").append('<div class="product_divs"><div class="product_fields"><h5>Item ' + new_div_count + '</h5><div class="input-field"><input type="text" id="item_name_"' + new_div_count + '" name="item_name[]" required><label for="item_name_1">Item Name</label></div><div class="row"><div class="col s4"><div class="input-field"><input type="text" id="item_quantity_"' + new_div_count + '" name="item_quanity[]" required><label for="item_quantity_1">Item Quantity</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_cost_price_"' + new_div_count + '" name="item_cost_price[]" required><label for="item_cost_price_1">Item Cost Price</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_retail_price_"' + new_div_count + '" name="item_retail_price[]"><label for="item_retail_price_1">Item Retail Price</label></div></div></div></div></div>');

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col s7 product_field_div">
  <div class="product_divs">
    <div class="product_fields">
      <h5>Item 1</h5>
      <div class="input-field">
        <input type="text" id="item_name_1" name="item_name[]" required>
        <label for="item_name_1">Item Name</label>
      </div>
      <div class="row">
        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_quantity_1" name="item_quanity[]" required>
            <label for="item_quantity_1">Item Quantity</label>
          </div>
        </div>

        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_cost_price_1" name="item_cost_price[]" required>
            <label for="item_cost_price_1">Item Cost Price</label>
          </div>
        </div>
        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_retail_price_1" name="item_retail_price[]">
            <label for="item_retail_price_1">Item Retail Price</label>
          </div>
        </div>
      </div>

    </div>
  </div>


  <div class="action_div"><a href="#" class="add_product">Add new product</a></div>
</div>

Upvotes: 1

Views: 102

Answers (4)

Amit Bhagat
Amit Bhagat

Reputation: 4300

Istead of $(".product_fields").append

use $(".product_field_div > .action_div").before

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65808

You should only be appending new products, not the container div elements as well. This is throwing your counter off.

Also (just a side note). You should not use HTML heading elements (h1...h6) because of the way they make the text look. That is the job of CSS. Use headings to denote sequential sections and sub-sections.

Lastly, only use <a> elements when you want navigation. If you need something to click on to trigger an action, just about any element supports a click event. In the code below, the a has been removed and just the div is the clickable thing. This also eliminates the need for e.preventDefault().

$(".add_product").click(function(e) {

  var new_div_count = ++$(".product").length;
  
  // You only want to be appending a new product, not .product_divs or .product_fields
  
  $(".product_fields").append('<h1 class="product">Item ' + new_div_count + '</h1><div class="input-field"><input type="text" id="item_name_"' + new_div_count + '" name="item_name[]" required><label for="item_name_1">Item Name</label></div><div class="row"><div class="col s4"><div class="input-field"><input type="text" id="item_quantity_"' + new_div_count + '" name="item_quanity[]" required><label for="item_quantity_1">Item Quantity</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_cost_price_"' + new_div_count + '" name="item_cost_price[]" required><label for="item_cost_price_1">Item Cost Price</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_retail_price_"' + new_div_count + '" name="item_retail_price[]"><label for="item_retail_price_1">Item Retail Price</label></div></div></div>');

});
/* Use the proper heading ranks but style them any way you want. */
.product { font-size:.75em; font-weight:bold; }

/* Make the "Add product" div look like a link without having a link */
.add_product {
  cursor:pointer;
  text-decoration:underline; 
  color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col s7 product_field_div">
  <div class="product_divs">
    <div class="product_fields">
      <h1 class="product">Item 1</h1>
      <div class="input-field">
        <input type="text" id="item_name_1" name="item_name[]" required>
        <label for="item_name_1">Item Name</label>
      </div>
      <div class="row">
        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_quantity_1" name="item_quanity[]" required>
            <label for="item_quantity_1">Item Quantity</label>
          </div>
        </div>

        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_cost_price_1" name="item_cost_price[]" required>
            <label for="item_cost_price_1">Item Cost Price</label>
          </div>
        </div>
        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_retail_price_1" name="item_retail_price[]">
            <label for="item_retail_price_1">Item Retail Price</label>
          </div>
        </div>
      </div>

    </div>
  </div>


  <div class="add_product">Add new product</div>
</div>

Upvotes: 2

Monkey_Dev1400
Monkey_Dev1400

Reputation: 944

Take product_divs and product_fields off the append and add a different class.

$(".add_product").click(function(e) {
  e.preventDefault();
  var div_count = $(".fish").length + 1;
  alert(div_count);
  var new_div_count = (div_count + 1);
  $(".product_fields").append('<div class="fish"><h5>Item ' + new_div_count + '</h5><div class="input-field"><input type="text" id="item_name_"' + new_div_count + '" name="item_name[]" required><label for="item_name_1">Item Name</label></div><div class="row"><div class="col s4"><div class="input-field"><input type="text" id="item_quantity_"' + new_div_count + '" name="item_quanity[]" required><label for="item_quantity_1">Item Quantity</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_cost_price_"' + new_div_count + '" name="item_cost_price[]" required><label for="item_cost_price_1">Item Cost Price</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_retail_price_"' + new_div_count + '" name="item_retail_price[]"><label for="item_retail_price_1">Item Retail Price</label></div></div></div></div>');

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col s7 product_field_div">
  <div class="product_divs">
    <div class="product_fields">
      <h5>Item 1</h5>
      <div class="input-field">
        <input type="text" id="item_name_1" name="item_name[]" required>
        <label for="item_name_1">Item Name</label>
      </div>
      <div class="row">
        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_quantity_1" name="item_quanity[]" required>
            <label for="item_quantity_1">Item Quantity</label>
          </div>
        </div>

        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_cost_price_1" name="item_cost_price[]" required>
            <label for="item_cost_price_1">Item Cost Price</label>
          </div>
        </div>
        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_retail_price_1" name="item_retail_price[]">
            <label for="item_retail_price_1">Item Retail Price</label>
          </div>
        </div>
      </div>

    </div>
  </div>


  <div class="action_div"><a href="#" class="add_product">Add new product</a></div>
</div>

Upvotes: 1

Stephen Gilboy
Stephen Gilboy

Reputation: 5825

You're appending <div class="product_fields"> causing length to increase by 1 each time.

Upvotes: 1

Related Questions