CODEWITHSUNDEEP
javascriptjqueryhtml
TRENT R.
TRENT R.

Reputation: 11

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

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;
    });

});

Upvotes: 1

Views: 56

Answers (2)

Akhil Thayyil
Akhil Thayyil

Reputation: 9403

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>

Upvotes: 0

null
null

Reputation: 1162

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.

Upvotes: 1

Related Questions