Critical Developers

Programmers Knowledge Base

jQuery Get Querystring and Make the document readonly with handling undefined querystring


// For eg. lets the url be
// Get QueryString value  from jQuery.parseQuerystring plugin and make all elments in "#container" div disabled or readonly.

    var qstr = $.parseQuerystring();                  // assign nvpair object to qstr variable(Pls refer plugin as below)
    var $data = $("#container");
   // we can access querystring variable in 2 ways:- qstr.readmode OR qstr["readmode"]
    if (qstr.readmode != undefined) {                 // check if querystring is not present or undefined
        if (qstr.readmode.length != 0) {              // check length of querystring value if querystring is present
            $data.find(":input").each(function () { $(this).attr("disabled", true); $(this).addClass("clsreadonly"); });
            $data.find(":button,:submit,:reset").each(function () { $(this).hide(); });
            $data.find("#actiondiv").append("<input type='button' value='Back' onclick='javascript:history.back();' class='buttonclass' style='width:60px;' />");

/* Styles */

.clsreadonly{background:transparent; border:0 none;}
#actiondiv{width:100%; text-align:center;}

/* Styles End */

"#actiondiv" is a div element in which I have kept my submit and reset buttons, and to make the document disabled I am hiding all buttons
on document and finally adding just a "Back" button which will be enabled as it is appending after hiding all buttons.
Note:- we can also use $(this).attr("readonly", true); but it doesn't remove focus from element and we need to add some more script
            like onfocus=blur();

Note:- To hide/show the button element, if possible use server side script as you all know as per today
users/visitors have become very creative by using browsers add-ons like Firebug, Yslow etc.

* jQuery.parseQuerystring (Plugin)
* Utility to dissect the querysting and return a name/value pair object
* Copyright (c) 2011 Paul Gueller paul(dot)gueller(at)gmail(dot)
* Dual licensed under MIT and GPL.
* Date: 26-April-2011
* @author Paul Gueller
* @version 1.0.2
* @id jQuery.parseQuerystring
* @param null
* @return object name/value pairs
* @example
*  url:
*    - $.parseQuerystring().id == 5
*  - var qs = $.parseQuerystring();
*  - qs.sort == "asc"

    parseQuerystring: function () {
        var nvpair = {};                    // Declare Object
        var qs ='?', '');
        var pairs = qs.split('&');
        $.each(pairs, function (i, v) {
            var pair = v.split('=');
            nvpair[pair[0]] = pair[1];
        return nvpair;

Recommendation:- Use  jQuery.parseQuerystring (Plugin)
 jQuery.parseQuerystring (Plugin) Link:-


Make the html div element clickable without any 1px spacer image

Make the html div element clickable without any 1px spacer image


<div class="clickme" rel="targetpage.aspx">
    <h3>I am a Clickable Div</h3>

I am using the “rel” attribute of div for target page url which will be used in script onclick of div.


border:solid 1px #b5b5b5;
cursor:pointer;   /* to show that it has some link */


Make sure you are using jQuery otherwise convert the below script into javascript.

        <script type="text/javascript">
            $(".clickme").click(function () {
                window.location = $(this).attr("rel");
                return false;

Hope it helps you to grow your creativity… :-)