0

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

使用 jquery，我正在检查以确保用户在请求的字段中输入了适当的值；both purchase price and down payment should be numbers (working), down payment can't be greater than purchase price (working), when a term is selected, interest rate auto populates (working) and an error message appears if either term or interest rate 未填充（工作）。

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

通过查看我的不太复杂的代码，您很快就会看到，我仍在学习 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
    });
4

3 回答 3

0

如果你使用 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 页面，这正是您需要它工作的方式。

于 2013-05-08T05:27:14.083 回答
0

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

然后 PHP 将处理方程式。

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

干杯!

于 2013-05-09T21:08:38.480 回答
0

我只会让表单正常提交而不做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
于 2013-05-08T05:34:36.547 回答