Question : JavaScript Get Variable Field Value

I have a form that has multiple JS functions.  All the functions work except the first function, disableEnableFields.

What it needs to do is determine which of 8 coupon drop-downs has been changed and disable/enable other fields based on which of 16 options was selected.

If I hard code the field name, like Coupon1, Coupon 2, etc, it works fine.  But I want to do it without 8 sets of code for this function.  Also note that towards the bootom of this function I have an alert for testing purposes but it does not return the value of the selectedIndex, which is likely related to the inabilty to determine which coupon field is being changed.

Please do not mess with the other functions.

Thanks.

Alan 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Sandy Alexander Page Coupon Specification</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" media="all" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
function disableEnableFields(form, i) { 

    var coupon = i;

   if ('form.Coupon' + coupon + '.selectedIndex == 0') {
      'form.PriceOption' + coupon + '.disabled=false';
      'form.PriceOption' + coupon + '.style.backgroundColor = "#ffffff"';
      'form.Coupon' + coupon + '_price.disabled=false';
      'form.Coupon' + coupon + '_price.style.backgroundColor = "#ffffff"';
      'form.Coupon' + coupon + '_age.disabled=false';
      'form.Coupon' + coupon + '_age.style.backgroundColor = "#ffffff"';
   }  

   if ('form.Coupon' + coupon + '.selectedIndex == 2' || 'form.Coupon' + coupon + '.selectedIndex == 3' || 'form.Coupon' + coupon + '.selectedIndex == 5' || 'form.Coupon' + coupon + '.selectedIndex == 15' || 'form.Coupon' + coupon + '.selectedIndex == 16') {
      'form.PriceOption' + coupon + '.disabled=true';
      'form.PriceOption' + coupon + '.style.backgroundColor = "#dddddd"';
      'form.Coupon' + coupon + '_price.disabled=true';
      'form.Coupon' + coupon + '_price.style.backgroundColor = "#dddddd"';
      'form.Coupon' + coupon + '_age.disabled=true';
      'form.Coupon' + coupon + '_age.style.backgroundColor = "#dddddd"';
   }  

   if ('form.Coupon' + coupon + '.selectedIndex == 1' || 'form.Coupon' + coupon + '.selectedIndex == 4' || 'form.Coupon' + coupon + '.selectedIndex == 6' || 'form.Coupon' + coupon + '.selectedIndex == 8' || 'form.Coupon' + coupon + '.selectedIndex == 9' || 'form.Coupon' + coupon + '.selectedIndex == 11' || 'form.Coupon' + coupon + '.selectedIndex == 12' || 'form.Coupon' + coupon + '.selectedIndex == 13' || 'form.Coupon' + coupon + '.selectedIndex == 14') {
      'form.PriceOption' + coupon + '.disabled=false';
      'form.PriceOption' + coupon + '.style.backgroundColor = "#ffffff"';
      'form.Coupon' + coupon + '_price.disabled=false';
      'form.Coupon' + coupon + '_price.style.backgroundColor = "#ffffff"';
      'form.Coupon' + coupon + '_age.disabled=true';
      'form.Coupon' + coupon + '_age.style.backgroundColor = "#dddddd"';
   }  

   if ('form.Coupon' + coupon + '.selectedIndex == 7' || 'form.Coupon' + coupon + '.selectedIndex == 10') {
      'form.PriceOption' + coupon + '.disabled=false';
      'form.PriceOption' + coupon + '.style.backgroundColor = "#ffffff"';
      'form.Coupon' + coupon + '_price.disabled=false';
      'form.Coupon' + coupon + '_price.style.backgroundColor = "#ffffff"';
      'form.Coupon' + coupon + '_age.disabled=false';
      'form.Coupon' + coupon + '_age.style.backgroundColor = "#ffffff"';
   }

var value = 'form.Coupon' + coupon + '.selectedIndex.value';
alert ('Coupon = ' + coupon + '\nVariable = form.Coupon' + coupon + '.selectedIndex\nValue = ' + value);

}  

