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

Question

我有一个模式，允许用户填写可以输入要添加的燃料量的表格来“加油”，但是最大燃料量为180升，因此如果现有燃料为170升（现有燃料值将（从数据库中检索），而用户尝试添加20升，则应产生错误。 我已经有一些代码，但是没有产生错误。 如果有人指出这个问题，将不胜感激。

 $(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演示

Answer 1

问题在这里：

<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具有id="fuel" ， input也是如此。 从div删除id或使其唯一。 此外， div元素没有名称属性，您也应该将其删除。