CODEWITHSUNDEEP
phpmysqljquery
ramsai
ramsai

Reputation: 121

pass form values through ajax from one form to another and get back to the first form

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

Upvotes: 0

Views: 1384

Answers (1)

user1432124
user1432124

Reputation: 

$("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;"

Upvotes: 1

Related Questions