gerkintrigg Posted February 4, 2009 Share Posted February 4, 2009 Hello. Is there a way to dynamically change text in the same way as changing a text field value? The website I'm developing is being hosted on: http://magic2k.com/gd2/shop_cart_add.php?prod=6 and I want to add an export charge if the delivery country is outside the UK... but depending on where it is, add VAT etc. I know that this might be a bit hard to do, but if I can work out how to change the postage variable, then I can do the rest myself. Could I refer to a span element with an ID to change the value of the text somehow? Thanks in advance. Neil Quote Link to comment Share on other sites More sharing options...
Psycho Posted February 4, 2009 Share Posted February 4, 2009 Could I refer to a span element with an ID to change the value of the text somehow? That is exactly what you would do, along with innerHTML(). document.getElementById('spanID').innerHTML = 'New Text'; Quote Link to comment Share on other sites More sharing options...
gerkintrigg Posted February 6, 2009 Author Share Posted February 6, 2009 Horrah! I'm not as mad as I thought I was. Thanks very much for this. I just need to work out how to link it with a drop-down box and we're away! Quote Link to comment Share on other sites More sharing options...
Psycho Posted February 6, 2009 Share Posted February 6, 2009 After rereading your initial post I will say that you need to be very careful with how you implement this because you are dealing with monetary calculations. Do NOT rely upon JavaScript for this. It's fine to use it for user experience, but you will want to recalculate the values on the server-side as well. Otherwise, a user w/o JavaScript enabled might go through without paying the calculated costs. Anyway, here is one way to accomplis what you are asking. If the cost was a fixed price based upon the destination, you could just put that price as the value for the options. But, it appears that there will be different types of calculations for each destination, so I went with this method (you would wnt to add additional validations and error handling: <html> <head> <script type="text/javascript"> window.onload = function() { //Set the onchange event and run it onload document.getElementById('destination').onchange = unpdateExportCost; unpdateExportCost(document.getElementById('destination')); } function unpdateExportCost(selObj) { if (!selObj) { selObj = this; } var selValue = selObj.options[selObj.selectedIndex].value.toUpperCase(); var cartTotal = (document.getElementById('cart_total').value); var exportCost = 0; switch(selValue) { case 'UK': exportCost = 0; break; case 'FR': exportCost = (.15 * cartTotal); break; case 'GE': exportCost = (.08 * cartTotal); break; case 'US': exportCost = (.11 * cartTotal) + 10; break; } document.getElementById('export_cost').value = exportCost.toFixed(2); return; } </script> </head> <body> <form name="cart" action="" method="POST"> Purchase price: <input type="text" name="cart_total" id="cart_total" value="95.35" /><br> Ships to: <select name="destination" onchange=""> <option value="UK">UK</option> <option value="FR">France</option> <option value="GE">Germany</option> <option value="US">United Stated</option> </select><br> Export Cost: <input type="text" name="export_cost" id="export_cost" readonly="readonly" /> </forM> </body> 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.