itayauerbach Posted April 22, 2010 Share Posted April 22, 2010 I've got a shopping cart page, and I want to add inside the cart form (in which you can remove items, edit quantitiy or check out) a field where one can enter a state and zip code and by that a shipping cost line is added in a table that prints the total price, near the end of the form. I understood that you cannot do form inside a form, and perhaps needs to do it in ajax... can somebody guide me how to do it? thanks, -Itay Quote Link to comment Share on other sites More sharing options...
itayauerbach Posted April 22, 2010 Author Share Posted April 22, 2010 here is the page: http://www.vitawealth.com/cart/cart.php?addproduct=57&site=vw it currently features that shipping calculator beneath the form. i want to insert it above the outcome price report, inside the form. but it doesn't work, because that will be form inside form. this is why i thought about ajax, thou I have no idea how to manifest it. Quote Link to comment Share on other sites More sharing options...
gamblor01 Posted April 23, 2010 Share Posted April 23, 2010 The easiest way to do this is going to take the combination of some javascript code, an additional div tag to your page, and a php script. You should start with some simply AJAX example. w3schools.com has a great tutorial for AJAX. I will give you a skeleton though. It should take the following changes below. You will need to fully implement getShipping.php however. 1. Start by defining the getShipping function in Javascript. This will probably reside in <script> tags in the <head> of your document: function getShipping(state, zip) { xmlhttp=GetXmlHttpObject(); if (xmlhttp==null) { alert ("Sorry but your browser does not support AJAX or Javascript has been disabled"); return; } // we want to invoke getShipping.php var url = "getShipping.php"; // append the values from the form url = url + "?state=" + state; url = url + "&zip=" + zip; // execute the request xmlhttp.onreadystatechange=stateChanged; xmlhttp.open("GET",url,true); xmlhttp.send(null); } function stateChanged() { if (xmlhttp.readyState==4) { document.getElementById("shippingCost").innerHTML=xmlhttp.responseText; } } function GetXmlHttpObject() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } 2. Update your HTML so that it contains the div tag "shippingCost" and will therefore be updated once the AJAX request returns: <td align="right" width="148" bgcolor="#CACBCB"> <font color="#000000" face="Verdana" style="font-size: 8pt">S&H Subtotal:</font> </td> <td align="right" width="87" bgcolor="#CACBCB"> <font color="#000000" face="Verdana" style="font-size: 8pt"><b><div id="shippingCost"></div></b></font></td> <input type="hidden" name="shipping" value="0"> <td width="72" bgcolor="#CACBCB"> </td> 3. Update your form so that the "calculate" button calls the getShipping function: <br><br><input type='submit' value='Calculate' onClick="getShipping(this.form.tostate.value, this.form.tozip.value)"></td> 4. Finally, define the getShipping.php file that AJAX is calling. Here is a very simply example -- you should modify it to suit your needs and reflect a more real-world example: <?php $state = $_GET['state']; $zip = $_GET['zip']; if ($state == "HI" || $state == "AK") { return 8; } else if (substr($zip,0,3) == "787") // always ship free to Austin, TX { return 0; } else { return 5; } ?> Try it out and see if it all works. Let me know! It should work and populate the div tag with the shipping cost once you have selected a state/zip and pressed calculate. You will still need to retrieve this value and add it to the subtotal to update the total cost though. That is left as an exercise for the reader! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.