2012-05-10 8 views
0

エンドユーザーがフォームのフィールドに値を入力するとテキストボックスを持つフォームがあり、計算ページに送信され、再び返されますリフレッシュなしの同じフォームへの計算値と計算された出力が表示されます。それはajax/jqueryとPHPで行うことは可能ですか?誰もがこの点フォームの値をあるフォームから別のフォームに渡して最初のフォームに戻す

で私を助けてください、私はリフレッシュすることなく、上記の3つの値に基づいて、この値を表示し、ボタン

</div> 
      <div id="formpoints"> 
     <div id="left"> 
     Systolic BP: 
     </div> 
     <div id="right">  
     <input type="text" name="Systolic BP" id="Systolic BP" /> 
     </div> 
    </div> 
      <div id="formpoints"> 
     <div id="left"> 
     Diastolic BP: 
     </div> 
     <div id="right">  
     <input type="text" name="Diastolic BP" id="Diastolic BP" /> 
     </div> 
    </div> 
      <div id="formpoints"> 
     <div id="left"> 
     Pulse: 
     </div> 
     <div id="right">  
     <input type="text" name="pulse" id="pulse" /> 
     </div> 
    </div> 
      <div id="formpoints"> 
     <div id="left"> 
     Temperature: 
     </div> 
     <div id="right">  
     <input type="text" name="Temp" id="Temp" /> 
     </div> 
    </div> 
      <div id="formpoints"> 
     <div id="left"> 
     General Health status: 
     </div> 
     <div id="right">  
     <input type="text" name="ghs" id="ghs" /> 
     </div> 
    </div> 
      <div id="formpoints"> 
     <div id="left"> 
     Emergency : 
     </div> 
     <div id="right">  
     <input type="text" name="emergency" id="emergency" /> 
     </div> 
    </div> 
     </form> 
     <script> 
     $("button").click(function(){ 
    $.post("calculator.php",$(vitals).serialize(),function(result) 
    { 
    $(vitals).html(result);} 
    ); 
    }); 

     </script> 
     </div> 

    </body> 
    </html> 

を提出したい

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <style type="text/css">@import "css/jquery.datepick.css";</style> 
    <script type="text/javascript" src="js/jquery.datepick.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/css.css"/> 
    </head> 

    <body> 
    <div id="formwraper"> 
    <div id="doctorstitle"><h1> Vitals</h1><br/></div> 
    <div id="formbody"> 

     <form name="vitals" method="post" action="calculator.php" onSubmit="return false";> 
     <div id="formpoints"> 
     <div id="left"> 
     Age: 
     </div> 
     <div id="right">  
     <input type="text" name="age" id="age" /> 
     </div> 
    </div> 
      <div id="formpoints"> 
     <div id="left"> 
     Height (in cms): 
     </div> 
     <div id="right">  
     <input type="text" name="height" id="height" /> 
     </div> 
    </div> 
      <div id="formpoints"> 
     <div id="left"> 
     Weight (in kgs): 
     </div> 
     <div id="right">  
     <input type="text" name="Weight" id="Weight" /> 
     </div> 
<div> Calculated BMI value here</div> 

: マイフォームのコードは次のようです事前に

おかげ Ramsai

+2

http://mattgemmell.com/2008/12/08/what-have-you-tried/それは私がそのURLを心から知っている悲しい兆候です。 –

+0

@rory私はスプラッシュ歓迎の画面としてそれを作る必要があると思う。 –

+0

しかし、あなたが助けを必要とするまであなたが書いたコードを投稿することができます。現時点では、あなたの質問は引用の仕様のように読まれます。 –

答えて

1
$("button").click(function(){ 
$.post("php page url",$(form_id).serialize(),function(result) 
{ 
$(form_id).html(result);} 
); 
}); 

注: 1)phpページで、エコーされたすべての入力、テキストエリア

2)フォームタグに属性を追加onSubmit = "return false;"

+0

あなたはどんなエラーを出していますか? –

関連する問題