Question

我有一个带有文本框的表单，当最终用户将值输入到表单的字段中时，它们将被提交到计算页面，并且他们再次将计算的值返回到相同的表单而不刷新，并且应显示计算的输出。是否可以使用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>

我希望根据上述三个值显示此值，而无需刷新和提交按钮

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

任何人都可以在这方面帮助我

提前致谢 Ramsai

Answer 1

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

注意： 1）在php页面中，回显所有带有提交值的输入，textareas

2）将属性添加到表单标签onSubmit =“return false;”

将表单值通过ajax从一种形式传递到另一种形式并返回第一种形式

1 个答案: