Apr 26 2005 @ 05:01:50

Dynamic Form Data Collection for manual POST operations

(11)
0

The following Javascript functions can be used to manually POST (or get) data using a form without worrying about what (or how many) elements are in your <form>.

It (ab-)uses "XMLHttpRequest" for the POST part.


Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83		function getHTML(serverPage, objID) {
    var ajax=false;
    /*@cc_on @*/
    /*@if (@_jscript_version >= 5)
    try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            ajax = false;
        }
    }
    @end @*/
    if (!ajax && typeof XMLHttpRequest!='undefined') {
        ajax = new XMLHttpRequest();
    }
    var obj = document.getElementById(objID);
    ajax.open("GET", serverPage);
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
            obj.innerHTML = (ajax.responseText);
            setrelextbh();
        }
    }
    ajax.send('');
    return false;
}

function getFormResults(formID, objID) {
    var ajax=false;
    /*@cc_on @*/
    /*@if (@_jscript_version >= 5)
    try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            ajax = false;
        }
    }
    @end @*/
    if (!ajax && typeof XMLHttpRequest!='undefined') {
        ajax = new XMLHttpRequest();
    }
    var obj = document.getElementById(objID);
    var DataForm = document.getElementById(formID);
    ajax.open(DataForm.method, DataForm.action);
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
            obj.innerHTML = ajax.responseText;
            var obj2 = document.getElementById('popupmessagetext');
            if (obj2) {
                alert(obj2.innerHTML);
                obj2.innerHTML = '';
            }
            setrelextbh();
        }

    }
    var DataString = "";
    for( var i=0; i<DataForm.elements.length; i++ ){
        DataForm.elements[i].disabled=true;
        eName = DataForm.elements[i].name;
        if( eName && eName != '') {
            if ((DataForm.elements[i].type.toLowerCase() == 'radio') || (DataForm.elements[i].type.toLowerCase() == 'checkbox')) {
                if (DataForm.elements[i].checked==true) {
                    DataString = DataString + eName + '=' + escape(DataForm.elements[i].value).replace(new RegExp("\\x2B", "g"), "%2b");
                } else if (DataForm.elements[i].type.toLowerCase() == 'checkbox') {
                    DataString = DataString + eName + '=0';
                }
            } else {
                DataString = DataString + eName + '=' + escape(eval("DataForm."+eName+".value")).replace(new RegExp("\\x2B", "g"), "%2b");
            }
            if( i != DataForm.elements.length - 1 ) DataString = DataString + '&';
        }
    }
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.setRequestHeader("Content-Length", DataString.length);
    ajax.send(DataString);
    return false;
}


Usage: Simply put it in the FORM tag.
1
2		<form method="post" action="?" id="commentform"
onsubmit="getFormResults('commentform','content'); return false">

Of course in this case "commentform" is the ID of the form I wish to submit, and "content" is the ID of the DIV on my page that i wish to fill with the result of the POST action.

The getFormResults function assumes that the form tag has a "method" and an "action". It takes all the values set in the form elements (textarea, input, checkbox, radio buttons,etc....) and creates a name=value& string sequence based on whatever elements if finds. It then sends that data to the form action URI (ajax.send(DataString);) and waits for the objects "onreadystatechange" event.

You can see it in action when commenting here.

Jun 16 2006 @ 06:03:29
Tim Roberts wrote:

...

Not a bad example, seems straightforward enough
Oct 18 2005 @ 19:31:26
rudi wrote:

...

ok
Oct 7 2005 @ 23:17:52
Tanin wrote:

...

Come ON, people...try to be more creative and less lazy when you're testing...
Sep 2 2005 @ 06:47:15
Bishop wrote:

...

Another Test?
Aug 7 2005 @ 22:39:29
test wrote:

...

ing...
Jul 21 2005 @ 18:46:34
io wrote:

...

io
Jul 18 2005 @ 03:22:14
testes wrote:

...

uhuuu
Jul 18 2005 @ 03:21:36
12 wrote:

...

321
Jun 30 2005 @ 04:25:32
a wrote:

...

a
Apr 26 2005 @ 22:16:32
Ryan wrote:

testicles

Ryan - iconBlah ha ha ha ha ha ha
Apr 26 2005 @ 05:51:04
Wendy wrote:

...

Testies, testies 1....2....

Comment on this

0xTC.com is powered by MagnaBlog (C) Written by Tanin, provided in valid XHTML1.0 Strict, shown in CSS v2. It is viewed best in a real browser with javascript enabled and is also availible in RSS format. 0xTC (C) 2004 - 2007 Tanin Ehrami.