function allCouponsSelected (form) {
    var coupon1 = form.Coupon1.selectedIndex;
    var coupon2 = form.Coupon2.selectedIndex;
    var coupon3 = form.Coupon3.selectedIndex;
    var coupon4 = form.Coupon4.selectedIndex;
    var coupon5 = form.Coupon5.selectedIndex;
    var coupon6 = form.Coupon6.selectedIndex;
    var coupon7 = form.Coupon7.selectedIndex;
    var coupon8 = form.Coupon8.selectedIndex;

    var arr = [coupon1, coupon2, coupon3, coupon4, coupon5, coupon6, coupon7, coupon8];
    var value = arr[i];
    for (var i = 0; i < arr.length - 1; i += 1) {
        var value = arr[i];
        var j = i + 1;
        if (value==0) {
            alert('You must select all ' + arr.length + ' coupon offers\n\nPlease select a coupon offer for coupon ' + j);
        }
    }
}

function catchDupes (form) {
    var coupon1 = form.Coupon1.selectedIndex;
    var coupon2 = form.Coupon2.selectedIndex;
    var coupon3 = form.Coupon3.selectedIndex;
    var coupon4 = form.Coupon4.selectedIndex;
    var coupon5 = form.Coupon5.selectedIndex;
    var coupon6 = form.Coupon6.selectedIndex;
    var coupon7 = form.Coupon7.selectedIndex;
    var coupon8 = form.Coupon8.selectedIndex;

    var arr = [coupon1, coupon2, coupon3, coupon4, coupon5, coupon6, coupon7, coupon8];
    var sorted_arr = arr.sort(); // You can define the comparing function here. JS default uses a crappy string compare.
    var results = [];
    for (var i = 0; i < arr.length - 1; i += 1) {
        if (sorted_arr[i + 1] == sorted_arr[i]) {
            results.push(sorted_arr[i]);
        }
    }
    if (results!='') {
        alert('Duplicate coupon submissions are not permitted\n\nPlease select a different offer for each coupon');
    }
}
</script>
</head>
<body>
<div id="wrapper">
     <div id="top-menu">

     </div>
    
     <div id="content">
				
        <form>
         <table align="center" cellpadding="1" cellspacing="1" width="650">
               <tr>
                   <td><h4>Step 2: Specify Coupon</h4></td>
               </tr>
         </table>
        <table align="center" cellpadding="3" cellspacing="2" width="650" frame=box style="background-color: e8eaec;">
              <tr>
                   <td class="formLabelLeft">Coupon 1:</td>
                   <td><select name="Coupon1" onChange="disableEnableFields(this.form, '1')">
                          <option value="">Select Offer</option>
                          <option value="Offer1">Offer1</option>
                          <option value="Offer2">Offer2</option>
                          <option value="Offer3">Offer3</option>
                          <option value="Offer4">Offer4</option>
                          <option value="Offer5">Offer5</option>
                          <option value="Offer6">Offer6</option>
                          <option value="Offer7">Offer7</option>
                          <option value="Offer8">Offer8</option>
                          <option value="Offer9">Offer9</option>
                          <option value="Offer10">Offer10</option>
                          <option value="Offer11">Offer11</option>
                          <option value="Offer12">Offer12</option>
                          <option value="Offer13">Offer13</option>
                          <option value="Offer14">Offer14</option>
                          <option value="Offer15">Offer15</option>
                          <option value="Offer16">Offer16</option>
                        </select>
                   </td>
                   <td class="formLabelLeft">Price Option Type:</td>
                   <td><select name="PriceOption1">
                          <option value="">Select Price Type</option>
                          <option value="FixedPrice">Fixed Price</option>
                          <option value="DiscountPrice">Discount Price</option>
                          <option value="DiscountPercent">Discount Percent</option>
                        </select>
                   </td>
                   <td><input type="text" name="Coupon1_price" style="width: 45px" /></td>
                  <td class="formLabelLeft">Age Restriction:</td>
                  <td><input type="text" name="Coupon1_age" style="width: 45px" /></td>
               </tr>
               <tr>
                   <td class="formLabelLeft">Coupon 2:</td>
                   <td><select name="Coupon2" onChange="disableEnableFields(this.form, '2')">
                          <option value="">Select Offer</option>
                          <option value="Offer1">Offer1</option>
                          <option value="Offer2">Offer2</option>
                          <option value="Offer3">Offer3</option>
                          <option value="Offer4">Offer4</option>
                          <option value="Offer5">Offer5</option>
                          <option value="Offer6">Offer6</option>
                          <option value="Offer7">Offer7</option>
                          <option value="Offer8">Offer8</option>
                          <option value="Offer9">Offer9</option>
                          <option value="Offer10">Offer10</option>
                          <option value="Offer11">Offer11</option>
                          <option value="Offer12">Offer12</option>
                          <option value="Offer13">Offer13</option>
                          <option value="Offer14">Offer14</option>
                          <option value="Offer15">Offer15</option>
                          <option value="Offer16">Offer16</option>
                        </select>
                   </td>
                   <td class="formLabelLeft">Price Option Type:</td>
                   <td><select name="PriceOption2">
                          <option value="">Select Price Type</option>
                          <option value="FixedPrice">Fixed Price</option>
                          <option value="DiscountPrice">Discount Price</option>
                          <option value="DiscountPercent">Discount Percent</option>
                        </select>
                   </td>
                   <td><input type="text" name="Coupon2_price" style="width: 45px" /></td>
                  <td class="formLabelLeft">Age Restriction:</td>
                  <td><input type="text" name="Coupon2_age" style="width: 45px" /></td>
               </tr>
               <tr>
                   <td class="formLabelLeft">Coupon 3:</td>
                   <td><select name="Coupon3" onChange="disableEnableFields(this.form, '3')">
                          <option value="">Select Offer</option>
                          <option value="Offer1">Offer1</option>
                          <option value="Offer2">Offer2</option>
                          <option value="Offer3">Offer3</option>
                          <option value="Offer4">Offer4</option>
                          <option value="Offer5">Offer5</option>
                          <option value="Offer6">Offer6</option>
                          <option value="Offer7">Offer7</option>
                          <option value="Offer8">Offer8</option>
                          <option value="Offer9">Offer9</option>
                          <option value="Offer10">Offer10</option>
                          <option value="Offer11">Offer11</option>
                          <option value="Offer12">Offer12</option>
                          <option value="Offer13">Offer13</option>
                          <option value="Offer14">Offer14</option>
                          <option value="Offer15">Offer15</option>
                          <option value="Offer16">Offer16</option>
                        </select>
                   </td>
                   <td class="formLabelLeft">Price Option Type:</td>
                   <td><select name="PriceOption3">
                          <option value="">Select Price Type</option>
                          <option value="FixedPrice">Fixed Price</option>
                          <option value="DiscountPrice">Discount Price</option>
                          <option value="DiscountPercent">Discount Percent</option>
                        </select>
                   </td>
                   <td><input type="text" name="Coupon3_price" style="width: 45px" /></td>
                  <td class="formLabelLeft">Age Restriction:</td>
                  <td><input type="text" name="Coupon3_age" style="width: 45px" /></td>
               </tr>
               <tr>
                   <td class="formLabelLeft">Coupon 4:</td>
                   <td><select name="Coupon4" onChange="disableEnableFields(this.form, '4')">
                          <option value="">Select Offer</option>
                          <option value="Offer1">Offer1</option>
                          <option value="Offer2">Offer2</option>
                          <option value="Offer3">Offer3</option>
                          <option value="Offer4">Offer4</option>
                          <option value="Offer5">Offer5</option>
                          <option value="Offer6">Offer6</option>
                          <option value="Offer7">Offer7</option>
                          <option value="Offer8">Offer8</option>
                          <option value="Offer9">Offer9</option>
                          <option value="Offer10">Offer10</option>
                          <option value="Offer11">Offer11</option>
                          <option value="Offer12">Offer12</option>
                          <option value="Offer13">Offer13</option>
                          <option value="Offer14">Offer14</option>
                          <option value="Offer15">Offer15</option>
                          <option value="Offer16">Offer16</option>
                        </select>
                   </td>
                   <td class="formLabelLeft">Price Option Type:</td>
                   <td><select name="PriceOption4">
                          <option value="">Select Price Type</option>
                          <option value="FixedPrice">Fixed Price</option>
                          <option value="DiscountPrice">Discount Price</option>
                          <option value="DiscountPercent">Discount Percent</option>
                        </select>
                   </td>
                   <td><input type="text" name="Coupon4_price" style="width: 45px" /></td>
                  <td class="formLabelLeft">Age Restriction:</td>
                  <td><input type="text" name="Coupon4_age" style="width: 45px" /></td>
               </tr>
               <tr>
                   <td class="formLabelLeft">Coupon 5:</td>
                   <td><select name="Coupon5" onChange="disableEnableFields(this.form, '5')">
                          <option value="">Select Offer</option>
                          <option value="Offer1">Offer1</option>
                          <option value="Offer2">Offer2</option>
                          <option value="Offer3">Offer3</option>
                          <option value="Offer4">Offer4</option>
                          <option value="Offer5">Offer5</option>
                          <option value="Offer6">Offer6</option>
                          <option value="Offer7">Offer7</option>
                          <option value="Offer8">Offer8</option>
                          <option value="Offer9">Offer9</option>
                          <option value="Offer10">Offer10</option>
                          <option value="Offer11">Offer11</option>
                          <option value="Offer12">Offer12</option>
                          <option value="Offer13">Offer13</option>
                          <option value="Offer14">Offer14</option>
                          <option value="Offer15">Offer15</option>
                          <option value="Offer16">Offer16</option>
                        </select>
                   </td>
                   <td class="formLabelLeft">Price Option Type:</td>
                   <td><select name="PriceOption5">
                          <option value="">Select Price Type</option>
                          <option value="FixedPrice">Fixed Price</option>
                          <option value="DiscountPrice">Discount Price</option>
                          <option value="DiscountPercent">Discount Percent</option>
                        </select>
                   </td>
                   <td><input type="text" name="Coupon5_price" style="width: 45px" /></td>
                  <td class="formLabelLeft">Age Restriction:</td>
                  <td><input type="text" name="Coupon5_age" style="width: 45px" /></td>
               </tr>
               <tr>
                   <td class="formLabelLeft">Coupon 6:</td>
                   <td><select name="Coupon6" onChange="disableEnableFields(this.form, '6')">
                          <option value="">Select Offer</option>
                          <option value="Offer1">Offer1</option>
                          <option value="Offer2">Offer2</option>
                          <option value="Offer3">Offer3</option>
                          <option value="Offer4">Offer4</option>
                          <option value="Offer5">Offer5</option>
                          <option value="Offer6">Offer6</option>
                          <option value="Offer7">Offer7</option>
                          <option value="Offer8">Offer8</option>
                          <option value="Offer9">Offer9</option>
                          <option value="Offer10">Offer10</option>
                          <option value="Offer11">Offer11</option>
                          <option value="Offer12">Offer12</option>
                          <option value="Offer13">Offer13</option>
                          <option value="Offer14">Offer14</option>
                          <option value="Offer15">Offer15</option>
                          <option value="Offer16">Offer16</option>
                        </select>
                   </td>
                   <td class="formLabelLeft">Price Option Type:</td>
                   <td><select name="PriceOption6">
                          <option value="">Select Price Type</option>
                          <option value="FixedPrice">Fixed Price</option>
                          <option value="DiscountPrice">Discount Price</option>
                          <option value="DiscountPercent">Discount Percent</option>
                        </select>
                   </td>
                   <td><input type="text" name="Coupon6_price" style="width: 45px" /></td>
                  <td class="formLabelLeft">Age Restriction:</td>
                  <td><input type="text" name="Coupon6_age" style="width: 45px" /></td>
               </tr>
               <tr>
                   <td class="formLabelLeft">Coupon 7:</td>
                   <td><select name="Coupon7" onChange="disableEnableFields(this.form, '7')">
                          <option value="">Select Offer</option>
                          <option value="Offer1">Offer1</option>
                          <option value="Offer2">Offer2</option>
                          <option value="Offer3">Offer3</option>
                          <option value="Offer4">Offer4</option>
                          <option value="Offer5">Offer5</option>
                          <option value="Offer6">Offer6</option>
                          <option value="Offer7">Offer7</option>
                          <option value="Offer8">Offer8</option>
                          <option value="Offer9">Offer9</option>
                          <option value="Offer10">Offer10</option>
                          <option value="Offer11">Offer11</option>
                          <option value="Offer12">Offer12</option>
                          <option value="Offer13">Offer13</option>
                          <option value="Offer14">Offer14</option>
                          <option value="Offer15">Offer15</option>
                          <option value="Offer16">Offer16</option>
                        </select>
                   </td>
                   <td class="formLabelLeft">Price Option Type:</td>
                   <td><select name="PriceOption7">
                          <option value="">Select Price Type</option>
                          <option value="FixedPrice">Fixed Price</option>
                          <option value="DiscountPrice">Discount Price</option>
                          <option value="DiscountPercent">Discount Percent</option>
                        </select>
                   </td>
                   <td><input type="text" name="Coupon7_price" style="width: 45px" /></td>
                  <td class="formLabelLeft">Age Restriction:</td>
                  <td><input type="text" name="Coupon7_age" style="width: 45px" /></td>
               </tr>
               <tr>
                   <td class="formLabelLeft">Coupon 8:</td>
                   <td><select name="Coupon8" onChange="disableEnableFields(this.form, '8')">
                          <option value="">Select Offer</option>
                          <option value="Offer1">Offer1</option>
                          <option value="Offer2">Offer2</option>
                          <option value="Offer3">Offer3</option>
                          <option value="Offer4">Offer4</option>
                          <option value="Offer5">Offer5</option>
                          <option value="Offer6">Offer6</option>
                          <option value="Offer7">Offer7</option>
                          <option value="Offer8">Offer8</option>
                          <option value="Offer9">Offer9</option>
                          <option value="Offer10">Offer10</option>
                          <option value="Offer11">Offer11</option>
                          <option value="Offer12">Offer12</option>
                          <option value="Offer13">Offer13</option>
                          <option value="Offer14">Offer14</option>
                          <option value="Offer15">Offer15</option>
                          <option value="Offer16">Offer16</option>
                        </select>
                   </td>
                   <td class="formLabelLeft">Price Option Type:</td>
                   <td><select name="PriceOption8">
                          <option value="">Select Price Type</option>
                          <option value="FixedPrice">Fixed Price</option>
                          <option value="DiscountPrice">Discount Price</option>
                          <option value="DiscountPercent">Discount Percent</option>
                        </select>
                   </td>
                   <td><input type="text" name="Coupon8_price" style="width: 45px" /></td>
                  <td class="formLabelLeft">Age Restriction:</td>
                  <td><input type="text" name="Coupon8_age" style="width: 45px" /></td>
               </tr>
        </table>
        <table align="center" cellpadding="1" cellspacing="1" width="650">
               <tr>
                   <td class="formLabelRight"><input type="button" name="Previous" value="< Previous" /><input type="button" name="Next" value="Next >" onClick="allCouponsSelected(this.form); catchDupes(this.form);" /></td>
               </tr>
         </table>
        </form>

     </div>

</div>
 
</body>
</html>

Answer : JavaScript Get Variable Field Value

Do the same in te rest of the function's code...

form['PriceOption'+coupon].disabled=false;
instead of
'form.PriceOption' + coupon + '.disabled=false';

and so on...
Random Solutions  
 
programming4us programming4us