JavaScript-接受用户输入并用于计算以验证值

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

Answer 1

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.