JavaScript query string not working

Question

I have this form

<form name="exampleform" id="exampleform" action="example123.html" method="get">
    <fieldset>
        <legend>Creating The Querystring</legend>
        <label for="name_1">Name:</label>
        <input type="text" name="name1" id="name_1" tabindex="1" size="40" value="Test1" />
        <br />
        <br />

        <input type="submit" id='view_1' value="Submit" tabindex="2" />

    </fieldset>


    <br />
    <br />
    <fieldset>
        <legend>Creating The Querystring</legend>
        <label for="name_2">Name:</label>
        <input type="text" name="name2" id="name_2" tabindex="1" size="40" value="Test2" />
        <br />
        <br />

        <input type="submit" id='view_2' value="Submit" tabindex="2" />

    </fieldset>
</form>

When it submits to the next page I want to be able to get the query string for the button that was clicked and not see both strings when the page loads. The script that I am using on the receiving page is:

 <script type="text/javascript">

        document.write("Name: " + Request.QueryString("name1"));
        document.write("Name: " + Request.QueryString("name2"));

    </script>

and

    /*TITLE: Client-Side Request Object for javascript by Andrew Urquhart (UK)
HOME: http://andrewu.co.uk/tools/request/
COPYRIGHT: You are free to use this script for any use you wish, the only
thing I ask you do is keep this copyright message intact with the script.
Please don't pass it off as your own work, but feel free to enhance it and send
me the updated version. Please don't redistribute - it makes it harder to distribute
new versions of the script. This script is provided as is, with no warranty of any
kind. Use it at your own risk.
VERSION: #1.41 2007-06-28 18:10 UTC*/
function RObj(ea) {
    var LS  = "";
    var QS  = new Object();
    var un  = "undefined";
    var x   = null; // On platforms that understand the 'undefined' keyword replace 'null' with 'undefined' for maximum ASP-like behaviour.
    var f   = "function";
    var n   = "number";
    var r   = "string";
    var e1  = "ERROR: Index out of range in\r\nRequest.QueryString";
    var e2  = "ERROR: Wrong number of arguments or invalid property assignment\r\nRequest.QueryString";
    var e3  = "ERROR: Object doesn't support this property or method\r\nRequest.QueryString.Key";
    var dU  = window.decodeURIComponent ? 1 : 0;

function Err(arg) {
    if (ea) {
        alert("Request Object:\r\n" + arg);
    }
}
function URID(t) {
    var d = "";
    if (t) {
        for (var i = 0; i < t.length; ++i) {
            var c = t.charAt(i);
            d += (c  ==  "+" ? " " : c);
        }
    }
    return (dU ? decodeURIComponent(d) : unescape(d));
}
function OL(o) {
    var l = 0;
    for (var i in o) {
        if (typeof o[i] != f) {
            l++;
        }
    }
    return l;
}
function AK(key) {
    var auk = true;
    for (var u in QS) {
        if (typeof QS[u] != f && u.toString().toLowerCase() == key.toLowerCase()) {
            auk = false;
            return u;
        }
    }
    if (auk) {
        QS[key] = new Object();
        QS[key].toString = function() {
            return TS(QS[key]);
        }
        QS[key].Count = function() {
            return OL(QS[key]);
        }
        QS[key].Count.toString = function() {
            return OL(QS[key]).toString();
        }
        QS[key].Item = function(e) {
            if (typeof e == un) {
                return QS[key];
            }
            else {
                if (typeof e == n) {
                    var a = QS[key][Math.ceil(e)];
                    if (typeof a == un) {
                        Err(e1 + "(\"" + key + "\").Item(" + e + ")");
                    }
                    return a;
                }
                else {
                    Err("ERROR: Expecting numeric input in\r\nRequest.QueryString(\"" + key + "\").Item(\"" + e + "\")");
                }
            }
        }
        QS[key].Item.toString = function(e) {
            if (typeof e == un) {
                return QS[key].toString();
            }
            else {
                var a = QS[key][e];
                if (typeof a == un) {
                    Err(e1 + "(\"" + key + "\").Item(" + e + ")");
                }
                return a.toString();
            }
        }
        QS[key].Key = function(e) {
            var t = typeof e;
            if (t == r) {
                var a = QS[key][e];
                return (typeof a != un && a && a.toString() ? e : "");
            }
            else {
                Err(e3 + "(" + (e ? e : "") + ")");
            }
        }
        QS[key].Key.toString = function() {
            return x;
        }
    }
    return key;
}
function AVTK(key, val) {
    if (key != "") {
        var key = AK(key);
        var l = OL(QS[key]);
        QS[key][l + 1] = val;
    }
}
function TS(o) {
    var s = "";
    for (var i in o) {
        var ty = typeof o[i];
        if (ty == "object") {
            s += TS(o[i]);
        }
        else if (ty != f) {
            s += o[i] + ", ";
        }
    }
    var l = s.length;
    if (l > 1) {
        return (s.substring(0, l-2));
    }
    return (s == "" ? x : s);
}
function KM(k, o) {
    var k = k.toLowerCase();
    for (var u in o) {
        if (typeof o[u] != f && u.toString().toLowerCase() == k) {
            return u;
        }
    }
}
if (window.location && window.location.search) {
    LS = window.location.search;
    var l = LS.length;
    if (l > 0) {
        LS = LS.substring(1,l);
        var preAmpAt = 0;
        var ampAt = -1;
        var eqAt = -1;
        var k = 0;
        var skip = false;
        for (var i = 0; i < l; ++i) {
            var c = LS.charAt(i);
            if (LS.charAt(preAmpAt) == "=" || (preAmpAt == 0 && i == 0 && c == "=")) {
                skip=true;
            }
            if (c == "=" && eqAt == -1 && !skip) {
                eqAt=i;
            }
            if (c == "&" && ampAt == -1) {
                if (eqAt!=-1) {
                    ampAt=i;
                }
                if (skip) {
                    preAmpAt = i + 1;
                }
                skip = false;
            }
            if (ampAt>eqAt) {
                AVTK(URID(LS.substring(preAmpAt, eqAt)), URID(LS.substring(eqAt + 1, ampAt)));
                preAmpAt = ampAt + 1;
                eqAt = ampAt = -1;
                ++k;
            }
        }
        if (LS.charAt(preAmpAt) != "=" && (preAmpAt != 0 || i != 0 || c != "=")) {
            if (preAmpAt != l) {
                if (eqAt != -1) {
                    AVTK(URID(LS.substring(preAmpAt,eqAt)), URID(LS.substring(eqAt + 1,l)));
                }
                else if (preAmpAt != l - 1) {
                    AVTK(URID(LS.substring(preAmpAt, l)), "");
                }
            }
            if (l == 1) {
                AVTK(LS.substring(0,1),"");
            }
        }
    }
}
var TC = OL(QS);
if (!TC) {
    TC=0;
}
QS.toString = function() {
    return LS.toString();
}
QS.Count = function() {
    return (TC ? TC : 0);
}
QS.Count.toString = function() {
    return (TC ? TC.toString() : "0");
}
QS.Item = function(e) {
    if (typeof e == un) {
        return LS;
    }
    else {
        if (typeof e == n) {
            var e = Math.ceil(e);
            var c = 0;
            for (var i in QS) {
                if (typeof QS[i] != f && ++c == e) {
                    return QS[i];
                }
            }
            Err(e1 + "().Item(" + e + ")");
        }
        else {
            return QS[KM(e, QS)];
        }
    }
    return x;
}
QS.Item.toString = function() {
    return LS.toString();
}
QS.Key = function(e) {
    var t = typeof e;
    if (t == n) {
        var e = Math.ceil(e);
        var c = 0;
        for (var i in QS) {
            if (typeof QS[i] != f && ++c == e) {
                return i;
            }
        }
    }
    else if (t == r) {
        var e = KM(e, QS);
        var a = QS[e];
        return (typeof a != un && a && a.toString() ? e : "");
    }
    else {
        Err(e2 + "().Key(" + (e ? e : "") + ")");
    }
    Err(e1 + "().Item(" + e + ")");
}
QS.Key.toString = function() {
    Err(e2 + "().Key");
}
this.QueryString = function(k) {
    if (typeof k == un) {
        return QS;
    }
    else {
        if (typeof k == n) {
            return QS.Item(k);
        }
        var k = KM(k, QS);
        if (typeof QS[k] == un) {
            t = new Object();
            t.Count = function() {
                return 0;
            }
            t.Count.toString = function() {
                return "0";
            }
            t.toString = function() {
                return x;
            }
            t.Item = function(e) {
                return x;
            }
            t.Item.toString = function() {
                return x;
            }
            t.Key = function(e) {
                Err(e3 + "(" + (e ? e : "") + ")");
            }
            t.Key.toString = function() {
                return x;
            }
            return t;
        }
        else {
            return QS[k];
        }
    }
}
this.QueryString.toString = function() {
    return LS.toString();
}
this.QueryString.Count = function() {
    return (TC ? TC : 0);
}
this.QueryString.Count.toString = function() {
    return (TC ? TC.toString() : "0");
}
this.QueryString.Item = function(e) {
    if (typeof e == un) {
        return LS.toString();
    }
    else {
        if (typeof e == n) {
            var e = Math.ceil(e);
            var c = 0;
            for (var i in QS) {
                if (typeof QS[i] != f && ++c == e) {
                    return QS[i];
                }
            }
            Err(e1 + ".Item(" + e + ")");
        }
        else {
            return QS[KM(e, QS)];
        }
    }
    if (typeof e == n) {
        Err(e1 + ".Item(" + e + ")");
    }
    return x;
}
this.QueryString.Item.toString = function() {
    return LS.toString();
}
this.QueryString.Key = function(e) {
    var t = typeof e;
    if (t == n) {
        var e = Math.ceil(e);
        var c = 0;
        for (var i in QS) {
            if (typeof QS[i] == "object" && (++c == e)) {
                return i;
            }
        }
    }
    else if (t == r) {
        var e = KM(e, QS);
        var a = QS[e];
        return (typeof a != un && a && a.toString() ? e : "");
    }
    else {
        Err(e2 + ".Key(" + (e ? e : "") + ")");
    }
    Err(e1 + ".Item(" + e + ")");
}
this.QueryString.Key.toString = function() {
    Err(e2 + ".Key");
}
this.Version = 1.4;
this.Author = "Andrew Urquhart (http://andrewu.co.uk)";
}
var Request = new RObj(false);

