Passing multiple variables through JavaScript

Question

I have the following Javascript functions, where each one add a variable to the URL, and I would like to combine them:

<script>
function showDuration(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "Loading Please Wait";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","getuser.php?duration="+str,true);
        xmlhttp.send();
    }
}

function showDelivery(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "Loading Please Wait";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","getuser.php?delivery="+str,true);
        xmlhttp.send();
    }
}

Its problematic, because both variable needs to be present in the url, or else, i get an error for the one that's not selected. More precisely, I would like to combine:

      xmlhttp.open("GET","getuser.php?delivery="+str,true);

and

    xmlhttp.open("GET","getuser.php?duration="+str,true);

Thanks in advance, and any help would be greatly appreciated.

update

var duration = null;
var delivery = null;

function setDuration(_duration) {
  duration = _duration;
  makeRequest();
}
function setDelivery(_delivery) {
  delivery = _delivery;
  makeRequest();
}
function makeRequest() {
  if (duration != null && delivery != null) {
    var url =
        "getuser.php?duration=" + encodeURIComponent(duration) +
        "&delivery=" + encodeURIComponent(delivery);
    // do the ajaxy stuff
  }
}
function showDuration(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "Loading Please Wait";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","getuser.php?duration="+str,true);
        xmlhttp.send();
    }
}

function showDelivery(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "Loading Please Wait";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","getuser.php?delivery="+str,true);
        xmlhttp.send();
    }
}
</script>

update 2:

<script>

var duration = null;
var delivery = null;

function showDuration(_duration) {
  duration = _duration;
  makeRequest();
}
function showDelivery(_delivery) {
  delivery = _delivery;
  makeRequest();
}
function makeRequest() {
  if (duration != null && delivery != null) {
    var url =
        "getuser.php?duration=" + encodeURIComponent(duration) +
        "&delivery=" + encodeURIComponent(delivery);
     if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
                                    document.getElementById("txtHint").innerHTML = "<div class='loading-indication'><img src='ajax-loader.gif' /> &nbsp; Please wait... Loading New Courses...</div>";

            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET",url);
        xmlhttp.send();
  }
}

combine the functions and pass 2 parameters?

Sterling Archer
– Sterling Archer

2015-03-24 03:30:31 +00:00
Commented Mar 24, 2015 at 3:30 — Sterling Archer
– Sterling Archer, Commented Mar 24, 2015 at 3:30
thanks for the advice but this where i am struggeling

user4644565
– user4644565

2015-03-24 03:40:09 +00:00
Commented Mar 24, 2015 at 3:40 — user4644565
– user4644565, Commented Mar 24, 2015 at 3:40

Amadan · Accepted Answer · 2015-03-24 03:32:34Z

1

I'd do it like this:

var duration = null;
var delivery = null;

function setDuration(_duration) {
  duration = _duration;
  makeRequest();
}
function setDelivery(_delivery) {
  delivery = _delivery;
  makeRequest();
}
function makeRequest() {
  if (duration != null && delivery != null) {
    var url =
        "getuser.php?duration=" + encodeURIComponent(duration) +
        "&delivery=" + encodeURIComponent(delivery);
    // do the ajaxy stuff
  }
}

or even better if you encapsulate it so the variables are not exposed.

answered Mar 24, 2015 at 3:32

Amadan

200k23 gold badges252 silver badges321 bronze badges

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

6 Comments

user4644565 Over a year ago

and sorry for this newbie question but how would i incorporate this into my code

Amadan Over a year ago

You just replace your functions with these, and replace "do ajaxy stuff" with ajaxy stuff you already had. If you don't know how to encapsulate it, don't worry about it for now; you'd need objects and closures in order to do it, which goes out of the scope of the question.

user4644565 Over a year ago

I see. but my function is radically different, so I am a bit confused on how I would incorporate it

Amadan Over a year ago

What is radically different? My function and your OP functions? Your OP functions and your real functions?

Amadan Over a year ago

"replace your functions with these" = "delete your functions and put mine in"; if you want you can rename them to showDuration and showDelivery instead (not sure why I changed the names). "replace 'do ajaxy stuff' with ajaxy stuff you already had" = "delete the 'do the ajaxy stuff' comment, and insert everything you have from if (window.XMLHttpRequest) to xmlhttp.send(), replacing the second parameter to xmlhttp.open with the new url variable".

|

Collectives™ on Stack Overflow

Passing multiple variables through JavaScript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related