CODEWITHSUNDEEP
javascriptphpajaxdom-events
Brad
Brad

Reputation: 145

Submit button with validation and hidden field value

I am working on an assignment where I am to create a mortgage calculator which using JavaScript/Ajax takes the "Amount Financed" and "Interest Rate" to calculate monthly payment. The "amount" & "interest" is filled in by the user and the monthly payment is calculated in a PHP program and sent back to the "payment" field.

I need to validate the user inputs and also get the "payment" field to display the calculated payment.

Right now how I have it coded it validates correctly when I press submit, but the value of the calculated payment is shown on a separate page (the PHP page which is blank except for the print line).

Here is my code for the HTML page:

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

I also tried sending the values to the PHP program in one send like this:

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

Here is the code for the PHP page (please note that in the code is commented out examples of when I tried to send just one value and explode it within my 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;

?>

If I code the button as just a button and not a submit, with direct connection to the calculateRate function and skipping the validation a useless value is returned to the hidden field without sending to the separate PHP page, but value sent will always be a 0.00.

UPDATED CODE: NOT WORKING - Getting Error:

"Method Not Allowed

The requested method POST is not allowed for the URL /testfiles/Ungar_Bradley_1585_PHPwithMySQL/assignment_8_mortgage.html."

If I were to just change the "button" type to a "submit" then I get a 0.00 value in the "payment" field where the value is to be returned to.

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

Upvotes: 0

Views: 786

Answers (2)

dbf
dbf

Reputation: 3463

Remove the action="assignment_8_calculate.php" from the form element, remove the onsubmit=" calculateRate();" from the submit button, add onsubmit="return false;" in the form element and finally, in the validateForm() function where it will return true after if says no errors, change it to 

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

Upvotes: 1

James
James

Reputation: 720

There are a few things I would change up but I guess it depends on what your teacher is going to allow

I would use jquery for this entire project.

http://docs.jquery.com/Plugins/Validation would be able to handle any validation you need

and the following code would do a better job of collecting the information from the php script

$.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');
        }
    }
});

Upvotes: 1

Related Questions