How can i only display the string for the button that was clicked and not see both strings?

here is a test page:userpages.umbc.edu/~andrade1/querystring/querystring/… when either of the buttons are clicked on the action page it shows both of the query strings and won't display just one — Jack
– Jack, Commented Apr 8, 2011 at 21:05

Aravindan R · Accepted Answer · 2011-04-08 21:11:51Z

0

For identifying the button that's clicked, you need to have two forms. name1 and view_1 should be enclosed in one form and the other form should have name2 and view_2. This is the only way to identify the clicked button. If name1 is present then view_1 is clicked, if name2 is present then view_2 is clicked.

UPDATE: Added code sample

<form name="exampleform" id="exampleform" action="example123.html" method="get">
    <fieldset>
        <legend>Creating The Querystring</legend>
        <label for="name_1">Name:</label>
        <input type="text" name="name1" id="name_1" tabindex="1" size="40" value="Test1" />
        <br />
        <br />    
        <input type="submit" id='view_1' value="Submit" tabindex="2" />    
    </fieldset>
</form>

    <br />
    <br />
<form name="exampleform1" id="exampleform1" action="example123.html" method="get">
    <fieldset>
        <legend>Creating The Querystring</legend>
        <label for="name_2">Name:</label>
        <input type="text" name="name2" id="name_2" tabindex="1" size="40" value="Test2" />
        <br />
        <br />

        <input type="submit" id='view_2' value="Submit" tabindex="2" />

    </fieldset>
