JavaScript passing variables between functions and processing them

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.开发者_C百科getElementById("a1").innerHTML = "";
     }
   }
   

---

There are basically three alternatives:

• Have the PHP script put all the data on the page as JavaScript arrays and handle everything in JavaScript. If the total amount of data is not too much, this is an OK solution
• Reload the entire page when the user makes a selection and handle everything in PHP (including keeping existing selections) - this is the only way to make it work without JavaScript, but has only disadvantages otherwise.
• Use AJAX when the user makes a selection, i.e. JavaScript calls the server in the background and a special PHP script returns only the relevant data (typically using JSON format) which the JavaScript then uses to update the page. This is how it's typically done nowadays.

---

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.

---

You want AJAX - write a server-side data feed in PHP and browser-side mini-application in JS that talks to the server feed and updates the webpage accordingly. This is achieved using Javascript's XMLHttpRequest object. I highly recommend you learn to use it and then rely on a JS library that wraps around it and provides higher level services (like jQuery)