Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Concatenation Within a For Loop

Posted on 2007-07-23
5
Medium Priority
?
292 Views
Last Modified: 2010-04-16
I'm trying to use a for loop to go through a table and update some dates within cells, based on user input. To make things difficult, I'm trying to use the loop index as part of variable names and input names. I think it could be done with some skillful concatenation, but is somewhat beyond by current level of expertise. I wrote a very course, but working version of this project here: http://fedtip.mag.maricopa.gov/calendar.asp

The scripts and html are included here. Any help is appreciated.

----
<html>
<head>
<script type="text/JavaScript">
<!--
function setDates() {
var aMonth = parseInt(document.getElementById("uMonth").value);  // these variables pick-up the values from the pull down menus
var aYear = parseInt(document.getElementById("uYear").value);
var duration=new Array(0, 1, 4, 5, 7, 9, 11, 9, 10, 10, 15, 18, 24)  // this array holds the monthly values from the table

for (i=0; i<=12; i++) {
// The radio buttons turn the results table cell on or off and the first test is for which is checked.
// Each set of radio buttons is named consecutively rad0, rad1, through rad12 and  the loop index needs to be part of the name
// This is the part I'm having trouble with

      if (document.calendar.(rad + i)[0].checked == true) {
            document.getElementById(var + i).innerHTML = ((calcMo(duration[i], aMonth) + "-" + (calcYr(duration[i], aMonth, aYear)); // not even sure if I can call a function like this and concatenate?
            } else {
            document.getElementById(var + i).innerHTML = "&nbsp;"; // if the yes radio button IS NOT checked the cell is empty
            }
      }
}
// this function takes the users start date and the duration of the project phase,
// calculates what the end month is and returns a text abbreviation of that month
function calcMo(duration, userMo) {
var newMo = (duration + userMo) / 12;
      if (newMo > 2) {
            newMo = (duration + userMo) - 24;
      } else if (newMo > 1) {
            newMo = (duration + userMo) - 12;
      } else {
            newMo = (duration + userMo);
      }
      
      switch(newMo) {
      case 1:
      newMo = "Jan";
      break;
      
      case 2:
      newMo = "Feb";
      break;
      
      case 3:
      newMo = "Mar";
      break;
      
      case 4:
      newMo = "Apr";
      break;
      
      case 5:
      newMo = "May";
      break;
      
      case 6:
      newMo = "Jun";
      break;
      
      case 7:
      newMo = "Jul";
      break;
      
      case 8:
      newMo = "Aug";
      break;
      
      case 9:
      newMo = "Sept";
      break;
      
      case 10:
      newMo = "Oct";
      break;
      
      case 11:
      newMo = "Nov";
      break;
      
      case 12:
      newMo = "Dec";
      break;
}
return newMo;
}

// this function takes the users start date, the duration of the project phase and the starting year,
// calculates what the end year is and returns that year
function calcYr(duration, userMo, beginYr) {
      var newMo = (duration + userMo) / 12;
      var newYr = 0;
      if (newMo >= 2) {
            newYr = (beginYr + 2);
      } else if (newMo >= 1) {
            newYr = (beginYr + 1);
      } else {
            newYr = beginYr;
      }
return newYr;
}
//-->

</script>
</head>

<body>
  <div id="calculon">
<form name="calendar">
<table border="1" cellpadding="3" cellspacing="1">
  <tr align="left" valign="top">
    <th>Standard Milestones</td>
    <th>Months</td>
    <th>Applicable<br />
      Milestones</td>
    <th class="centerTD"><p>Estimated Begin Date</p>
      <select name="uMonth" id="uMonth">
        <option value="1" selected="selected">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
      <select name="uYear" id="uYear">
        <option value="2007" selected="selected">2007</option>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
      </select>
      <input type="button" onClick="setDates()" name="btnChange" value="Change Dates" /></td>
  </tr>
  <tr>
    <td>Apply for project number</td>
    <td>0</td>
    <td>Y<input name="rad0" type="radio" value="radiobutton" checked="checked" />- N<input name="rad0" type="radio" value="radiobutton" /></td>
    <td id="var0">Sep-2007</td>
  </tr>
  <tr>
    <td>Receipt of project number</td>
    <td>1</td>
    <td>Y<input name="rad1" type="radio" value="Y" checked="checked" />- N<input name="rad1" type="radio" value="N" /></td>
    <td id="var1">Oct-2007</td>
  </tr>
  <tr>
    <td>Initial ABC </td>
    <td>4</td>
    <td>Y<input name="rad2" type="radio" value="Y" checked="checked" />- N<input name="rad2" type="radio" value="N" /></td>
    <td id="var2">Jan-2008</td>
  </tr>
  <tr>
    <td>Final ABC </td>
    <td>5</td>
    <td>Y<input name="rad3" type="radio" value="Y" checked="checked" />- N<input name="rad3" type="radio" value="N" /></td>
    <td id="var3">Feb-2008</td>
  </tr>
  <tr>
    <td>30% Report</td>
    <td>7</td>
    <td>Y<input name="rad4" type="radio" value="Y" checked="checked" />- N<input name="rad4" type="radio" value="N" /></td>
    <td id="var4">Apr-2008</td>
  </tr>
  <tr>
    <td>60% Report</td>
    <td>9</td>
    <td>Y<input name="rad5" type="radio" value="Y" checked="checked" />- N<input name="rad5" type="radio" value="N" /></td>
    <td id="var5">Jun-2008</td>
  </tr>
  <tr>
    <td>Final Report</td>
    <td>11</td>
    <td>Y<input name="rad6" type="radio" value="Y" checked="checked" />- N<input name="rad6" type="radio" value="N" /></td>
    <td id="var6">Aug-2008</td>
  </tr>
  <tr>
    <td>Clearance A </td>
    <td>9</td>
    <td>Y<input name="rad7" type="radio" value="Y" checked="checked" />- N<input name="rad7" type="radio" value="N" /></td>
    <td id="var7">Jun-2008</td>
  </tr>
  <tr>
    <td>Clearance B </td>
    <td>10</td>
    <td>Y<input name="rad8" type="radio" value="Y" checked="checked" />- N<input name="rad8" type="radio" value="N" /></td>
    <td id="var8">Jul-2008</td>
  </tr>
  <tr>
    <td>Clearance C </td>
    <td>10</td>
    <td>Y<input name="rad9" type="radio" value="Y" checked="checked" />- N<input name="rad9" type="radio" value="N" /></td>
    <td id="var9">Jul-2008</td>
  </tr>
  <tr>
    <td>Approval</td>
    <td>15</td>
    <td>Y<input name="rad10" type="radio" value="Y" checked="checked" />- N<input name="rad10" type="radio" value="N" /></td>
    <td id="var10">Dec-2008</td>
  </tr>
  <tr>
    <td>Bid Opening</td>
    <td>18</td>
    <td>Y<input name="rad11" type="radio" value="Y" checked="checked" />- N<input name="rad11" type="radio" value="N" /></td>
    <td id="var11">Mar-2009</td>
  </tr>
  <tr>
    <td>Final Deployment</td>
    <td>24</td>
    <td>Y<input name="rad12" type="radio" value="Y" checked="checked" />- N<input name="rad12" type="radio" value="N" /></td>
    <td id="var12">Sep-2009</td>
  </tr>
</table>
</form>
  </div>

</body>
</html>
0
Comment
Question by:matt_nielsen
  • 2
  • 2
5 Comments
 
LVL 11

Assisted Solution

by:BraveBrain
BraveBrain earned 800 total points
ID: 19553687
for (i=0; i<=12; i++) {
// The radio buttons turn the results table cell on or off and the first test is for which is checked.
// Each set of radio buttons is named consecutively rad0, rad1, through rad12 and  the loop index needs to be part of the name
// This is the part I'm having trouble with

      if (document.forms['calendar'].elements['rad' + i][0].checked == true) {
            document.getElementById('var' + i).innerHTML = calcMo(duration[i], aMonth) + "-" + (calcYr(duration[i], aMonth, aYear)); // not even sure if I can call a function like this and concatenate?
            } else {
            document.getElementById('var' + i).innerHTML = "&nbsp;"; // if the yes radio button IS NOT checked the cell is empty
            }
      }
}


Your problem was in the way you referenced form items and the target table cells, as well as 2 extra ( in your generation of the innerHTML.
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 1200 total points
ID: 19554419
How about this version:


<html>
<head>
<title>Zvonko &#42;</title>
<script type="text/JavaScript">
<!--
function setDates(theSel) {
  var theForm = theSel.form;
  var aMonth = theForm.uMonth.value*1;  // these variables pick-up the values from the pull down menus
  var aYear = theForm.uYear.value;
  var duration= [0, 1, 4, 5, 7, 9, 11, 9, 10, 10, 15, 18, 24];  // this array holds the monthly values from the table
  for(var i=0;i<duration.length;i++){
// The radio buttons turn the results table cell on or off and the first test is for which is checked.
// Each set of radio buttons is named consecutively rad0, rad1, through rad12 and  the loop index needs to be part of the name
    var varText = "&nbsp;";
    if (theForm["rad" + i][0].checked){
      var varDate = new Date(aYear, (aMonth+duration[i]));
      varText = varDate.toGMTString().split(" ").splice(2,2).join("-");
    }
    document.getElementById("var" + i).innerHTML = varText;
  }
}

window.onload = function(){
  var actDate = new Date();
  var theForm = document.calendar;
  theForm.uMonth.value = actDate.getMonth()+1;
  theForm.uYear.value = actDate.getFullYear();
  theForm.uYear.onchange();  
}
//-->

</script>
</head>

<body>
  <div id="calculon">
<form name="calendar">
<table border="1" cellpadding="3" cellspacing="1">
  <tr align="left" valign="top">
    <th>Standard Milestones</td>
    <th>Months</td>
    <th>Applicable<br />
      Milestones</td>
    <th class="centerTD"><p>Estimated Begin Date</p>
      <select name="uMonth" id="uMonth" onChange="setDates(this)" >
        <option value="1" selected="selected">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
      <select name="uYear" id="uYear" onChange="setDates(this)" >
        <option value="2007" selected="selected">2007</option>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
      </select>
  </tr>
  <tr>
    <td>Apply for project number</td>
    <td>0</td>
    <td>Y<input name="rad0" type="radio" value="radiobutton" checked="checked" />- N<input name="rad0" type="radio" value="radiobutton" /></td>
    <td id="var0">Sep-2007</td>
  </tr>
  <tr>
    <td>Receipt of project number</td>
    <td>1</td>
    <td>Y<input name="rad1" type="radio" value="Y" checked="checked" />- N<input name="rad1" type="radio" value="N" /></td>
    <td id="var1">Oct-2007</td>
  </tr>
  <tr>
    <td>Initial ABC </td>
    <td>4</td>
    <td>Y<input name="rad2" type="radio" value="Y" checked="checked" />- N<input name="rad2" type="radio" value="N" /></td>
    <td id="var2">Jan-2008</td>
  </tr>
  <tr>
    <td>Final ABC </td>
    <td>5</td>
    <td>Y<input name="rad3" type="radio" value="Y" checked="checked" />- N<input name="rad3" type="radio" value="N" /></td>
    <td id="var3">Feb-2008</td>
  </tr>
  <tr>
    <td>30% Report</td>
    <td>7</td>
    <td>Y<input name="rad4" type="radio" value="Y" checked="checked" />- N<input name="rad4" type="radio" value="N" /></td>
    <td id="var4">Apr-2008</td>
  </tr>
  <tr>
    <td>60% Report</td>
    <td>9</td>
    <td>Y<input name="rad5" type="radio" value="Y" checked="checked" />- N<input name="rad5" type="radio" value="N" /></td>
    <td id="var5">Jun-2008</td>
  </tr>
  <tr>
    <td>Final Report</td>
    <td>11</td>
    <td>Y<input name="rad6" type="radio" value="Y" checked="checked" />- N<input name="rad6" type="radio" value="N" /></td>
    <td id="var6">Aug-2008</td>
  </tr>
  <tr>
    <td>Clearance A </td>
    <td>9</td>
    <td>Y<input name="rad7" type="radio" value="Y" checked="checked" />- N<input name="rad7" type="radio" value="N" /></td>
    <td id="var7">Jun-2008</td>
  </tr>
  <tr>
    <td>Clearance B </td>
    <td>10</td>
    <td>Y<input name="rad8" type="radio" value="Y" checked="checked" />- N<input name="rad8" type="radio" value="N" /></td>
    <td id="var8">Jul-2008</td>
  </tr>
  <tr>
    <td>Clearance C </td>
    <td>10</td>
    <td>Y<input name="rad9" type="radio" value="Y" checked="checked" />- N<input name="rad9" type="radio" value="N" /></td>
    <td id="var9">Jul-2008</td>
  </tr>
  <tr>
    <td>Approval</td>
    <td>15</td>
    <td>Y<input name="rad10" type="radio" value="Y" checked="checked" />- N<input name="rad10" type="radio" value="N" /></td>
    <td id="var10">Dec-2008</td>
  </tr>
  <tr>
    <td>Bid Opening</td>
    <td>18</td>
    <td>Y<input name="rad11" type="radio" value="Y" checked="checked" />- N<input name="rad11" type="radio" value="N" /></td>
    <td id="var11">Mar-2009</td>
  </tr>
  <tr>
    <td>Final Deployment</td>
    <td>24</td>
    <td>Y<input name="rad12" type="radio" value="Y" checked="checked" />- N<input name="rad12" type="radio" value="N" /></td>
    <td id="var12">Sep-2009</td>
  </tr>
</table>
</form>
  </div>
</body>
</html>



0
 

Author Comment

by:matt_nielsen
ID: 19562719
My thanks to both BraveBrain and Zvonko. Both solutions worked flawlessly. It is especially helpful to have two good answers as it helps to triangulate on what good solutions are all about.

Cheers,
Matt N.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 19562762
You are welcome.

You have surely noticed, but for all who read my proposal, it loads also the actual month as default project starting month and set the following step months accordingly.
0
 
LVL 11

Expert Comment

by:BraveBrain
ID: 19562812
You're quite welcome. Thanks for the grade and points, as well as the challenge :o)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Measuring Server's processing rate with a simple powershell command. The differences in processing rate also was recorded in different use-cases, when a server in free and busy states.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question