Question

我制作了一个jQuery计算器，它将燃油量和燃烧率设置为空白时间显示在我的屏幕上。我也在使用表单验证。

当我点击计算器按钮时，它会运行一些表单验证并尝试运行服务器端代码，如果我点击表单提交按钮（该按钮执行它应该的方式）就可以了。但是我的计算器按钮“id”属性和“name”属性与表单提交按钮不同。所以我不明白为什么当我点击计算器按钮时它会尝试运行表单验证。另外，它没有给我

中的总数

$('#time-empty-field').val(time_empty);

字段。理想情况下，我希望计算器在$（'time-empty-field'）中显示总计，而不是运行表单验证。

我知道我的HTML很好，从我看到的我看不出我的jQuery有什么问题。也许一组不同的眼睛可以帮助解决这个问题。任何帮助将非常感激。谢谢！

$(function() {
    $('#id').focus();
    // To clear phone example when active
    $('#phone').focus(function() {
          var field = $(this);
          if (field.val() == field.prop('defaultValue')) {
            field.val('').css('color', 'black');
          }
    });
    // Reveals System Report
    $('#system-box input').click(function() {
        if ($(this).attr('checked')) {
            $('#system-report').slideDown('fast');
        } else {
            $('#system-report').slideUp('fast');
        }
    });
    //Calculator
    $('#calculator-submit-btn').submit(function() {
        var fuel_amount = $('#fuel-amount-field').val();
        var burn_rate = $('#burn-rate-field').val();
        var time_empty = fuel_amount * burn_rate;
        time_empty = time_empty.toFixed(2);
        $('#time-empty-field').val(time_empty);
    });
    // Form validation plug-In
    $('#form1').validate({
        rules: {
             id: {
                required: true,
                number: true
             },
             password: {
                required: true
             },
             phone: {
                required: true,
                phoneUS: true
             }
        }, 
        messages: {
          id: {
            required: "Please enter ID number."
          },
          password: {
            required: "Please enter password."
          },
          phone: {
            phoneUS: "Please enter a valid phone number."
          }

        }
    });
});

Answer 1

$('#calculator-submit-btn').click(function() {
        var fuel_amount = $('#fuel-amount-field').val();
        var burn_rate = $('#burn-rate-field').val();
        var time_empty = fuel_amount * burn_rate;
        time_empty = time_empty.toFixed(2);
        $('#time-empty-field').val(time_empty);
    });

submit()只能用于提交表单。

了解更多详情chec jQuery API：http://api.jquery.com/submit/

只是您不能将submit()事件附加到按钮，只能附加到表单。

jQuery Calculator - 验证执行而不是计算器

1 个答案: