的Javascript：提交按鈕W /證實的隱藏字段值

我在哪裏，我要創造出使用JavaScript/AJAX需要和「加息」的「貸款數額」來計算每月支付抵押貸款計算器處理作業。在「量」 &「利息」是由用戶填寫，每月的還款額是在PHP程序計算並送回了「支付」領域。的Javascript：提交按鈕W /證實的隱藏字段值

我需要驗證用戶輸入並同時獲得「支付」字段顯示計算支付。

現在，我怎麼把它編碼當我按下提交驗證正確，但計算支付值顯示一個單獨的頁面（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>

我也試過在一個發送發送值到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; 

?>

如果我只是一個按鈕的代碼的按鈕，而不是一個提交，與直接連接到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>

來源

2012-09-12 Brad

有幾件事情我會改變了，但我想這取決於你的老師會允許

我可以使用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-12 21:13:49 James

看起來不錯，但不能使用jquery。 :( – Brad

有幾種方法可以在jQuery系統中讀取 – James

從表單元素中取出action="assignment_8_calculate.php"一個更好的工作任何驗證，從提交按鈕中刪除onsubmit=" calculateRate();"，在表單元素中添加onsubmit="return false;"，最後在validateForm()函數中，如果沒有錯誤，它將返回true，將其更改爲

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

來源

2012-09-12 21:15:39 dbf

嘿dbf，謝謝你的回覆我試着添加代碼但是得到了一個新的錯誤如果你有第二個可以檢查我原來發布的上面添加的代碼它起始於：「UPDATED CODE：NOT WORKING - Getting Error：」THANKS！ – Brad

@Brad'input =「submit」'仍然有'onsubmit'屬性，將'onsubmit ='return false''從這個輸入移動到'form'元素，說實話，我強烈建議用jQuery來做這件事，也可以嘗試更新後的代碼，其中'return true;'變成'return false;'以防止執行click事件。 – dbf

的Javascript：提交按鈕W /證實的隱藏字段值

回答

相關問題