• 0

Transmit an array of strings in a POST operation using Jquery/AJAX


Question

Hello! I would like to submit an array of strings from a web form to my web service and need a little bit of hand holding. My web service I've written seems fine with having an array of strings as input but I'm not exactly sure how to encode this in javascript from my html form elements before I ship the data to my web service to be processed. The array of strings will be pretty small (on the order of 20x3 strings).

I suspect that there is a clever way to do this by coding the form correctly and just running a jquery .serialize() operation on the form and submitting it.

My first thought was to define a number of textbox inputs and give them incremental ID#'s such as "array0_0", "array0_1", "array0_2", "array1_0", "array1_1", "array_1_2", "array_2_1" etc.

Then as a first step before submitting the post, collect all the values in the textboxs and compile an array using 2 nested for loops. Something like that would probably work, but I was wondering if there was some magic that I could do in my form so that jquery recognizes an array of strings in my form so that the .serialize() function just does its magic.

Thanks!

-Shad

21 answers to this question

Recommended Posts

  • 0

Maybe use JSON to convert it back and forth as needed? That's how we do search suggestions on our website. A service serializes JSON, the ajax (jquery, really) javascript picks it up and parses it and displays the results.

  • 0

To be more specific... we have a series of services on one server... including a search service. When you type in a search box a javascript function sends off queries to the server (the web app action written to deal with this) which then queries the service. The service hands back the JSON response, all the action does is reads it as an input buffer and println's it out to the client. Once the javascript gets the response back it parses it and displays the result.

UI (javascript) --> Action (java) --> SERVICE (java) --> Action (java) --> UI (javascript)

  • 0


var arrayToStore = new Array();
var $strings = $('form input');
$strings.each(function(){
arrayToStore.push(this.val());
})
[/CODE]

Also, if you want to store them with a specific key, give them all a data-something attribute rather than abusing the ID property.

  • 0
  On 21/02/2013 at 17:23, threetonesun said:


var arrayToStore = new Array();
var $strings = $('form input');
$strings.each(function(){
arrayToStore.push(this.val());
})
[/CODE]

Also, if you want to store them with a specific key, give them all a data-something attribute rather than abusing the ID property.

I thought that it was only considered "abuse" if you don't use unique IDs.

Your solution is a good start but I need to make a 2d string array in the end so I'll need to tweak it.

  • 0
  On 21/02/2013 at 17:26, Shadrack said:

I'll try that. I found a JSON.stringify function but am not finding a serialize function.

I should look at the code... it probably isn't then, probably just a raw string being written.

  • 0

I have some ideas to play around with. Haha, its funny how much time is spent just communicating between applications and services. This particular application started as a standalone windows program, but my boss wants tighter control so now I'm extending it with a web front end. I think I've spent more time trying to figure out jquery and javascript than I did with the whole write up of my application. I guess whatever you are use to is easy, its when you are up against a learning curve that makes things hard.

Still, I'm amazed at how powerful this jquery and AJAX stuff is and how far the tools have come in the past 10 years. When I was doing full time web development I did everything in server side PHP scripting with auxiliary basic javascript stuff. Using AJAX has the huge advantage of not having to redraw the whole page for every little thing. Now it seems like it is better to offload as much work on the client side as you can and just write auxiliary server side scripting.

  • 0
  On 21/02/2013 at 17:32, Shadrack said:

I thought that it was only considered "abuse" if you don't use unique IDs.

Your solution is a good start but I need to make a 2d string array in the end so I'll need to tweak it.

It's not abuse, per se, but if you can use the data- attribute, it makes much more sense to use it in a case like this. If you gave them all some data-location1 and data-location2 attribute (or however named), as you iterate through with each you can grab those attributes using .attr(), and then store the final string in your 2d array.

  • 0
  On 21/02/2013 at 17:58, threetonesun said:

It's not abuse, per se, but if you can use the data- attribute, it makes much more sense to use it in a case like this. If you gave them all some data-location1 and data-location2 attribute (or however named), as you iterate through with each you can grab those attributes using .attr(), and then store the final string in your 2d array.

Word. Thanks.

  • 0


(function store(){
var arrayToStore = [['',''],['','']];
var $strings = $('form input');
$strings.each(function(){
var x = $(this).attr('data-loc1');
var y = $(this).attr('data-loc2');
arrayToStore[x][y] = $(this).val();
});
console.log(arrayToStore);
})();
[/CODE]

A better example...

  • 0

I keep getting an error when I try to use multidimensional arrays.

Here is my form:

