...

View Full Version : Turning "key:val" to {"key" : "val"} ?



groog
07-10-2011, 06:11 AM
I have a client that loves the ajax/lightbox concept. Wants to use it on practically everything. I have several forms with many fields that I'm trying to make easier to submit with JQuery post. If you aren't familiar, JQuery post looks like this-


$.post(url, {"key" : "value", "key2" : "value2"}, function(){});

And what I'm trying to do is loop through all of the inputs and build a string that I can submit easily like this. But I don't know how to take a string and turn it into this syntax. I don't really even understand this syntax since I only see it in objects and I've written objects a more old fashioned way I guess you can say. My code looks like this-


window.QuickSubmit = function(formId, finish)
{
frm = document.getElementById(formId);
loc = frm.getAttribute("action");

eles = frm.elements;

str = "";

for(i = 0; i < eles.length; i++)
{
fld = eles[i];

tag = fld.tagName;

key = fld.getAttribute("name");
if(key == null)
continue;

if(tag == "SELECT")
{
value = fld.options[fld.selectedIndex].value;
if(value == null)
value = fld.options[fld.selectedIndex].text;
}
else
{
value = fld.getAttribute("value");
}

str += key + ":" + value + ",";
}

str = str.substr(0, str.length-1);

var d;

$.post(loc, eval("{" + str + "}"), d=finish);

return d;
}

I've tried different methods. My most resent was to use eval but I get an error when doing that-

Uncaught SyntaxError: Unexpected token :

tfburges
07-10-2011, 05:31 PM
Hi groog!

What's happening with the curly brackets is that javascript is creating an object, which (if you're familiar with arrays, as most coders are) is a more basic form of an array - i.e., unordered, no length, etc.

Long story short, you don't need to create a string and evaluate that.

Just create an object with those keys and values and pass that to jQuery's post function.

Something like this:


window.QuickSubmit = function(formId, finish)
{
var postData = {}; // quick way to initialize an object
frm = document.getElementById(formId);
loc = frm.getAttribute("action");

eles = frm.elements;

//str = ""; // don't need the string!

for(i = 0; i < eles.length; i++)
{
fld = eles[i];

tag = fld.tagName;

key = fld.getAttribute("name");
if(key == null)
continue;

if(tag == "SELECT")
{
value = fld.options[fld.selectedIndex].value;
if(value == null)
value = fld.options[fld.selectedIndex].text;
}
else
{
value = fld.getAttribute("value");
}

//str += key + ":" + value + ",";
postData[key] = value; // do this instead!
}

//str = str.substr(0, str.length-1); // dont need this!

var d;

$.post(loc, postData, d=finish);

return d;
}

I haven't tested it, but it should work for you.

Conversely, I believe you can create a string in the form of 'key1=value1&key2=value2&etc=etc' and pass it to jQuery's function as well... but don't take my word for it haha... look up the specs!

Kor
07-11-2011, 10:01 AM
What you want to do is to encode / decode/ parse / stringy a JSON object.

http://www.json.org/js.html

At the other hand of the stick (server-side) you must know that every server-side language must have, also, native JSON parse / encode / decode methods as well.

groog
07-11-2011, 08:15 PM
Thank you this worked for me! Also thank you for the JSON resource.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum