Chris Nizzardini

Salt Lake City, Utah Developer / Human / Blogger

MooTools Form Snippet – Easy Ajax Form Submissions

I wrote this function a long time ago when I had just begun using MooTools. They likely have native functionality for this sort of thing, but I’m posting it anyways. Maybe I’ll build a class out of this one day and submit it to mooforge.

This function just gets all the data in a form and returns it in a string fit for AJAX communication over either HTTP POST and HTTP GET. Just pass the form element as the parameter. Works great for MooTools Ajax form submissions. You don’t even have to modify the Ajaax post/get object when adding new input fields, just modify your server-side 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
/**
 * returnXhrRequestFromFormStr
 * @param element (dom element)
 * @return string
 * @TODO: add support for radio buttons
 */
function returnXhrRequestFromFormStr(element)
{
    var len = element.elements.length;
	var str = '';
 
	if(typeof(element)=='string'){
		element = $(element);
	}
 
    for (var i = 0; i < len; i++)
	{
		var e = element.elements[i];
 
       	if(e.id != '' &#038;&#038; e.id != undefined)
		{
			if(e.type == 'text'){ // text elements
				str+= '&#038;'+e.id+'='+encodeURI(escape(e.value));
			}
			else if(e.type=='checkbox' &#038;&#038; e.checked==true){ // checkbox is checked
				str+= '&#038;'+e.id+'=1';
			}
			else if(e.type=='checkbox' &#038;&#038; e.checked==false){  // checkbox is not checked
				str+= '&#038;'+e.id+'=0';
			}
			else if(e.type=='radio' &#038;&#038; e.checked==true)
			{
				str+= '&#038;'+e.name+'='+encodeURI(escape(e.value));
			}
			else if(e.type=='select-one') // select values should also include selectedIndexes text
			{
				var index = $(e.id).selectedIndex;
				if(index != -1){
					str+= '&#038;'+e.id+'_text='+encodeURI(escape(e.options[index].text));
					str+= '&#038;'+e.id+'='+encodeURI(escape(e.value));
				}
			}
			else if(e.type=='select-multiple') // multiple select
			{
				var valueArr = new Array();
				var textArr = new Array();
				for(var j=0;j<e.length;j++){
					if(e.options[j].selected==true){
						valueArr.push(encodeURI(escape(e.options[j].value)));
						textArr.push(encodeURI(escape(e.options[j].text)));
					}
				}
				str+='&#038;'+e.id+'_jsonValue='+JSON.encode(valueArr);
				str+='&#038;'+e.id+'_jsonText='+JSON.encode(textArr);
			}
			else{ // all other elements
				str+= '&#038;'+e.id+'='+encodeURI(escape(e.value));
			}
        }
    }
 
	return str;
}

Drop me a comment if you like this post or have any questions/comments.

Chris Nizzardini has been developing web applications since 2006. He lives and works in beautiful Salt Lake City, Utah. If you’re interested in hiring me for contract work please visit IO Spring LLC.

Twitter Google+ 

, , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>