CODEWITHSUNDEEP
javascriptjquery
Whisou138
Whisou138

Reputation: 481

Creating multiple elements (input) on button press, within a loop

My goal with this is to have forms that contain a beginning input, and if the '+' button next to it is pressed, it will create another input below it. All of these inputs will eventually be inserted in AJAX.

Right now my form is inside a PHP foreach loop, so I have multiple forms, each with their own set of inputs and buttons.

If I click the '+' button in each form, it will create a new input below, but the way I'm trying to limit each form to 10 inputs, it's going across all forms like this:

enter image description here

So in that image, I clicked the '+' button of the first form 3 times (up to item 4) and then I pressed it in the next form which gave Item 5.

The functionality is basically working here, but I need each form to have it's own inputs, limited to 10. This way if they save items on any form, I can pass only those inputs to AJAX.

<form id="Items" method="post">

   <label id="ItemLabel">Item 1:</label>
   <input type="text" name="Items[]"><br/>
   <button type="button" class="moreItems_add" onclick="moreItems(this);">+</button>

    <input type="hidden" name="tickerID" id="tickerID" value="xyz">
    <input type="submit" name="saveTickerItems" value="Save Ticker Items">  

</form>

<!-- ticker modal JS -->
<script type="text/javascript">

var maxItems = 1;

function moreItems(button) {
  if (maxItems < 10) {
    var label = document.createElement("label");
    label.id="ItemLabel"+maxItems;
    label.innerHTML = "Item "+(maxItems+1)+": ";
    var input = document.createElement("input");
    input.type='text';
    input.name = 'item'+maxItems;

    $($(label)).insertBefore($(button));
     $($(input)).insertBefore($(button));
     //Insert a line break so that the next label and input are on new line
     $('<br/>').insertBefore($(button));
    maxItems++;
  }
}

</script>

Upvotes: 0

Views: 2193

Answers (2)

benjamin c
benjamin c

Reputation: 2338

Here's a solution after a couple modifications to your code.

function moreItems(button) {
    var maxItems = Number(button.attributes.cnt.value);
    maxItems += 1;
    button.setAttribute("cnt", maxItems);
    if (maxItems < 10) {
      var label = document.createElement("label");
      label.id = "ItemLabel" + maxItems;
      label.innerHTML = "Item " + (maxItems + 1) + ": ";
      var input = document.createElement("input");
      input.type = 'text';
      input.name = 'item' + maxItems;

      $($(label)).insertBefore($(button));
      $($(input)).insertBefore($(button));
      $('<br/>').insertBefore($(button));
    }
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Items" method="post">
  <label id="ItemLabel">Item 1:</label>
  <input type="text" name="Items[]"><br/>
  <button type="button" cnt="0" class="moreItems_add" onclick="moreItems(this);">+</button>
  <input type="hidden" name="tickerID" id="tickerID">
  <input type="submit" name="saveTickerItems" value="Save Ticker Items">
</form>

<br><br>

<form id="Items" method="post">
  <label id="ItemLabel2">Item 1:</label>
  <input type="text" name="Items[]"><br/>
  <button type="button" cnt="0" class="moreItems_add" onclick="moreItems(this);">+</button>
  <input type="hidden" name="tickerID" id="tickerID2">
  <input type="submit" name="saveTickerItems" value="Save Ticker Items">
</form>

Changes made:

  • add a custom attribute to each + button, in here cnt="0".
  • in moreItems() function, increment value of cnt of respective form's + button.

Upvotes: 0

miken32
miken32

Reputation: 42755

You're using a global variable as your counter so it will increment with every use for every form. Why not have the button check what's in the form and do the counting itself? And while you're at it, may as well go full jQuery.

$("button.moreItems_add").on("click", function(e) {
  var numItems = $("input[type='text']", $(this).closest("form")).length;
  if (numItems < 10) {
    var html = '<label class="ItemLabel">Item ' + (numItems + 1) + ': </label>';
    html += '<input type="text" name="Items[]"/><br/>';
    $(this).before(html);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Items" method="post">
   <label class="ItemLabel">Item 1:</label>
   <input type="text" name="Items[]"><br/>
   <button type="button" class="moreItems_add">+</button>
   <input type="hidden" name="tickerID" id="tickerID" value="xyz">
   <input type="submit" name="saveTickerItems" value="Save Ticker Items">
</form>

Also you were naming your text inputs sequentially, which I assume was a mistake?

Upvotes: 2

Related Questions