Streamlining my javascript with a function
Posted
by liz
on Stack Overflow
See other posts from Stack Overflow
or by liz
Published on 2010-05-05T18:02:12Z
Indexed on
2010/05/06
0:58 UTC
Read the original article
Hit count: 306
mootools
|JavaScript
i have a series of select lists, that i am using to populate text boxes with ids. so you click a select option and another text box is filled with its id.
with just one select/id pair this works fine, but i have multiples, and the only thing that changes is the id of the select and input.. in fact just the ending changes, the inputs all start with featredproductid and the select ids all start with recipesproduct and then both end with the category.
i know that listing this over and over for each category is not the way to do it. i think i need to make an array of the categories var cats = ['olive oil', "grains", "pasta"] and then use a forEach function? maybe?
here is the clunky code
window.addEvent('domready', function() {
$('recipesproductoliveoil').addEvent('change', function(e){
pidselected = this.options[this.selectedIndex].getProperty('value') ;
$("featuredproductidoliveoil").setProperties({
value: pidselected}); ;
});
$('recipesproductgrains').addEvent('change', function(e){
pidselected = this.options[this.selectedIndex].getProperty('value') ;
$("featuredproductidgrains").setProperties({
value: pidselected}); ;
});
$('recipesproductpasta').addEvent('change', function(e){
pidselected = this.options[this.selectedIndex].getProperty('value') ;
$("featuredproductidpasta").setProperties({
value: pidselected}); ;
});
$('recipesproductpantry').addEvent('change', function(e){
pidselected = this.options[this.selectedIndex].getProperty('value') ;
$("featuredproductidpantry").setProperties({
value: pidselected}); ;
});
});
keep in mind this is mootools 1.1 (no i cant update it sorry). i am sure this is kind of basic, something i seem to have wrapping my brain around. but i am quite sure doing it as above is not really good...
© Stack Overflow or respective owner