Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Turning "key:val" to {"key" : "val"} ?

    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-

    Code:
    $.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-

    Code:
    		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 :

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    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:

    Code:
    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!
    Last edited by tfburges; 07-10-2011 at 07:04 PM. Reason: spelling lol
    I'm the founder of Loggur, a place to build and share web apps focused on maximizing efficiency and productivity:
    http://www.loggur.com

    My personal site and blog:
    http://www.tfburgess.com

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New Coder
    Join Date
    Jun 2007
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you this worked for me! Also thank you for the JSON resource.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •