JavaScript passing variables between functions and processing them

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:

Can I pass the variable between functions - as detailed in the script below?
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.

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 = "";
  }
}

Michael Borgwardt · Accepted Answer · 2010-02-10 11:17:59Z

2

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.

answered Feb 10, 2010 at 11:17

Michael Borgwardt

347k81 gold badges491 silver badges726 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fermin · Accepted Answer · 2010-02-10 11:39:03Z

0

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.

edited Feb 10, 2010 at 11:39

answered Feb 10, 2010 at 11:23

Fermin

36.3k22 gold badges87 silver badges131 bronze badges

2 Comments

Bift Over a year ago

Thanks - the varibles originate from onClick's (onClick="flag('scotislands', 'Scottish islands');) does this make a difference, because I couldn't get this to work when I tried your example...

Fermin Over a year ago

I've updated the code sample to show how you would set the value of these variables. You can then access them from other functions.

mst · Accepted Answer · 2010-02-10 11:12:21Z

0

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)

answered Feb 10, 2010 at 11:12

mst

2471 silver badge5 bronze badges

Collectives™ on Stack Overflow

JavaScript passing variables between functions and processing them

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related