How can I add or append textboxes on a button click?

Question

I'm trying to figure out how to add text boxes after hitting the "submit" button. I've tried everything I know, but I can't seem to get an outcome. I also want to make the max number of text boxes 25.

Here's some of the HTML:

 <div class="title">
    <h1>Calculated Test Scores</h1>
 </div>
    <h5># of Students: <input type="text"></h5>
    <div class="container">
    <button type="button" class="submit">Submit</button>
    </div>
    <h5>Scores: <input type="text"></h5>
    <div class="container">
    <button type="button" class="calculate">Calculate</button>
    </div>
    <h6>The average is:</h6>

And this is the JS:

$(function() {

    $(".submit").click(function() {
        for(var i=0; i < 26; i++)
        $(".submit").append(arr[i])
    });

    $(".calculate").click(function() {
        for(var i=0; i < arr.length; i++)
        sum=sum + arr[i];
        Average = sum/arr.length;
    });

});

One last thing, I'm trying to sum up the numbers that the user enters. In other words, calculate the average of all the numbers outputted. — TRENT R.
– TRENT R., Commented Mar 15, 2018 at 19:18
You should really read about DOM structure and how to manipulate it. Looks like you are not familiar with core concepts. — Pa Ye
– Pa Ye, Commented Mar 15, 2018 at 19:20

null · Accepted Answer · 2018-03-15 19:16:46Z

1

I am not sure what is arr but I simply added several inputs i.e. 25 into that. Here is

jsfiddle

var arr = ['<input type="text" name="name" />', '<input type="text" name="name" />', '<input type="text" name="name" />', '<input type="text" name="name" />', '<input type="text" name="name" />', '<input type="text" name="name" />', '<input type="text" name="name" />', '<input type="text" name="name" />', '<input type="text" name="name" />', '<input type="text" name="name" />','<input type="text" name="name" />','<input type="text" name="name" />','<input type="text" name="name" />','<input type="text" name="name" />','<input type="text" name="name" />','<input type="text" name="name" />','<input type="text" name="name" />','<input type="text" name="name" />','<input type="text" name="name" />','<input type="text" name="name" />','<input type="text" name="name" />','<input type="text" name="name" />','<input type="text" name="name" />','<input type="text" name="name" />','<input type="text" name="name" />'];
$(".submit").click(function() {
    for(var i=0; i < 26; i++) {
      $(".inputs").append(arr[i]);
    }
});

$(".calculate").click(function() {
    for(var i=0; i < arr.length; i++)
    sum=sum + arr[i];
    Average = sum/arr.length;
});

Let me know if this is something you are looking for.

answered Mar 15, 2018 at 19:16

null

1,1723 gold badges13 silver badges30 bronze badges

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

3 Comments

TRENT R. Over a year ago

This is kind of what I'm looking for, but for some reason there are two Calculate buttons. It works in the jsfiddle, but it doesn't work in the program I'm using.

TRENT R. Over a year ago

Just realized that the Calculate code was doubled in my program.

null Over a year ago

If my answer helped you find solution than don't forget to accept my answer.

Akhil Thayyil · Accepted Answer · 2018-03-15 19:23:55Z

0

Please see the working prototype (markup slightly modified):

$(".submit").click(function() {
  var newContent = "";
  for (var i = 0; i < $("#scount").val(); i++)
    newContent += "<input type='text'/>";
  $(".dynamic_inputs").html(newContent);
});

$(".calculate").click(function() {
  var sum = 0;
  $(".dynamic_inputs input").each(function() {
    sum = sum + parseInt($(this).val());
  });
  var avg = sum / $(".dynamic_inputs input").length;
  $("h6").text("The average is: " + avg);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="title">
  <h1>Calculated Test Scores</h1>
</div>
<h5># of Students: <input id="scount" type="text"></h5>
<div class="container">
  <button type="button" class="submit">Submit</button>
</div>
<h5>Scores: </h5>
<div class="dynamic_inputs"></div>
<hr/>
<div class="container">
  <button type="button" class="calculate">Calculate</button>
</div>
<h6>The average is:</h6>

answered Mar 15, 2018 at 19:23

Akhil Thayyil

9,4256 gold badges38 silver badges48 bronze badges

1 Comment

TRENT R. Over a year ago

Akhil, the prototype isn't working. I enter a # of students and hit submit, but no other text boxes appear to show up under scores.

Collectives™ on Stack Overflow

How can I add or append textboxes on a button click?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related