How would this JavaScript implementation look?

February 16, 2006 12:17 PM

I need some help/advice on constructing a simple JavaScript utility.

Let me preface by saying I've Googled quite a bit today for JavaScript resources, and have found lots of tutorials and repositories of code samples, but nothing that seems to explain the combinations of features I need. I've worked before on modifying/expanding pre-existing code and know my around about the script, but can't code from scratch myself. If some whiz wants to whip something up for me, my gratitude would be very real, but a referral to a reference resource or something would be fine as well.

This is all for personal, non-commercial purposes, BTW. I'll explain what I need for reference:

I'd like to have a series of checkboxes as well as a TEXTAREA text box. Each checkbox will represent a group of values, and when the box is checked, that group's values will appear in the text box along with the values of any other checked group, preferably in alphabetical (and/or numerical) order

For example, the groups could be FRUIT, MEAT and BAKED GOODS and the values for each could be:
FRUIT= "apples, oranges, bananas"
MEAT= "chicken, beef, pork"
BAKED GOODS="cookies, cakes, muffins"

So if a user checked the boxes next to FRUIT and BAKED GOODS, the text box would display "apples, bananas, cakes, cookies, muffins, oranges"

Ideally, each GROUP can also have a price associated which could be totalled in a seperate text box.

It doesn't matter if the values appear in the TEXTAREA immediately upon the checkboxes being checked or after a "submit" input of some kind.

Now, the real icing on the cake would be if a page could display 2 sets of the above form elements, along with an additional TEXTAREA that would contain the difference between the values listed in the original TEXTAREAs. For example, if FRUITS and MEATS were selected in form 1 and MEATS and BAKED GOODS were selected in form 2, the additional TEXTAREA would display "beef, chicken, pork (the shared values), -apples, -bananas, -oranges (the values selected in form 1 but not form 2), +cakes, +cookies, +muffins (the values selected in form 2 but not form 1)"

I've turned to AskMeFi knowing that someone out there could simply code this for me, and I'm in no position to refuse that kind of help - but I'm happy to spend sometime figuring it out if you can offer a some hints or a good tutorial to check out.

posted by chudmonkey to computers & internet (15 comments total)

As far as poplating the textbox, that's simple: if t is the textarea, it's just t.value = "text I want in the textbox" ;

You almost certainly want to use an array of one array per checkbox, with the values in the nested array. Then you add an onclick function to the textboxes that calls a function that looks up the array element corresponding to the checkbox, and iterates through the values, adding them to a string, and and then settign the textarea.value to the string.

I don't think jaavscript does set operations, do for your icing, the hint is, sort the two sets first, then iterate over both to find intersections.

"This is all for personal, non-commercial purposes, BTW. "

Huh. So what exactly is this for?
posted by orthogonality at 12:28 PM on February 16, 2006

orthogonality: I work for a company that sells the "groups" I talk about above. I personally need a quick way to see the difference in the total services (or "values") if a customer changes the groups they are buying from my employer. My employer doesn't provide anything to simplify the task, so it could sometimes take me 3-4 each time to manually work out the differences between packages.
posted by chudmonkey at 12:48 PM on February 16, 2006

Um. That's not non-commercial. I'd be glad to do this for your company -- for a small fee, and then all the salesmen in your company could use it, and you'd get the credit for innovating. But this isn't non-commercial.
posted by orthogonality at 1:07 PM on February 16, 2006

in each checkbox's tag, onclick="document.forms['MyFormName'].elements['MyTextAreaName'].value += this.value"

Something like that. You'll have to fiddle with it to get the commas to show if there's already something in the textarea. Ideally you'd put the logic a function and attach an event to each checkbox instead of having the logic repeated in every checkbox.
posted by yerfatma at 1:18 PM on February 16, 2006

I disagree, orthogonality. I don't make any money working for the company, I don't plan to share the utility with my employer or colleagues, and it doesn't impact sales because a) I'm not a salesman, I just need this info after-the-fact and b) the salespeople don't need/want this information. If using the tool I describe above is a commercial excercise, then so is using a pen and paper to write down the phone numbers of customers I call each day.

At any rate, contact me with a quote of your "small fee" and I'll be happy to pay you personally. I look forward to hearing from you.
posted by chudmonkey at 1:20 PM on February 16, 2006

chudmonkey writes "I disagree, orthogonality. I don't make any money working for the company,"

You work for the company and they don't pay you? It's an internship?
posted by orthogonality at 1:31 PM on February 16, 2006

