• 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

    • That is typically how his products go. They start off with a photoshopped image or slapped together pre-production sample. If they get enough orders, they make them, if they don't, they cancel and send refunds. Art of the deal, lol.
    • The idea of an adversary saying "oh darn it, the keys are on a TPM chip so we can't get them" is probably too good to be true.
    • PowerToys is getting a big Dashboard redesign by Taras Buria PowerToys currently has 28 utilities to enhance your user experience (the latest addition arrived in April). You can check out the list of all modules and quickly toggle them on or off on the dedicated Dashboard page that greets you each time you open PowerToys. However, with the increasing list of tools and their vast customizability, many may feel that the Dashboard is a bit undercooked and lacks more polish and useful features. If you think so, Microsoft has some good news for you. In a new PR on PowerToys' GitHub, Microsoft engineers agree that the Dashboard needs improvements, even though it worked fine in earlier days with fewer modules. The proposed solution for the overcrowded Dashboard is a redesigned variant, which looks more similar to the Windows 11 Settings app. With the suggested variant, you get much more from Dashboard: a quick link to the latest changelog, various warnings that need your attention (like conflicting shortcuts), an update button, Quick Launcher, shortcuts for your modules, and a list of available tools. A search box for modules and settings is also there to help you find stuff that you need. Here is how Niels Laute, a software engineer working on WinUI and PowerToys, describes the proposed redesign: Since PowerToys is an open-source project, other developers are welcome to contribute their ideas. One of those ideas is implementing SplitView so that you can open each module's settings without leaving the Dashboard page. Unfortunately, there is no information on when Microsoft will ship the redesigned Dashboard. While we wait for the June 2025 update, check out these three useful plugins for PowerToys Run. What other changes would you like Microsoft to add to PowerToys? Share your thoughts in the comments.
    • But AI is not turned off completely, you can hide stuff, but AI is still there, even on Windows 10 to a lesser extent. You use different MS apps on Windows 11 and again 10 to a lesser extent and AI is there, sure you don't have to use it, but why not just give an easy option to disable all AI? Even Google does that on Android. If you don't think that the MS account is not forced, then I do wonder what you think is forced. Sorry, but it is forced, try and install Windows 10 and 11 without an MS account? You will find that you can't officially, sure there are some ways to get around to and even those are getting more difficult to use as MS decides to stop people using them. My Mac on set up ask you if you have an Apple account, but it is so easy to say, nope, I have not got one. I don't understand why the pushing for an MS account, not all of us want to use the cloud for storage and for most people that is the only advantage of having an MS account, unless you play some games. I have heard that Windows 11 still pop up about using Edge when people don't certainly on updates. I get a pop-up on my Windows 10 machine now and again saying let's finish setting up. It is set up, what they want me to do is to say what I am using the computer for. Nothing to do with them, no idea what they do if I go ahead with what ever they want me to do as I skip, but there should be a no, thanks. I don't use the search in Windows, never have, unless I am looking for files, I use Duck Duck go in my default browser, but some people do, and they should not be forced to use Bing, which in the UK is a load of poop and then if they do click on an in it should open in the default browser.. This is the sort of thing I expected from Apple, Microsoft is far worse than Apple. Context menus again, people should not have to do tweaks, it should be a simple setting.
  • Recent Achievements

    • Week One Done
      patrickft456 earned a badge
      Week One Done
    • One Month Later
      patrickft456 earned a badge
      One Month Later
    • One Month Later
      Jdoe25 earned a badge
      One Month Later
    • Explorer
      Legend20 went up a rank
      Explorer
    • One Month Later
      jezzzy earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      636
    2. 2
      ATLien_0
      275
    3. 3
      +FloatingFatMan
      171
    4. 4
      Michael Scrip
      155
    5. 5
      Steven P.
      132
  • Tell a friend

    Love Neowin? Tell a friend!