<form>
	<table>
		<tr>
			<th> </th>
			<th>Independent</th>
			<th>Pass</th>
			<th>Fail</th>
		</tr>
		<tr>
			<th>Data Labels</th>
			<td><input type="textbox" data-row="0" data-col="0" /></td>
			<td><input type="textbox" data-row="0" data-col="1" /></td>
			<td><input type="textbox" data-row="0" data-col="2" /></td>
		</tr>
		<tr>
			<th>Data Row 1</th>
			<td><input type="textbox" data-row="1" data-col="0" /></td>
			<td><input type="textbox" data-row="1" data-col="1" /></td>
			<td><input type="textbox" data-row="1" data-col="2" /></td>
		</tr>
		<tr>
			<th>Data Row 2</th>
			<td><input type="textbox" data-row="2" data-col="0" /></td>
			<td><input type="textbox" data-row="2" data-col="1" /></td>
			<td><input type="textbox" data-row="2" data-col="2" /></td>
		</tr>

		</table>
	</form>
	<p><input type="button" value="Run Regression" onClick="ProcessButtonClick()"/></p>

Here is my javascript:

   	 function ProcessButtonClick() {
			var arrayToStore = [['',''],['','']];
			var $strings = $('form input');
			$strings.each(function(){
				var x = parseInt($(this).attr('data-row'));
				var y = parseInt($(this).attr('data-col'));
				arrayToStore[x][y] = $(this).val();
			});
			console.log(arrayToStore);
}

I get this error in the console from Firebug:

  Quote

TypeError: can't convert undefined to object

arrayToStore[x][y] = $(this).val();

If I'm only addressing 1 index, it works (i.e., arrayToStore[x] = $(this).val(); does not give me an error but doesn't give me the right output obviously).

Thank you for your input and time.

  • 0

Its an array initialization problem... once I sized it correctly when dimensioning the array variable it worked fine:

var arrayToStore = [['','',''],['','',''],['','','']]

I did not think that Javascript arrays had to be strictly dimensioned... Is there a short hand for this? I would think new Array(3,3) or something would look better...

  • 0

#

# CORRECT WAY TO INSTANTIATE AN ARRAY WITHOUT DIMENSION

#

var arrayToStore = [];

#

# PROBLEM

#

var arrayToStore = [['',''],['','']];

#

# REASON

#

IF you instantiate the array with only the above "problem" dimensions and do not correct the length beyond this, they will be truncated.

  • 0
  On 21/02/2013 at 22:04, Shadrack said:

Its an array initialization problem... once I sized it correctly when dimensioning the array variable it worked fine:

var arrayToStore = [['','',''],['','',''],['','','']]

I did not think that Javascript arrays had to be strictly dimensioned... Is there a short hand for this? I would think new Array(3,3) or something would look better...

I had worked that code up in a fiddle and was getting the same error, hence why I posted it with ['','']. The general consensus seems to be to create a helper fuction that, given a number x, can push x number of blank objects into the array which you can then fill.

Or... just use an object. It's certainly the preferred way in JS unless you really need an array of arrays.

  On 21/02/2013 at 22:08, tim_s said:

#

# CORRECT WAY TO INSTANTIATE AN ARRAY WITHOUT DIMENSION

#

var arrayToStore = [];

#

# PROBLEM

#

var arrayToStore = [['',''],['','']];

#

# REASON

#

IF you instantiate the array with only the above "problem" dimensions and do not correct the length beyond this, they will be truncated.

If you do arrayToStore = [] and then try to set arrayToStore[0][0] = something, you'll get the same error.

  • 0

If you gave me an example of how you would like the content it might make it easier but off the top of my mind - how does this work?


var arrayData = [];

function ProcessButtonClick() {

var $strings = $('form input');

$strings.each(function(){

var arrayParent = [];
var arrayChild = [];

var x = parseInt($(this).attr('data-row'));
var y = parseInt($(this).attr('data-col'));

arrayChild[x] = $(this).val();
arrayParent[y].push(arrayChild);
arrayData.push(arrayParent)

});



}
[/CODE]

  • 0

tim_s - I get this error:

  Quote

TypeError: arrayParent[y] is undefined

arrayParent[y].push(arrayChild);

Seems like the only way for me to get it to work is to declare the full size of the array... in just about every language you can initialize the size of an array directly but for some reason this doesn't seem possible in Javascript unless I'm missing something.

In the end, the size of my table is fixed so dimensioning out the variable before hand is fine.

  • 0
  On 21/02/2013 at 23:27, Shadrack said:

