Question

I’m working on a JavaScript based page that returns the cost of delivery, depending on what the user selects(Region, service(pre 12, etc) and weight). I have muddled my way through as I just don’t know JS.

My questions are:

1. Can I pass the variable between functions – as detailed in the script below?
2. Once the above has been achieved, I need to process the variables to display the result, now I could do a massive ifelse, don’t really want to because there will be some 30 odd possibilities. All required info is in a SQL DB so this would be my preferred choice but I’m not sure how to do this with JS, the whole Browser side, Server side issue. Would I need to pass the variables(as above) to PHP (once all 3 are set) to grab the data from the SQL DB? If so, I’m not sure how to do this.

3. If I do use PHP then the page will have to be reloaded, is it possible to get this to be seamless to the user, i.e., all their selections are still displayed?

   function flag(nation, area) {
     this.nation = nation;
     var el = document.getElementById("desc");
     el.innerHTML = 'The region you have selected is <b>' + area + '</b>';
     document.getElementById("flag").innerHTML = '<img src="images/flags/' + nation + '.jpg">';
   }
   
   function output(service) {
     this.service = service;
     var el = document.getElementById("service-desc");
     el.innerHTML = 'You have selected a <b>' + service + '</b> service.';
     document.getElementById("clock").innerHTML = '<img src="images/clock-' + service + '.png">';
   }
   
   function result() {
     //get varibles(nation & serive) from functions above ~ not sure how to do this!
     //process varibles
     if (nation == "UK" && service == "Standard next day") {
       document.getElementById("result").innerHTML = '£9.99';
     } else if (nation == "UK" && service == "Before 12pm") {
       document.getElementById("result").innerHTML = '£14.99';
     }
     // etc,etc,etc....
     else {
       document.getElementById("a1").innerHTML = "";
     }
   }
   

Answer 1

In javascript if you declare a variable outside a function you can use it from any function, this is a global variable. E.g.

var x, y;
function flag(nation,area)
{
  x = nation;
  y = area;
}
function output(service)
{}    
function result() {
  //In here you can do whatever you want with x and y
}

You would be best creating a PHP script that gets your data from the database and returns it to your javascript. The best way to do this would be an AJAX call, this would allow you to seemlessly get the data from the database that you want and only update specific parts of the page rather than the whole page.

I would recommend having a look at jQuery as it has some very easy to use AJAX methods. It is just a library that wraps javascript and has lots of easy to use functionality, good introduction vids here

Here is a tutorial on how to use jQuery to call a PHP script which gets data from a database.