C. Kelly C. Kelly - 5 months ago 13
HTML Question

Input Reset to value

Goal

I'm trying to create a button that Onclick resets each individuals values to the Original value of each individual input value.

I've setup a Codepen example here:
http://codepen.io/coryk/pen/QEGrXp

Problem

When the user clicks the reset button it does reset, but it resets to the firsts inputs value and I need it to reset it to each individual value.

Here is my code:

HTML

<tr>
<td>Max Pumping Distance</td>
<td>
<input name="custom_coverage" class="input_green custom_coverage" id="max-pumping" type="number" value="44000">
</td>
<td>ft</td>
</tr>

<br/>
<tr>
<td>Avg. Pumping Distance</td>
<td>
<input name="custom_coverage" class="input_green custom_coverage" id="avg-pumping-distance" type="number" value="30000">
</td>
<td>ft</td>
</tr>

<br/>
<tr>
<td>Head Pressure</td>
<td>
<input name="custom_coverage" class="input_green custom_coverage" id="avg-pumping-distance" type="number" value="45000">
</td>
<td>ft</td>
</tr>
<br/>

<button id="reset">Reset</button>


JavaScript

//Reset to Default Input values
var $input = $('.custom_coverage'),
$reset = $('#reset')
$('#reset').data('default', $input.val() );

$reset.on('click', function() {
$input.val($(this).data('default'));
});

Answer

You can first assign a new attribute to each input field and store the original value there, then you can do something like this:

$(document).ready(function () {


  $('#reset').on('click', function() {
     $('.custom_coverage').each(function () {
        var orgValue = $(this).attr('data-value');
      $(this).val(orgValue);
     });
  });
});

See my jsfiddle example: https://jsfiddle.net/fictus/gusff8ep/