basic ajax with basic form

[aebstract]

Trying to use ajax to simply run a form when submit is hit, without the page reloading. I found some code on a website, though I don't know much about javascript at all and couldn't begin to know what to do. Hoping someone can help guide me through it and help me get my scripts fixed. It's a very simple UPS Shipping Calculator script. Right now when you click submit it reloads the page and gives you the cost for shipping. I would prefer to not hit submit. I would like it to update automatically as you select different drop-downs. There are only 2 drop-downs that are options to change, all the other information is in hidden fields.

 

Calculator function:

function upsShippingCalculator() {






$details = grabMemDetails();


if($_POST['txtFromZip'])
{
   $Url = join("&", array("http://www.ups.com/using/services/rave/qcostcgi.cgi?accept_UPS_license_agreement=yes",
   "10_action=3",
   "13_product=".$_POST['selService'],
   "14_origCountry=".$_POST['txtFromCountry'],
   "15_origPostal=".$_POST['txtFromZip'],
   "origCity=".$_POST['txtFromCity'],
   "19_destPostal=".$_POST['txtToZip'],
   "20_destCity=".$_POST['txtToCity'],
   "22_destCountry=".$_POST['txtToCountry'],
   "23_weight=".$_POST['txtPackWeight'],
   "47_rateChart=".$_POST['selRate'],
   "48_container=".$_POST['selPackaging'],
   "49_residential=".$_POST['selResidential'],
   "25_length=".$_POST['txtPackLength'],
   "26_width=".$_POST['txtPackWidth'],
   "27_height=".$_POST['txtPackHeight']));

   $Resp = fopen($Url, "r");
   while(!feof($Resp))
   {
      $Result = fgets($Resp, 500);
      $Result = explode("%", $Result);
      $Err = substr($Result[0], -1);

      switch($Err)
      {
         case 3:
         $output .= $Result[8];
         break;
         case 4:
         $output .= $Result[8];
         break;
         case 5:
         $output .= $Result[1];
         break;
         case 6:
         $output .= $Result[1];
         break;
      }
   }
   fclose($Resp);
   if(!$output)
   {
      $output .= "An error occured.";
   }
}


$output .= "<span name=\"myspan\" id=\"myspan\"></span>";

$output .= "

<form action=\"javascript:get(document.getElementById('myform'));\" name=\"myform\" id=\"myform\" >
Address Type:
<select name=\"selResidential\">
   <option value=\"01\">Residential</option>
   <option value=\"02\">Commercial</option>
</select>
<br />

<input type=\"hidden\" name=\"selPackaging\" value=\"00\">

Service Type:
<select name=\"selService\">
   <option value=\"1DM\">Next Day Air Early AM</option>
   <option value=\"1DA\">Next Day Air</option>
   <option value=\"1DP\">Next Day Air Saver</option>
   <option value=\"2DM\">2nd Day Air AM</option>
   <option value=\"2DA\">2nd Day Air</option>
   <option value=\"3DS\">3 Day Select</option>
   <option value=\"GND\">Ground</option>
   <option value=\"STD\">Canada Standard</option>
   <option value=\"XPR\">Worldwide Express</option>
   <option value=\"XDM\">Worldwide Express Plus</option>
   <option value=\"XPD\">Worldwide Expedited</option>
   <option value=\"WXS\">Worldwide Saver</option>
</select>

<input type=\"hidden\" name=\"selRate\" value=\"Regular+Daily+Pickup\">

<br />

<input type=\"hidden\" name=\"txtFromZip\" value=\"30527\" />
<input type=\"hidden\" name=\"txtFromCity\" value=\"Clermont\" />
<input type=\"hidden\" name=\"txtFromCountry\" value=\"US\" />
<input type=\"hidden\" name=\"txtToZip\" value=\"{$details['zip']}\" />
<input type=\"hidden\" name=\"txtToCity\" value=\"{$details['city']}\" />
<input type=\"hidden\" name=\"txtToCountry\" value=\"US\" />
<br />
<input type=\"submit\" value=\"\" name=\"billmelater\" id=\"checkout\" />
<input type=\"button\" name=\"button\" value=\"Submit\"
   onclick=\"javascript:get(this.parentNode);\">
</form>

";

return $output;
}

 

 

ajax script?

<script type="text/javascript" language="javascript">
   var http_request = false;
   function makePOSTRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }

      http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;
         } else {
            alert('There was a problem with the request.');
         }
      }
   }

   function get(obj) {
      var poststr = "mytextarea1=" + encodeURI( document.getElementById("mytextarea1").value ) +
                    "&mytextarea2=" + encodeURI( document.getElementById("mytextarea2").value );
      makePOSTRequest('post.php', poststr);
   }
</script>

 

Some things like:

      var poststr = "mytextarea1=" + encodeURI( document.getElementById("mytextarea1").value ) +

                    "&mytextarea2=" + encodeURI( document.getElementById("mytextarea2").value );

are specific to the form that was originally posted with the ajax, I know this but I don't want to mess with anything in fear of breaking it worse.

[limitphp]

my advice is to read this post:

http://www.phpfreaks.com/forums/index.php/topic,115581.0.html

 

I knew nothing about ajax, but after reading this, I used their example....and was up and running in a very short time....