21 replies to this topic

[Shadrack]

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

[Tuishimi]

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.

[Tuishimi]

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[s].

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

[threetonesun]

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

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

[Shadrack]

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

[Shadrack]

threetonesun, on 21 February 2013 - 17:23, said:

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

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.

[tim_s]

Does this help?

LINK: http://api.jquery.com/serialize/

Tell me the down falls and I will be able to clearly understand your issue and assist.

[Tuishimi]

Shadrack, on 21 February 2013 - 17:26, 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.

[Shadrack]

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.

[threetonesun]

Shadrack, on 21 February 2013 - 17:32, 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.

[Shadrack]

threetonesun, on 21 February 2013 - 17:58, 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.

[threetonesun]

(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);
})();

A better example...

[Shadrack]

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

Here is my form:

<form>
	<table>
		<tr>
			<th>&nbsp;</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.

[Shadrack]

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...

[tim_s]

#
# 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.