Question

我遇到了泡菜。我正在写一个简单的抵押计算器，通过ajax将数据发送到calc.php。

使用jquery，我正在检查以确保用户在请求的字段中输入适当的值;购买价格和首付都应该是数字（工作），首付不能大于购买价格（工作），当选择一个条款时，利率自动填充（工作）并且如果任何条款或利息出现错误消息费率没有填充（工作）。

当用户提交表单并且缺少任何必填项时，错误消息会显示建议...但是，当用户更正错误时，表单不会提交。

通过查看我不太复杂的代码，您很快就会看到，我仍然在学习Jquery，并会感谢您可以给我的任何输入。

提前感谢您的帮助。

HTML表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Calculator</title>
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">    </script>
    <script type="text/javascript" src="js/js.js" charset="utf-8"></script>
</head>

<body>
    <h1>Mortgage</h1>
    <form action="calc.php" method="post" id="mortgage-form">
        <p class="errorMessage" id="shouldBeNumber">*This value can only contain numbers</p>
        <p id="pPrice"><span class="errorMessage" id="PPmustBeNumber">*</span>Purchase Price: 
            <input type="text" name="purchase-price" id="purchase-price" value="0"/>
            <span class="errorMessage" id="purchasePriceError">Please enter a number value!</span>
        </p>
        <p id="dPayment"><span class="errorMessage" id="DPmustBeNumber">*</span>Down Payment: 
            <input type="text" name="down-payment" id="down-payment" value="0"/>
            <span class="errorMessage" id="downPaymentError">Down payment value must be less than Purchase Price!</span>
        </p>
        <p id="term">
            <select id="loan-term">
                <option value="noValueSelected">-- Select a Term -- </option>
                <option value="15yrs">15 Years</option>
                <option value="20yrs">20 Years</option>
                <option value="30yrs">30 Years</option>
            </select><span class="errorMessage" id="termRequired"> * Term is required.</span>
        </p>
        <div id="interest-rate"></div>
        <p><input type="submit" name="submit" id="submit" value="Calculate!" /></p>
    </form>

        <footer>
            <p>
                &copy; Copyright  by Ricardo
            </p>
        </footer>
</body>
</html>

这是我的JQUERY

    $(function() {
//HIDE errors
$('.errorMessage').hide();

//Do something when loan-term changes
$('#loan-term').change(function(){
    var loanTerm = $(this).val();
    var interestOption = '';
    //alert(loanTerm);
    if (loanTerm == '15yrs') {
        interestOption += "<option value='15yrFixed'>15 Year Fixed: 2.88%    </option>";
    } else if (loanTerm == '20yrs') {
        interestOption += "<option value='20yrFixed'>20 Year Fixed: 3.52%</option>";
    } else if (loanTerm == '30yrs') {
        interestOption += "<option value='30yrFixed'>30 Year Fixed: 4.2%</option>";
    }

    if (loanTerm != "noValueSelected") {
        var interestRate = 
        "<select id='interest-rate'><option value='selectInterestRate'>-- Select an Interest Rate -- </option>" + interestOption + "</select><span class='errorMessage' id='interestRequired'> * This field is required.</span>";
        $('#interest-rate').html(interestRate).show();
    } else if (loanTerm == "noValueSelected") {
        $('#interest-rate').hide();
    }
});//END loan-term check

$('#mortgage-form').submit(function() {

    var purchasePrice = $('#purchase-price').val();
    var downPayment = $('#down-payment').val();
    var loanTerm = $('#loan-term').val();
    var interestRate = $('#interest-rate').val();

    function containsNumber(val) {
        return /^(\d|,)+$/.test(val)
    }

    if (containsNumber(purchasePrice) == true && containsNumber(downPayment) == true ) {
        $('#PPmustBeNumber').hide();
        $('#DPmustBeNumber').hide();
        $('#shouldBeNumber').hide();
        //alert(purchasePrice + downPayment);
        //CHECK IF DOWNPAYMENT IS LESS THAN PURCHASE PRICE. 
        if (downPayment <  purchasePrice) {
            $('#downPaymentError').hide();
        } else {
            $('#downPaymentError').show();
        }
    } else if (containsNumber(purchasePrice) == false){ 
        $('#PPmustBeNumber').show();
        $('#shouldBeNumber').show();
    } else if (containsNumber(downPayment) == false) {
        $('#DPmustBeNumber').show();
        $('#shouldBeNumber').show();
    }
    if (loanTerm != "noValueSelected") {
        $('#termRequired').hide();
            $("#interest-rate").change(function() {
                if (interestRate != "selectInterestRate"){
                    $('#interestRequired').hide();
                } else if (interestRate == "selectInterestRate"){
                    $('#interestRequired').show();
                }   
            })
    } else if (loanTerm == "noValueSelected"){
            $('#termRequired').show();
    } 


if ( purchasePrice && downPayment && loanTerm && interestRate) {
var data = new Object();
    data.purchasePrice = purchasePrice;
    data.downPayment = downPayment;
    data.loanTerm = loanTerm;
    data.interestRate = interestRate;
    data.interestOption = interestOption;

    //create an object of Ajax options:
    var options = new Object();

    //Establish each setting:

    options.data = data;
    options.dataType= 'text';
    options.type = 'get';
    options.url = 'calc.php';

    //perform the request:
    $.ajax(options);    
}

    return false;

}); //END SUBMIT FUNCTION
    });

