带有验证和隐藏字段值的提交按钮 - Submit button with validation and hidden field value

我正在做一项任务，创建一个抵押贷款计算器，该计算器使用JavaScript/Ajax；融资额"；以及"；利率；计算每月付款。"；金额"&quot；利息"；由用户填写，并在PHP程序中计算每月付款；支付"；领域

我需要验证用户输入；支付"；字段以显示计算的付款。

现在我是如何编码的，当我按下提交时，它会正确验证，但计算的付款值显示在一个单独的页面上（PHP页面除了打印行外是空白的）。

这是我的HTML页面代码：

<html>
<head>
    
    <link rel="stylesheet" type="text/css" href="css/king.css" />
        <script>
        var XMLHttpRequestObject = false;
            if (window.XMLHttpRequest) {
              XMLHttpRequestObject = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
              XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
            }
            function calculateRate()
            {
              if(XMLHttpRequestObject) {
                XMLHttpRequestObject.open("POST", "assignment_8_calculate.php");
                XMLHttpRequestObject.setRequestHeader('Content-Type',
                  'application/x-www-form-urlencoded');
                XMLHttpRequestObject.onreadystatechange = function()
                {
                  if (XMLHttpRequestObject.readyState == 4 &&
                    XMLHttpRequestObject.status == 200) {
                      var returnedData = XMLHttpRequestObject.responseText;
                      var payment = document.getElementById('payment');
                      payment.value = returnedData;
                  }
                }
                var amount = document.getElementById('amount').value;
                var interest = document.getElementById('interest').value;
                
                XMLHttpRequestObject.send(amount);
                XMLHttpRequestObject.send(interest);
                    
              }
              return false;
            }

        function validateForm()
        {
            var errmsg = '';
            var amount = document.getElementById('amount').value;
            if (amount == null || amount == "")
            {
              errmsg += "<br />You must enter an 'Amount Financed'";
            } else {
                    
                if (isNaN(amount))
                {
                    errmsg += "<br />'Amount Financed' must be a number";
                }
            }
            var interest = document.getElementById('interest').value;
            if (interest == null || interest == "")
            {
              errmsg += "<br />You must enter an 'Interest Rate'";
            } else {
                if (isNaN(interest))
                {
                    errmsg += "<br />'Interest Rate' must be a number";
                }
            }
            var messageDiv = document.getElementById('messagediv');
            messageDiv.innerHTML = errmsg;
            if (errmsg == '')
            {
                return true;
            } else {
                return false;
            }
        }
        
        </script>
    </head>
    
    <body>
    <body>
    <a href="assignment_8.php"><img src="images/KingLogo.jpg"></a><br>
    
    <div id="mortgagecalculatorresults">
    <h2>Mortgage Calculation</h2>
    
    <div id="calculator">
    
        <form id="mortgage" method="post" action="assignment_8_calculate.php">
    
        <table>
        <tr>
        <td>Amount Financed:</td>
        <td><input type="text" name="amount" id="amount" ></td>
        </tr>
    
        <tr>
        <td>Interest Rate:</td>
        <td><input type="text" name="interest" id="interest" ></td>
        </tr>
    
        <tr>
        <td>Calculated Monthly Payment:</td>
        <td><input type="text" disabled="disabled" name="payment" id="payment" ></td>
        </tr>
        </table>
                
        <p><input type="submit" value="Calculate Payment" onclick="return validateForm()" onsubmit=" calculateRate();">
        
        <input type="reset" />
        </p>
    
        </form>
    
    </div>
    
    <div style="color: red;" id="messagediv">
    </div>
    
    
</body>
</html>

我还尝试过在一次发送中将值发送到PHP程序，如下所示：

var sendValues = amount + '|' + interest;
XMLHttpRequestObject.send(sendValues);

以下是PHP页面的代码（请注意，代码中注释掉了我试图只发送一个值并在PHP中分解它的示例）：

<?php
//$sendValues = $_POST['sendValues'];
$amount = $_POST['amount'];
$interest = $_POST['interest'];
//list($amount, $interest) = explode('|', $sendValues);
$payment = ($amount * $interest) / 12;
//$payment = $sendValues / 12;
$payment = number_format ($payment, 2);
print $payment;
?>

