How to call a php function from jquery function

Question

I'm trying to call a php function from jquery function to calculate some values and store them the values in session and list the values that are stored in session. I'm passing the values to jquery function from html form on mouse click event. And i'm using the fallowing code to achieve this.

This is the HTML form code in one php file name totalprice.php:

<table width="100%" >
<tr>
          <td >type</td>
          <td><select name="costtype" id="costype">
      <option>one time</option>\n<option>multi</option>\n
      </select></td></tr>

        <tr>
          <td  align="right">destination </td>
          <td>  <select name="destination" id ="destination"><option>Lagos</option>\n<option>Oyo</option>\n<option>Kano</option>\n<option>Rivers</option>\n<option>Edo</option>\n<option>Ogun</option>\n<option>Kaduna</option>\n<option>Plateau</option>\n<option>Anambra</option>\n<option>Delta</option></select></td>
        </tr>

        <tr>
          <td  align="right">Total eight (Kg) </td>
          <td><input type="text" size="10" name="weight" id="weight"></td>
        </tr>

        <tr>
          <td>&nbsp;</td>
            <td><input type="submit" value="Submit"     onclick="javascript:calculate()" name="caliculate" class="button"></td>
        </tr>
      </tbody></table>

      <div id="testtable">cal value will be displayed here.</div>
</form>

And this is the jquery function

  function calculate() {

    var costtype = $("#costype").val();
    var destination = $("#destination").val();
    var totalweight = $("#weight").val();


    xmlhttp=new XMLHttpRequest();

    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==0)
        {
        document.getElementById("testtable").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("POST","caltest.php?item="+escape(costtype)+"&totalweight="+escape(totalweight)+"&destination"+escape(destination),true);
    xmlhttp.send();

  }

This is caltest.php file where i'm doing the calculation and displaying the session data By using the table

$itemtype = urldecode($_POST['item']);
$destination = urldecode($_POST['destination']);
$totalweight = urldecode($_POST['totalweight']);

$sql        = "select price from prices_list where  lower(costtype)='".strtolower($itemtype )."' ";

$price=0;
$Result         = mysql_query($sql) ;

 while ($row = mysql_fetch_array( $Result))
{
$price     = (isset($row['price'])) ? $row['price'] : "";
 }

$price = round($price,2);

$costcharges = $price*$totalweight;
$costtcharges = round($costcharges,2);

Here i'm doing some code to store the data into session
$fee_details=$test_fee->storetestfee($itemtype,$totalweight,$destination,$costcharges);

 echo "<table width='75%' >
        <tbody><tr>
         <th width='2%' class='highlight'><b>#</b></th>
          <th width='30%' class='highlight'><b>Item </b></th>
          <th width='23%' class='highlight'><b>Destination</b></th>
          <th width='5%' class='highlight'><b>weight (Kg) </b></th>
          <th width='10%' class='highlight'><b>cost Charge</b></th>
        </tr>";
 if(count($fee_details)>0)
 {$i=0;
    foreach($fee_details as $key=>$test_price)
    {$i++;
    echo " <tr>  ";
    echo "<td>".$i."</td>";
    echo "<td>".$test_price['item_type']."</td>";
    echo "<td>".$test_price['destination']."</td>";
    echo "<td>".$test_price['totalweight']."</td>";
    echo "<td>".$courier_details['weightcharges']."</td>";
    echo " </tr>  ";
}}
echo "</tbody>
 </table>";

This code is perfectly working when i worked directly with out using jquery. I want this to be done without refreshing the page. Can any out help out where i'm doing mistake in the code, Please. Thank you.

Answer 1

the first off all, you don't have to use xmlhttp=new XMLHttpRequest(); when using jquery, jquery has a function to do that, just use load, post or ajax, may be this one can help you

$(function(){
    $("input[type=submit]").click(function(){
        var costtype = $("#costype").val();
        var destination = $("#destination").val();
        var totalweight = $("#weight").val();

        $.ajax({
            type    :'POST',
            url     :"caltest.php?item="+escape(costtype)+"&totalweight="+escape(totalweight)+"&destination"+escape(destination),
            success :function(result){
                //action where request complete, result come from server
            }
        });
    )};
});

Answer 2

If you want to use jQuery, then take a look at the jQuery Ajax functionality, I guess that should solve your problems: http://api.jquery.com/jQuery.ajax/