Answer 1

如果您使用的是jQuery的ajax函数，则无需提交表单。此外，如果您希望提交表单，则需要输入IF函数以返回true，否则它将不会提交。无论如何，您的代码都会返回false。你需要使它成为有条件的，所以如果由于用户满足条件而没有显示错误，那么表单返回true并发送，然后你就不需要ajax，正如我所提到的那样。

使用jQuery验证并正常提交表单的示例代码：为了实现这一点，我将提交按钮从type =“submit”更改为type =“button”，这将阻止它自动提交。

$('#submit').click(function(){
    // put all your code to check inputs for errors here.
    $('#mortgage-form').submit();
});

通过这种方式，您可以使用javascript进行验证，然后将表单发送到calc.php页面，了解您需要它如何工作。

Answer 2

我只是让表单正常提交而不做ajax。我看到的主要问题是您没有办法让表单return true;允许表单实际提交。$('#mortgage-form').submit(function () { var purchasePrice = $('#purchase-price').val(); var downPayment = $('#down-payment').val(); var loanTerm = $('#loan-term').val(); var interestRate = $('#interest-rate').val(); function containsNumber(val) { return /^(\d|,)+$/.test(val) } if (containsNumber(purchasePrice) == true && containsNumber(downPayment) == true) { $('#PPmustBeNumber').hide(); $('#DPmustBeNumber').hide(); $('#shouldBeNumber').hide(); //alert(purchasePrice + downPayment); //CHECK IF DOWNPAYMENT IS LESS THAN PURCHASE PRICE. if (downPayment < purchasePrice) { $('#downPaymentError').hide(); } else { $('#downPaymentError').show(); } } else if (containsNumber(purchasePrice) == false) { $('#PPmustBeNumber').show(); $('#shouldBeNumber').show(); } else if (containsNumber(downPayment) == false) { $('#DPmustBeNumber').show(); $('#shouldBeNumber').show(); } if (loanTerm != "noValueSelected") { $('#termRequired').hide(); $("#interest-rate").change(function () { if (interestRate != "selectInterestRate") { $('#interestRequired').hide(); } else if (interestRate == "selectInterestRate") { $('#interestRequired').show(); } }) } else if (loanTerm == "noValueSelected") { $('#termRequired').show(); } if (purchasePrice && downPayment && loanTerm && interestRate) { var data = new Object(); data.purchasePrice = purchasePrice; data.downPayment = downPayment; data.loanTerm = loanTerm; data.interestRate = interestRate; data.interestOption = interestOption; //create an object of Ajax options: var options = new Object(); //Establish each setting: options.data = data; options.dataType = 'text'; options.type = 'get'; options.url = 'calc.php'; return true; } return false; }); //END SUBMIT FUNCTION尝试在下面提交你的提交功能，这样可以让你滚动。

{{1}}

Answer 3

好的，所以我没有使用AJAX，而是将代码更改为简单的JQUERY验证，然后是正常的表单提交（这就是我想要的）。我将表单从GET更改为POST。我仍然使用JQUERY来验证表单，然后只要一切正常就发送值。

PHP将处理方程式。

感谢大家的建议;你激励我解决我的问题。

干杯！

用户更正错误后表单未在Jquery中提交（返回false;）

3 个答案: