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

Question

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:

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>

^ maxItems and one easy approach would be to put on each form a hidden input and save there the number of added inputs each form has — Lixus
– Lixus, Commented Sep 12, 2018 at 20:51
So I moved maxitems into the function, but it caps at 'item 2' now. Is that what you mean? — Whisou138
– Whisou138, Commented Sep 12, 2018 at 20:53

miken32 · Accepted Answer · 2018-09-12 21:06:38Z

2

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?

edited Sep 12, 2018 at 21:06

answered Sep 12, 2018 at 21:01

miken32

42.5k16 gold badges127 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Whisou138 Over a year ago

Thank you, just now getting around to this now. So going this way, I'll be able to save each form's inputs via ajax and keep track of them by form?

Whisou138 Over a year ago

thanks! This seems to work just fine, but when logging the hidden inputs value it's the same for each one, so I'm wondering if it's an issue with a non unique ID on my hidden input?

miken32 Over a year ago

That would be something in the PHP that's generating the forms I'd guess.

benjamin c · Accepted Answer · 2018-09-12 21:35:17Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related