0

私は、Javascript/Ajax を使用して「融資額」と「金利」を取得して毎月の支払いを計算する住宅ローン計算機を作成する課題に取り組んでいます。ユーザーが「金額」と「利息」を入力すると、毎月の支払いが PHP プログラムで計算され、「支払い」フィールドに送り返されます。

ユーザー入力を検証し、「支払い」フィールドを取得して計算された支払いを表示する必要があります。

現在、送信を押すと正しく検証されるようにコード化されていますが、計算された支払いの値は別のページ（印刷行を除いて空白のphpページ）に表示されます。

HTMLページのコードは次のとおりです。

<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>

また、次のように 1 回の送信で値を PHP プログラムに送信しようとしました。

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

PHP ページのコードは次のとおりです (コードでは、値を 1 つだけ送信して 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;

?>

claculateRate 関数に直接接続し、検証をスキップして、送信ではなく単なるボタンとしてボタンをコーディングすると、別の PHP ページに送信せずに非表示フィールドに無駄な値が返されますが、送信される値は常に 0.00 になります。 .

ありがとう！！！

更新されたコード: 動作していません - エラーが発生しています:

「メソッドは許可されていません

要求されたメソッド POST は、URL /testfiles/Ungar_Bradley_1585_PHPwithMySQL/assignment_8_mortgage.html では許可されていません。"

「ボタン」タイプを「送信」に変更した場合、値が返される「支払い」フィールドに 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>
4

2 に答える 2

1

変更したい点がいくつかありますが、それは先生が何を許可するかによると思います

このプロジェクト全体で 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');
        }
    }
});
于 2012-09-12T21:13:49.650 に答える
1

action="assignment_8_calculate.php"フォーム要素から を削除しonsubmit=" calculateRate();"、送信ボタンから を削除し、フォーム要素を追加onsubmit="return false;"し、最後に、validateForm()エラーがない場合に true を返す関数で、次のように変更します。

if (errmsg == '')
{
    calculateRate();
}
return false;
于 2012-09-12T21:15:39.210 に答える