文章/答案/技术大牛

发布

社区首页 >问答首页 >用户更正错误后，Jquery中未提交表单(return false;)

问用户更正错误后，Jquery中未提交表单(return false;)
EN

Stack Overflow用户

提问于 2013-05-08 13:22:02

回答 3查看 763关注 0票数 0

我遇到麻烦了。我正在编写一个简单的抵押贷款计算器，通过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
    });

javascript

jquery

ajax

回答 3

Stack Overflow用户

发布于 2013-05-08 13:27:14

如果您使用的是jQuery的ajax函数，则不需要提交表单。此外，如果希望表单提交，则需要放入一个if函数以返回true，否则它将不会提交。无论发生什么，您的代码都会返回false。您需要将其设置为有条件的，因此如果因为用户满足条件而没有显示错误，那么表单将返回true并发送，但是您将不需要ajax，正如我前面提到的那样。

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

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

这样，您就可以使用javascript进行验证，然后将表单按照您需要的方式发送到calc.php页面。

票数 0

Stack Overflow用户

发布于 2013-05-08 13:34:37

我只会让表单像往常一样提交，而不需要使用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

票数 0

Stack Overflow用户

发布于 2013-05-10 05:08:38

好了，我没有使用AJAX，而是将代码改为简单的JQUERY验证，然后是普通的表单提交(这正是我想要的)。我把表单从GET改为POST。我仍然使用JQUERY来验证表单，然后在一切正常时发送值。

然后，PHP将处理这些方程。

感谢大家的建议，是你启发了我解决我的问题。

干杯!

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16433218

复制

相似问题

问用户更正错误后，Jquery中未提交表单(return false;)
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用户更正错误后，Jquery中未提交表单(return false;)EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用户更正错误后，Jquery中未提交表单(return false;)
EN