JavaScript - Taking user input and using in calculation to validate value

Question

I have a modal that allows users to 'refuel' by filling out a form where they can input the amount of fuel to add, however the maximum fuel amount is 180 litres, so if the existing fuel is 170 litres (the existing fuel value will be retrieved from a database), and the user tries to add 20 litres, it should produce an error. I've got some code already, but it's not producing the error. If anyone could point out the issue it would be greatly appreciated.

$(document).ready(function() {

  $('#fuel').blur(function() {
    if (!ValidateFuel()) {
      e.preventDefault();
    }
  });

  $('#auth_form8').on('submit', function(e) {
    if (!ValidateFuel()) {
      e.preventDefault();
    }
  });
});

function ValidateFuel() {
  var IsValid = false;
  var fuel_to_add = $('#fuel').val();
  var current_fuel = '100'; // this value will be retrieved from database
  var fuel_once_added = Number(current_fuel) + Number(fuel_to_add);

  if (fuel_once_added > 180) {
    $('#alertInvalidFuel').show();
    IsValid = false;
  } else {
    $('#alertInvalidFuel').hide();
    IsValid = true;
  }

  return IsValid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn btn-success" role="button" data-target="#confirm-refuelG-EEGU" data-toggle="modal"><em class='fa fa-plus'></em></a>

<div id="confirm-refuelG-EEGU" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add Fuel G-EEGU</h4>
      </div>
      <div class="modal-body">
        <form name="auth_form8" id="auth_form8" method="post" action="action_refuel.php">
          <p>This action cannot be undone.</p>
          <hr>
          <input class="form-control" id="aircraft_id" name="aircraft_id" value='1' type="hidden">
          <div class="form-group" name="fuel" id="fuel">
            <label for="auth_code8" class="control-label">
                  Fuel to add:</label>
            <input class="form-control" id="fuel" name="fuel" type="number" required>
          </div>
          <div style="display:none;" class="alert alert-danger" id="alertInvalidFuel">
            <p>Fuel will exceed 180 litres.</p>
          </div>
          <hr>
          <div class="form-group has-feedback" name="auth_code8" id="auth_code8">
            <label for="auth_code8" class="control-label">
                  Authorisation Code</label>
            <input class="form-control" id="auth_code_input8" autocomplete="new-password" name="refuel_auth_code" type="password" required>
            <span class="form-control-feedback glyphicon" id="iconBad8"></span>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" id="submit" class="btn btn-success">Add Fuel</button>
      </div>
      </form>
    </div>
  </div>
</div>

JSFiddle Demo

e is undefined. It should be $('#fuel').blur(function(e) { if (!ValidateFuel()) { e.preventDefault(); } });. Use the browser console (dev tools) (hit F12) and read any errors. Use JSHint to find problems with your code immediately. — Sebastian Simon
– Sebastian Simon, Commented Mar 6, 2017 at 18:37
@Xufox This does not solve the issue unfortunately. No errors showing on JSHint or console. I think it's just not triggering the validate function? — sinesine
– sinesine, Commented Mar 6, 2017 at 18:39

billyonecan · Accepted Answer · 2017-03-06 18:41:45Z

2

The problem is here:

<div class="form-group" name="fuel" id="fuel">
    <label for="auth_code8" class="control-label">Fuel to add:</label>
    <input class="form-control" id="fuel" name="fuel" type="number" required>
</div>

Your div has id="fuel" and so does the input. Remove the id from the div or make it unique. Also, there is no name attribute for div elements, you should remove that as well.

answered Mar 6, 2017 at 18:41

billyonecan

20.3k9 gold badges44 silver badges66 bronze badges

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

Collectives™ on Stack Overflow

JavaScript - Taking user input and using in calculation to validate value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related