如果我将按钮编码为一个按钮，而不是提交，通过直接连接到calculateRate函数并跳过验证，一个无用的值将返回到隐藏字段，而不发送到单独的PHP页面，但发送的值将始终为0.00。

更新的代码：不工作-获取错误：

"不允许的方法

URL/testfiles/Ugar_Bradley_1585_PHPwithMySQL/assignment_8_mortgage.html不允许请求的方法POST；

如果我只是改变"；按钮"；键入一个"；提交"；则我得到"0"中的0.00值；支付"；返回值的字段。

<html>
<head>
    
    <link rel="stylesheet" type="text/css" href="css/king.css" />
        <script>
        var XMLHttpRequestObject = false;
            if (window.XMLHttpRequest) {
              XMLHttpRequestObject = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
              XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
            }
            function calculateRate()
            {
              if(XMLHttpRequestObject) {
                XMLHttpRequestObject.open("POST", "assignment_8_calculate.php");
                XMLHttpRequestObject.setRequestHeader('Content-Type',
                  'application/x-www-form-urlencoded');
                XMLHttpRequestObject.onreadystatechange = function()
                {
                  if (XMLHttpRequestObject.readyState == 4 &&
                    XMLHttpRequestObject.status == 200) {
                      var returnedData = XMLHttpRequestObject.responseText;
                      var payment = document.getElementById('payment');
                      payment.value = returnedData;
                  }
                }
                var amount = document.getElementById('amount').value;
                var interest = document.getElementById('interest').value;
                
                XMLHttpRequestObject.send(amount);
                XMLHttpRequestObject.send(interest);
                    
              }
              return false;
            }

        function validateForm()
        {
            var errmsg = '';
            var amount = document.getElementById('amount').value;
            if (amount == null || amount == "")
            {
              errmsg += "<br />You must enter an 'Amount Financed'";
            } else {
                    
                if (isNaN(amount))
                {
                    errmsg += "<br />'Amount Financed' must be a number";
                }
            }
            var interest = document.getElementById('interest').value;
            if (interest == null || interest == "")
            {
              errmsg += "<br />You must enter an 'Interest Rate'";
            } else {
                if (isNaN(interest))
                {
                    errmsg += "<br />'Interest Rate' must be a number";
                }
            }
            var messageDiv = document.getElementById('messagediv');
            messageDiv.innerHTML = errmsg;
            if (errmsg == '')
            {
                calculateRate();
                return true;
            } else {
                return false;
            }
        }
        
        </script>
</head>
<body>
<body>
<a href="assignment_8.php"><img src="images/KingLogo.jpg"></a><br>
<div id="mortgagecalculatorresults">
<h2>Mortgage Calculation</h2>
<div id="calculator">
    <form id="mortgage" method="post">
    <table>
    <tr>
    <td>Amount Financed:</td>
    <td><input type="text" name="amount" id="amount" ></td>
    </tr>
    <tr>
    <td>Interest Rate:</td>
    <td><input type="text" name="interest" id="interest" ></td>
    </tr>
    <tr>
    <td>Calculated Monthly Payment:</td>
    <td><input type="text" disabled="disabled" name="payment" id="payment" ></td>
    </tr>
    </table>
            
    <p><input type="submit" value="Calculate Payment" onclick="return validateForm()" onsubmit="return false;">
    
    <input type="reset" />
    </p>
    </form>
</div>
<div style="color: red;" id="messagediv">
</div>

</body>
</html>

有一些事情我会改变，但我想这取决于你的老师将允许

我会在整个项目中使用jquery。

http://docs.jquery.com/Plugins/Validation能够处理您需要的任何验证

下面的代码可以更好地从php脚本中收集信息

$.ajax({
    data: {'amount':amount,'interest':interest},
    type: "POST",
    url: "assignment_8_calculate.php",
    success: function (data) {
        if (data) {
            alert(data);
        } else {
            alert('data not found');
        }
    }
});

从表单元素删除action="assignment_8_calculate.php"，从提交按钮删除onsubmit=" calculateRate();"，在表单元素中添加onsubmit="return false;"，最后，在validateForm()函数中，如果说没有错误，则返回true，将其更改为

if (errmsg == '')
{
    calculateRate();
}
return false;