的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 /证实的隐藏字段值

回答

相关问题