</form>

answered Apr 8, 2011 at 21:11

Aravindan R

3,0841 gold badge30 silver badges45 bronze badges

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

1 Comment

Jack Over a year ago

it doesn't work. It display name: test1 name: null or name: null name: test2

Diodeus - James MacFarlane · Accepted Answer · 2011-04-08 21:15:22Z

0

You are placing both name fields in one form. If you want just the one value, use two forms.

answered Apr 8, 2011 at 21:15

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

1 Comment

Jack Over a year ago

I would like them to be in the same form I have multiple buttons that show for each row of a table

The_asMan · Accepted Answer · 2011-04-08 21:45:02Z

I rewrote your example page Now you have 2 forms exampleform and exampleform2. Both submit data to the same page example123.html Note also in the second form I renamed everything from name_2 to name_1 keeping it consistant with the first form

<form name="exampleform" id="exampleform" action="example123.html" method="get">
  <fieldset>
    <legend>Creating The Querystring</legend>
    <label for="name_1">Name:</label>
    <input name="name1" id="name_1" tabindex="1" size="40" value="Test1" type="text">
    <br>
    <br>
    <input value="Submit" tabindex="2" type="submit">
    <input value="Reset" tabindex="2" type="reset">
  </fieldset>
</form>
<form name="exampleform2" id="exampleform2" action="example123.html" method="get">
  <br>
  <br>
  <fieldset>
    <legend>Creating The Querystring</legend>
    <label for="name_1">Name:</label>
    <input name="name1" id="name_1" tabindex="1" size="40" value="Test2" type="text">
    <br>
    <br>
    <input value="Submit" tabindex="2" type="submit">
    <input value="Reset" tabindex="2" type="reset">
  </fieldset>
