compcobalt compcobalt - 2 months ago 11x
Javascript Question

Make array from multiple dynamic input textboxes

I'm trying to get 3 different array readouts of the values added after I click on submit, can someone please help me. I would like it to look something like this...

balance_array = 1,2,3,4,5,6 and so on...

loan_array = 1,2,3,4,5,6 and so on...

rate_array = 1,2,3,4,5,6 and so on...

I guess the real question is how do I get the value of balance0,balance1 and so on.. and add it to an array and then I can repeat that for the others also.

<script src=""></script>
<script src=""></script>
<link href="" rel="stylesheet"/>

<style type="text/css">
body {
.entry:not(:first-of-type) {
margin-top: 10px;
.glyphicon {
font-size: 12px;

<script type='text/javascript'>//<![CDATA[
var counter = 1;
$(function() {
var clone = function(tmpl) {
return $((tmpl.clone()).html())
$template = $('#template_add_form'),
formArray = [ clone($template) ], // init array with first row
$formEntries = $('#entries');

$(document).on('click', '.btn-add', function() {
// set focus to adding row = last element in array

// remove not working yet

$(document).on('click', '.btn-remove', function(evt) {
var id;
// iterate over formArray to find the currently clicked row
$.each(formArray, function(index, row) {
//console.log(index, row.has(evt.currentTarget).length);
if ( row.has(evt.currentTarget).length == 1 ) {
id = index; // click target in current row
return false; // exit each loop


//console.log('clicked', id);
formArray.splice(id, 1);


var updateForm = function() {
// redraw form --> problem values are cleared!!
// console.log(formArray);
var lastIndex = formArray.length - 1,
name; // stores current name of input

$formEntries.empty(); // clear entries from DOM becaue we re-create them
$.each(formArray, function(index, $input) {
//console.log(index, $input);
// update names of inputs and add index
//console.log('inputs', $input.find('input'));
$.each($input.find('input'), function(inputIndex, input) {
name = $(input).attr('name').replace(/\d+/g, ''); // remove ids
$(input).attr('name', name + index);

if (index < lastIndex) {
// not last element --> change button to minus
.html('<span class="glyphicon glyphicon-minus"></span>');


updateForm(); // first init. of form



<form id="loanform" action="#" role="form" autocomplete="off" method="post">
<INPUT type="hidden" name="action" value="cancel">
<script id="template_add_form" type="text/template">
<div class = "entry input-group col-xs-9">
<div class = "col-xs-3">
<input class = "form-control" name="balance" type = "text"
placeholder = "Loan Balance" required = "required"/>
<div class="col-xs-3">
<input class="form-control" name="rate" type="text" placeholder="Interest Rate" required="required" />
<div class="col-xs-3">
<input class="form-control" name="payment" type="text" placeholder="Minimum Payment" required="required"/>
<span class="input-group-btn col-xs-1">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span >
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<label class="control-label" for="field1">
<h3>Enter your loans below</h3>

<div class="controls">
<div class="entry input-group col-xs-3">How much extra money can you pay per month?
<input class="form-control" name="extra" type="text" placeholder="Extra/month">
<div id="entries"></div>
<div class="input-group-btn">
<div class="col-xs-5">
<button type="submit" class="btn btn-primary">Submit</button>
<br> <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another loan</small>



The array values can be captured by naming the div's with appropriate class for example:

<input class="form-control rate" name="rate" type="text" placeholder="Interest Rate" required="required" />

And then reading the values by classname on submit event:

         var balanceArray = [];
         var rateArray = [];
         var paymentArray = []