2

I would like to know how I can create a html form to process a url request to http://isitup.org.

The website provides a javascript widget that gives me an option to pass a url within a html file, but I'd like to know how I can do this using a html form.

enter image description here

3
  • Have you tried looking at the source to the form they have on isitup.org? It might turn out that you won't be able to post to them if they only accept posts from their own domain. May 11, 2012 at 17:12
  • have a read of this isitup.org/widget/widget.html May 11, 2012 at 17:15
  • @VivinPaliath it's actually a get form, totally usable across different domains :) Sep 13, 2012 at 17:41

2 Answers 2

2
+100

you can easily do this without a HTML Form as the call can be async

in your html:

<input type="text" id="txtDomain" value="stackoverflow.com" /> 
<button>Check Domain</button>

<div id="result"></div>

and in jQuery:

$(function() {

  $("button").click(function() {

    var url = 'http://isitup.org/' + $("#txtDomain").val() + '.json';

    $.getJSON(url + "?callback=?", function(data) {

      $("#result").html(
        "<h2>" + data.domain + "</h2>" +
        "<ul>" + 
          "<li>Code: " + data.response_code + "</li>" +
          "<li>IP: " + data.response_ip + "</li>" +
          "<li>Time " + data.response_time + " ms</li>" +
        "</ul>"
      );

    });

  });


});

a live example can be found on JsBIN

0
1
isitup={    server : "http://isitup.org/",
    exec : function() {
        var doc = document, node = this.get_elements(document, "isitup-widget"), server = this.server, requested = [];
        var i, len;
        for (i = 0, len = node.length; i < len; i++) {
            var HTML = "";
            var domain = node[i].getAttribute("data-domain");
            if (!domain) {
                domain = window.location.hostname;
                node[i].setAttribute("data-domain", domain);
            }
            HTML += '<div class="isitup-icon">';
            HTML += '<img src="'
                    + server
                    + 'widget/img/loader.gif" width="16px" height="16px" style="vertical-align: middle;" />';
            HTML += '</div>';
            HTML += '<div class="isitup-domain">';
            HTML += '<a href="' + server + domain + '">' + domain + '</a>';
            HTML += '</div>';
            node[i].innerHTML = HTML;
            if (this.is_domain(domain)) {
                if (!this.in_list(domain, requested)) {
                    this.get_json(domain);
                    requested.push(domain);
                }
            } else {
                this.update({
                    "domain" : domain,
                    "status_code" : 3
                });
            }
        }
    },
    get_json : function(domain) {
        var t = "script", d = document;
        var j = d.createElement(t), p = d.getElementsByTagName(t)[0];
        j.type = "text/javascript";
        j.src = this.server + domain + ".json?callback=isitup.update";
        p.parentNode.insertBefore(j, p);
    },
    update : function(result) {
        var node = this.get_elements(document, "isitup-widget"), widget = [];
        var i, len;
        for (i = 0, len = node.length; i < len; i++) {
            if (node[i].getAttribute("data-domain") == result.domain
                    && !node[i].getAttribute("data-checked")) {
                widget.push(node[i]);
                node[i].setAttribute("data-checked", true);
            }
        }
        var j;
        for (j = 0, len = widget.length; j < len; j++) {
            switch (result.status_code) {
            case 1:
                this.set_image("online", widget[j]);
                if (widget[j].hasAttribute("data-uplink")) {
                    this.set_link(widget[j].getAttribute("data-uplink"),
                            widget[j]);
                }
                break;
            case 2:
                this.set_image("offline", widget[j]);
                if (widget[j].hasAttribute("data-downlink")) {
                    this.set_link(widget[j].getAttribute("data-downlink"),
                            widget[j]);
                }
                break;
            case 3:
                this.set_image("error", widget[j]);
                this.set_link(this.server + "d/"
                        + widget[j].getAttribute("data-domain"), widget[j]);
                break;
            }
        }
    },
    set_image : function(image, node) {
        this.get_elements(node, "isitup-icon")[0].firstChild.setAttribute(
                "src", this.server + "widget/img/" + image + ".png");
    },
    set_link : function(link, node) {
        this.get_elements(node, "isitup-domain")[0].firstChild.setAttribute(
                "href", link);
    },
    is_domain : function(domain) {
        re = /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$/;
        return (re.test(domain)) ? true : false;
    },
    in_list : function(value, list) {
        var i, len;
        for (i = 0, len = list.length; i < len; i++) {
            if (list[i] == value) {
                return true;
            }
        }
        return false;
    },
    get_elements : function(node, classname) {
        var doc = document;
        if (typeof doc.getElementsByClassName == "function") {
            return node.getElementsByClassName(classname);
        } else if (typeof doc.querySelectorAll == "function") {
            return node.querySelectorAll("." + classname);
        } else {
            var div = doc.getElementsByTagName("div"), widgets = [];
            var i, len;
            for (i = 0, len = div.length; i < len; i++) {
                if (div[i].className == classname) {
                    widgets.push(div[i]);
                }
            }
            return widgets;
        }
    }
};
var alreadyrunflag = 0;
if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", function() {
        alreadyrunflag = 1;
        isitup.exec();
    }, false);
} else if (document.all && !window.opera) {
    document
            .write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
    var contentloadtag = document.getElementById("contentloadtag");
    contentloadtag.onreadystatechange = function() {
        if (this.readyState == "complete") {
            alreadyrunflag = 1;
            isitup.exec();
        }
    };
}
window.onload = function() {
    setTimeout("if (!alreadyrunflag) { isitup.exec }", 0);
};

They do it with library. Find what you have to do out of this, use only that, rewrite the library, and attach. i think that would be easy.

   get_json : function(domain) {
        var t = "script", d = document;
        var j = d.createElement(t), p = d.getElementsByTagName(t)[0];
        j.type = "text/javascript";
        j.src = this.server + domain + ".json?callback=isitup.update";
        p.parentNode.insertBefore(j, p);
    },
    update : function(result) {
        var node = this.get_elements(document, "isitup-widget"), widget = [];
        var i, len;
        for (i = 0, len = node.length; i < len; i++) {
            if (node[i].getAttribute("data-domain") == result.domain
                    && !node[i].getAttribute("data-checked")) {
                widget.push(node[i]);
                node[i].setAttribute("data-checked", true);
            }
        }

You just need to set the data to this functions and in update function, you can use the result.status_code for your response.

1
  • 1
    i think you are not expecting the whole source code to be written by some one as answer.
    – Kris
    May 14, 2012 at 10:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.