Seems like the only way for me to get it to work is to declare the full size of the array... in just about every language you can initialize the size of an array directly but for some reason this doesn't seem possible in Javascript unless I'm missing something.

In the end, the size of my table is fixed so dimensioning out the variable before hand is fine.

You're not, as I mentioned, it's not a preferred way of doing things in JS. If you must, this will work:


<script>
var multidArray = function(y){
var array = [];
for(i=0;i<y;i++){
array.push(['example', 'array']);
}
return array;
}
var newArray = multidArray(6);
newArray[1][0] = ['now', 1,1];
newArray[1][1] = 'modified';
console.log(newArray);
</script>
[/CODE]

However, in JS, this is preferable:

[CODE]
var better = {};
better[0] = {1: 'this', 2 : 'will', 3: 'work', 4: 'much', 5: 'better'};
console.log(better[0][1]); // will log 'this'
[/CODE]

  • 0

Well..its all moot because I can't get the input array into my web service.... apparently arrays of strings are a supported output (in JSON format) but not a supported input. I'll have to turn my table into CSV and then program my web service accordingly.

This topic is now closed to further replies.
  • Posts

    • Trump is a low-class guy who thinks painting everything in gold makes him look fancy.
    • Don't forget second season pass, that's not part of the superdeluxe edition.
    • Forza Motorsport gets IndyCar, Career mode improvements, and more by Taras Buria Turn 10 Studios announced the next Forza Motorsport update, which includes new content and various game improvements. Update 21 follows the previous Anniversary Update and adds IndyCar, a free expansion for Career mode, Featured Tours, new reward cars, and more. IndyCar is back in the game, allowing you to get behind the wheel of the latest-generation open-wheel racing cars. New vehicles include the 2025 Chevrolet IndyCar and the 2025 Honda IndyCar. There is also the all-new IndyCar Series in Featured Multiplayer. Career mode now has the Champions Cup, a new home for racecar-focused tours in single-player racing. There, you can drive a variety of modern and classic racecars from one-make series to endurance legends. Completing the Champions Cup will give you various high-reward cars like the 1979 BMW #6 BMW Motorsport M1 Procar, the 1998 Nissan #23 Pennzoil NISMO Skyline GT-R, the 2014 Dodge #93 SRT Motorsports Viper GTS-R, and more. Developers also adjusted the in-game pricing for most racecars to make the Champions Cup more accessible. Another change in Update 21 is the return of previous Featured Tours. The game will feature an additional Tour every month, allowing you to earn some of the previous reward cars and participate in the now-ended events. Here is a brief overview of other changes and improvements: Featured Multiplayer has been reorganized, incorporating player feedback, with the goal of providing players with even more event variety. Click here for a rundown of these changes. We’ve implemented BoP Spec changes to the Forza GT2, Forza GT3, Forza Touring Car, and Forza Proto-H divisions with help from participants in the Forza Insiders Program. See the release notes for an overview of the adjustments that have been made. The Challenge Hub menu has been reorganized to more effectively communicate where rewards can be earned as well as the type of rewards available to unlock. We’ve fixed an issue for players using the Fanatec DD2 racing wheel that would assign the peripheral an incorrect mapping profile. All Builders Cup Tours are now immediately unlocked, which means you no longer need to complete the Modern Tour to access the 3 other Builders Cup Tours. In addition, select Builders Cup Series have been updated to feature additional eligible cars and post-launch tracks. A detailed overview of these changes has been included in the release notes. There are also numerous fixes to AI behavior and competitiveness in single-player racing. You can read more about Forza Motorsport Update 21 in a post on the official Forza website.
    • If it ever gets to a reasonable level of parity, I think more real competition in the Windows space would be a good thing. What I like about this is that it's not just another reskinned Linux distro (with all of those inherent problems). It's meant to literally boot and work like Windows NT+. That could be an interesting development one day -- note that this has been in development since 1996, btw.
    • I simply don't get why this "OS" exists. Who cares? Great, you can now run a Windows 95-era stupid game, super cool...
  • Recent Achievements

    • Explorer
      treker_ed went up a rank
      Explorer
    • Apprentice
      CHUNWEI went up a rank
      Apprentice
    • Veteran
      1337ish went up a rank
      Veteran
    • Rookie
      john.al went up a rank
      Rookie
    • Week One Done
      patrickft456 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      639
    2. 2
      ATLien_0
      273
    3. 3
      +FloatingFatMan
      172
    4. 4
      Michael Scrip
      155
    5. 5
      Steven P.
      140
  • Tell a friend

    Love Neowin? Tell a friend!