How can I multiply user input to create additional fields?

Question

I would like to multiply the value that is entered in the userInput field by 20 so that the fields with class xafields display 20 times what is entered in the userInput. (Enter 1, 20 of each field is added, enter 2, 40 of each field is added, etc.).

jQuery("#userInput").change(function() {
  var htmlString = "";
  var len = jQuery(this).val();
  for (var i = 0; i <= len; i++) {

    htmlString += 'Name<br /><input class="xafields" type="text"><br />';
    htmlString += 'Email<br /><input class="xafields"><br /><br />';

  }
  jQuery("#xafieldContainer").html(htmlString);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="userInput">
<div id="xafieldContainer"></div>

before the loop, multiply you len by 20.

Alok Mali
– Alok Mali

2020-06-08 08:57:19 +00:00
Commented Jun 8, 2020 at 8:57 — Alok Mali
– Alok Mali, Commented Jun 8, 2020 at 8:57

StudioTime · Accepted Answer · 2020-06-08 08:56:04Z

1

Have a look at the changes and comments in the code:

Simply multiply the value entered by 20.

Make sure you start from one in the loop, not zero

jQuery("#userInput").change(function() {
  var htmlString = "";
  var len = jQuery(this).val() * 20; /* Multiply value entered by 20 */
  for (var i = 1; i <= len; i++) { /* <-- start at 1, not 0 */

    htmlString += 'Name<br /><input class="xafields" type="text"><br />';
    htmlString += 'Email<br /><input class="xafields"><br /><br />';

  }
  jQuery("#xafieldContainer").html(htmlString);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="userInput">
<div id="xafieldContainer"></div>

answered Jun 8, 2020 at 8:56

StudioTime

24.4k40 gold badges129 silver badges217 bronze badges

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

Collectives™ on Stack Overflow

How can I multiply user input to create additional fields?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related