Ad

Empty Array In Form With Button Click And Dynamic Input Positioning

I have a form that I am using to calculate the sum and average of an array of numbers. I am using a button to trigger the form to appear and then users can add extra input fields to enter as many values as they wish. When they click the 'Calc' button, they receive an alert of the sum and average. This much is working fine. The problem is when I click the trigger again to close and then to reopen the form, the same number of input fields as the user selected appear and, despite having been able to clear their values, I have not been able to empty the associated array. Thus, when the user inputs values the second time and attempts to perform the calculation, the previous values are being added to these new ones.

On top of this, I would like for the the dynamically added inputs to appear one on top of the other and for the '.remove-field' div (or at least the icon it contains) to appear to the right of each input field. I have tried various display values, positioning, etc. but nothing seems to produce a consistent look.

Here is my HTML markup:

<button class="form-launch" data-icon="&#xe17f">AVG</button>

<div class="form-space">
<form role="form" action="/wohoo" method="POST" class="form-add-remove">
  <label class="label">Average Calculation</label>
  <div id="horizontal_bar"></div>
    <div class="multi-field-wrapper">
    <div class="add-field"><i class="fa fa-plus-circle"></i></div>
      <div class="multi-fields">
        <div class="multi-field">

         <input type="text" name="stuff[]" class="input-field"/>

         <div class="remove-field"><i class="fa fa-minus-circle"></i></div>

        </div>
      </div>

  </div>

  <button type="button" class="check">Calc</button>
</form>
</div>

My CSS:

.form-launch {
  position: absolute;
  top: 20px;
  left: 20px;
}

.form-space {
  opacity: 0;
}

.form-add-remove {
  font-family: "DJB Chalk It Up";
  color: #FFF;
  font-size: 30px;
  width: 600px;
  height: 300px;
  padding: 20px;
  border: 2px solid #FFF;
  border-radius: 25px;
  box-shadow: 0px 0px 10px 5px #000;
  background: transparent url("http://mrlambertsmathpage.weebly.com/files/theme/blackboard.jpeg") repeat-y scroll left center;
  text-align: center;
  vertical-align: middle;
  display: inline-flex;
  -moz-box-pack: center;
  justify-content: center;
  align-items: center;
  -moz-box-orient: vertical;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -125px;
  display: inline-block;
}

.label {
  position: absolute;
  top: 20px;
  left: 20px;
}

#horizontal_bar {
  position: absolute;
  top: 60px;
  left: 0px;
  width: 95%;
  height: 4px;
  border-radius: 2px;
  background: #00A2E8 none repeat scroll 0% 0%;
  margin: 2.5%;
  box-shadow: 0px 0px 6px 3px #000, 0px 0px 1px #000 inset;
}

.multi-field-wrapper {
  height: 130px;
  width: 90%;
  padding: 20px;
  margin-left: 0px;
  margin-top: 80px;
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: all 1.5s ease-in-out 0.5S;
  overflow-y: scroll;
}

.multi-field-wrapper:hover {
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 1.5s ease-in-out 0s;
}

.multi-field {
  display: inline-block;
}

.add-field {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

i {
  color: #00a2e8;
}

.calc {
  position: absolute;
  left: 20px;
  bottom: 20px;
}

input {
  font-family: "Borders Divide, But Hearts Shall Conquer";
  border-radius: 5px;
  border: 2px inset rgba(0, 0, 0, 0.4);
  width: 100px;
  text-align: right;
  padding-right: 10px;
}

And my jQuery:

var launchCount = 0;
var arr = [],
  sum = 0;

$('.form-launch').click(function() {
  launchCount++;

  if ((launchCount % 2) == 1) {
    $('.form-space').css('opacity', '1');

    // Initialize Average Form
    $('.multi-field-wrapper').each(function() {
      var $wrapper = $('.multi-fields', this);
      $(".add-field", $(this)).click(function(e) {
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
      });
      $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1)
          $(this).parent('.multi-field').remove();
      });
    });

    $(".calc").click(function() {
      $("input[type=text]").each(function() {
        arr.push($(this).val());
        sum += parseInt($(this).val());
      });

      var n = arr.length;
      var AVG = (sum / n);
      alert(sum + "," + AVG);
    });

    // End Average Form
  } else if ((launchCount % 2) == 0) {
    $('.form-space').css('opacity', '0');
    $('.form-add-remove').find("input[type=text]").val('');

    if ($('.multi-field', $wrapper).length > 1) {
      $(this).parent('.multi-field').remove(); // does not seem to work!
    }
    arr = []; // also does not seem to work
  }

});

I have commented a few lines at the bottom of my jQuery to illustrate what I have tried. I also looked at setting the array length to 0, but I was not able to get that to work either.

Obviously, this is a work in progress. My jsfiddle is here: http://jsfiddle.net/e3b9bopz/77/

Ad

Answer

Can you try this?

$(".calc").click(function() {
  $("input[type=text]").each(function() {
    arr.push($(this).val());
    sum += parseInt($(this).val());
  });

  var n = arr.length;
  var AVG = (sum / n);
  alert(sum + "," + AVG);
  arr = []; # How about putting your reset here?
   sum = 0; # reinitialized the sum
});

I think you need to reset the arr after you make a calculation.

Ad
source: stackoverflow.com
Ad