Home/ Questions/Q 7925849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T18:28:45+00:00

I had a form with textboxes, when enduser enter the values into the fields

  • 0

I had a form with textboxes, when enduser enter the values into the fields of the form they will be submitted to a calculation page and they again return the calculated values to the same form with without refresh and the calculated output should be displayed. Is it possible to do with ajax/jquery and php.
My form code is like this:

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

I want to display this value based on the above three values without refresh and submit button

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

Can anyone please help me in this regard

Thanks in advance
Ramsai

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

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

    Note:
    1)In php Page, echo All the input ,textareas with values which are submitted

    2)Add attribute to form tag onSubmit=”return false;”

    • 0