0

エンドユーザーがフォームのフィールドに値を入力すると、計算ページに送信され、計算された値が更新なしで同じフォームに返され、計算された出力が表示されます。ajax/jquery と php で行うことは可能ですか。私のフォームコードは次のようなものです:

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

更新と送信ボタンなしで、上記の 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>

誰でもこの点で私を助けてくれますか

前もってありがとうラムサイ

4

1 に答える 1

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

注：1）phpページで、送信された値を持つすべての入力、textareasをエコーし​​ます

2）フォームタグに属性を追加しますonSubmit = "return false;"

于 2012-05-10T11:41:36.843 に答える