This would be insanely easy to do with ruby on rails, but I don't know enough about javascript to do it that way.
posted by empath at 1:33 PM on February 16, 2006

This could be done a lot better, but now that it's working I've lost interest. =)

<script>
var a = new Array(',',');
var b = new Array(',',');

function computer (toStore, cell, value, checked) {
	cell=cell-1; //just to make ordering below clearer
	if (checked)
		eval(toStore+"["+cell+"] = '" + value + "';");
	else
		eval(toStore+"["+cell+"] = ';");

	var html = ';
	
	for (var i = 0; i < 3; i++) {
		if (a[i] != ')
			if (a[i] == b[i])
				html += a[i] + ", ";
			else
				html += '-' + a[i].replace(/, /g, ", -") + ", ";
		else
			if (b[i] != ')
				html += '+' + b[i].replace(/, /g, ", +") + ", ";
	}
	
	document.getElementById('ta').innerHTML = html;
}
</script>

<table width=500>
<tr><td width=50%>
<input type=checkbox onclick=computer('a',1,this.value,this.checked) value="apples, oranges, bananas">FRUIT= "apples, oranges, bananas"<br>
<input type=checkbox onclick=computer('a',2,this.value,this.checked) value="chicken, beef, pork">MEAT= "chicken, beef, pork"<br>
<input type=checkbox onclick=computer('a',3,this.value,this.checked) value="cookies, cakes, muffins">BAKED GOODS="cookies, cakes, muffins"

</td><td>
<input type=checkbox onclick=computer('b',1,this.value,this.checked) value="apples, oranges, bananas">FRUIT= "apples, oranges, bananas"<br>
<input type=checkbox onclick=computer('b',2,this.value,this.checked) value="chicken, beef, pork">MEAT= "chicken, beef, pork"<br>
<input type=checkbox onclick=computer('b',3,this.value,this.checked) value="cookies, cakes, muffins">BAKED GOODS="cookies, cakes, muffins"
</td></tr>
</table>
<br><br>
<textarea id=ta></textarea>

posted by ducksauce at 1:35 PM on February 16, 2006

Yah, if you have access to anyone who knows JavaScript, this is pretty basic. Or follow orthogonality's original instructions and you should be good to go assuming you are at the muddling-through level. There is a native sort function for arrays and that covers the hardest part.

I do hear orthogonality does excellent programming work, though. Tell him to make it blink and play sounds, since you are getting the custom job.
posted by mdevore at 1:35 PM on February 16, 2006

sorry for the double spacing... I guess Matt's filter hates the <pre> tag. I think this got me once before... but it looked perfect in preview.
posted by ducksauce at 1:36 PM on February 16, 2006

You work for the company and they don't pay you? It's an internship?

It's a personal thing. The small company needs someone to perform the various org and admin functions I perform, and doesn't have a lot of money. I have a desire to help the company and so I work for coffee and doughnuts.

I maintain that the tool I need won't have a directly commercial application, since it's just going to make a task I already perform a little speedier without affecting any bottom lines. But coding is a skill, and I recognize its value. If someone wants to make some money by satisfying my desires in this case, I'll be happy to make it so.
posted by chudmonkey at 1:41 PM on February 16, 2006

If you want to code this like all the cool kids, first start with a copy of prototype.js and behaviour.js. This will allow you to remove all the onClick behavior from your code, so this can be unobtrusive javascript. As far as your data store, you could either create some associative arrays, or create some html elements that store all of this information ( You can add attributes up the wazoo these days to any html element ). If you create the associative array, just have the checkbox id correspond with the associative array which stores your items, and then have another associative array which stores the corresponding prices. As far as writing that info into a textarea, consult the prototype.js documentation. And as far as the sort is concerned, google it.
posted by jasondigitized at 1:48 PM on February 16, 2006

it looked perfect in preview.

I've been caught like that before.

There's also something weird going on with your quotes:

var html = ';

and

if (b[i] != ')

are going to cause problems...
posted by AmbroseChapel at 2:27 PM on February 16, 2006

AmbroseChapel:

Yeah, I saw that, too. They were all correct before I submitted the comment (the code was working on my desktop).
posted by ducksauce at 2:52 PM on February 16, 2006

ducksauce: I really appreciate you posting that code, and I'll use it as a jumping-off point. Problem is, even with AmbroseChapel's comments in mind, I can't get it working. Can you link a text file or e-mail me?
posted by chudmonkey at 7:21 PM on February 16, 2006