</form>

Now in your response page all you need to look for is

document.write("Name: " + Request.QueryString("name1"));

name2 no longer exists
[UPDATE] As per a comment you made below. You can not have more then one submit button per form where they submit different data unless you validate the data onsubmit.

Community · Accepted Answer · 2017-05-23 09:58:44Z

There is a serious security problem with what you are trying to do, as I will explain below. But you can still utilize your technique if you follow through.

Using your current code, you could do it by making sure the second file is named "example123.html", is saved in the same directory as the other file, and that your document.write() calls occur after the Request object is defined. Also check for null values, which are made particularly difficult by this class which returns an object rather than a string, so it can not be as easily compared with null.

var name1 = Request.QueryString("name1"),
    name2 = Request.QueryString("name2");
if (name1+'' != 'null') {
    document.write("Name: " + name1);
}

if (name2+'' != 'null') {
    document.write("Name: " + name2);
}

That being said the code you are using follows a number of (other) bad practices, and while convenient perhaps for some people in mimicking the ASP Request behavior is really better abandoned in favor of other more standard practices.

We made a similar function for those coming instead from a PHP background (see http://phpjs.org/functions/import_request_variables:431 ) which if you use the following code, will let you access your variables like this:

ini_set('phpjs.getVarsObj', $_GET = {});
import_request_variables('g');

if ($_GET['name1']) {
    document.write(htmlspecialchars($_GET['name1']));
}
if ($_GET['name2']) {
    document.write(htmlspecialchars($_GET['name2']));
}

HOWEVER!!.... Please note the important warning though that if you use functions like the one you found (or ours), you are checking the URL for this information, since 1) your form is method=get, and 2) since client-side JavaScript can't by itself detect any other methods of how the data was sent to it, and thus if you are not careful about what you do with the $_GET variable's contents, someone could link someone to your site in such a way as to allow your site's visitor's cookie-stored passwords to be stolen or do other mischief. In other words, as with server-side code, be aware of XSS (Cross-site scripting).

For example, if someone filled in the name on your form with this code:

<script>alert('boo!');</script>

...in some browsers, besides for the person submitting the form, anyone who clicks on the link that results (e.g., if a hacker tempted someone to click it), will see that alert. This may not seem so serious, but if the JavaScript instead detects their cookie password on your site, they could craft it so that the script sends their cookies to their own site.

A somewhat safer solution is to use a function such as http://phpjs.org/functions/htmlspecialchars:426 to escape the potentially unsafe characters like < and & .

document.write(htmlspecialchars($_GET['name1']);

This function was based on the function of the same name in PHP, so it can be used there for the same purppose.

(If you actually WANT to allow HTML to be included in the page, that is more challenging and happens to be a question I just asked: JavaScript-based X/HTML & CSS sanitization )

Collectives™ on Stack Overflow

JavaScript query string not working

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related