Variable id for dynamic input boxes

This site is best viewed in a modern browser with JavaScript enabled.

Rio115

I have a problem with a variable input id that needs to be created. The current form has a dynamic input function where a new td with input boxes is created. The input boxes are processes in javascript for further calculations.

Right now, whenever I add a new collumn with input options, cycle time and idle time is calculated in the box of process #1 istead of the new created ones of process #2.

It would be great if zou guys could help me out with that. Here is my current status:

<html>  

<script>   

function calculateTakt() {

   var c_demandtStr =document.getElementById('c_demand').value;
   if (!c_demandtStr)
     c_demandtStr = '0';

   var c_workingTimetStr = document.getElementById('c_workingTime').value;
   if (!c_workingTimetStr)
     c_workingTimetStr = '0';

   var demand = parseFloat( c_demandtStr);
   var workingTime = parseFloat(c_workingTimetStr);
   document.getElementById("r_taktTime").value = workingTime / demand;
 }

function calculateCycle() {

   var c_outputtStr = document.getElementById('c_output').value;
   if (!c_outputtStr)
     c_outputtStr = '0';

   var c_processingTimetStr = document.getElementById('c_processingTime').value;
   if (!c_processingTimetStr)
     c_processingTimetStr = '0';

   var c_setupTimetStr = document.getElementById('c_setupTime').value;
   if (!c_setupTimetStr)
     c_setupTimetStr = '0';

   var output = parseFloat(c_outputtStr);
   var processingTime = parseFloat(c_processingTimetStr);
   var setupTime = parseFloat(c_setupTimetStr);
   document.getElementById("r_cycleTime").value = output / (processingTime + setupTime);

   var r_taktTimetStr = document.getElementById('r_taktTime').value;
   var r_cycleTimetStr = document.getElementById('r_cycleTime').value;
   var taktTime = parseFloat(r_taktTimetStr);
   var cycleTime = parseFloat(r_cycleTimetStr);
   document.getElementById("r_idleTime").value = taktTime - cycleTime;
 }

var counter = 1;

var limit = 10;
function addInput(tdName){
     if (counter == limit)  {
          alert("You have reached the maximum of " + counter + " process steps.");
     }
     else {
          var newtd = document.createElement('td');
          newtd.innerHTML = "Process #" + (counter + 1) + "<br>Units processed (pce) <input id = 'c_output' type='Text'  name='output' size='4' onkeyup='calculateCycle()'>"
             + " <br>Processing time (min) <input id = 'c_processingTime' type='Text' name='processingTime' size='4' onkeyup='calculateCycle()'>"
             + " <br>setup time (min) <input id = 'c_setupTime' type='Text' name='setupTime' size='4' onkeyup='calculateCycle()'> <br>"
             + " <br>Cycle Time <input id = 'r_cycleTime' type='Text' name='cycleTime' id='cycleTime' size='4'>"
             + " <br>Idle Time <input id = 'r_idleTime' type='Text' name='idleTime' id='idleTime' size='4'>";
          document.getElementById(tdName).appendChild(newtd);
          counter++;

 }
} 


 </script>
<b>Machinery and Process Indicators</b><br>
 <input id = "c_demand" type="Text"  name="demand" size="4" onkeyup="calculateTakt()"> Customer demand (YR)<br>
 <input id = "c_workingTime" type="Text" name="workingTime" size="4" onkeyup="calculateTakt()"> Net working time (YR)<br>
 <input id = "r_taktTime" type="Text" name="taktTime" id="taktTime" size="4"> Takt Time<br><br>


<form method="POST">
<table>
  <tr id="dynamicInput">
<td>
         Process #1<br>
         Units processed (pce) <input id = "c_output" type="Text"  name="output" size="4" onkeyup="calculateCycle()"> <br>  

         Processing time (min) <input id = "c_processingTime" type="Text" name="processingTime" size="4" onkeyup="calculateCycle()"> <br>
         setup time (min) <input id = "c_setupTime" type="Text" name="setupTime" size="4" onkeyup="calculateCycle()"> <br><br>
         Cycle Time <input id = "r_cycleTime" type="Text" name="cycleTime id="cycleTime" size="4"> <br>
         Idle Time <input id = "r_idleTime" type="Text" name="idleTime id="idleTime" size="4"> <br>
</td>
  </tr>
</table>
<input type="button" value="Add Step" onClick="addInput('dynamicInput');">
</form> 

</html>

Padonak

<html>  

<script>   

function calculateTakt() {

   var c_demandtStr =document.getElementById('c_demand').value;
   if (!c_demandtStr)
     c_demandtStr = '0';

   var c_workingTimetStr = document.getElementById('c_workingTime').value;
   if (!c_workingTimetStr)
     c_workingTimetStr = '0';

   var demand = parseFloat( c_demandtStr);
   var workingTime = parseFloat(c_workingTimetStr);
   document.getElementById("r_taktTime").value = workingTime / demand;
 }

function calculateCycle(){
   var N=(calculateCycle.arguments[0])?('_'+calculateCycle.arguments[0]):'';
   var c_outputtStr = document.getElementById('c_output'+N).value;
   if (!c_outputtStr)
     c_outputtStr = '0';

   var c_processingTimetStr = document.getElementById('c_processingTime'+N).value;
   if (!c_processingTimetStr)
     c_processingTimetStr = '0';

   var c_setupTimetStr = document.getElementById('c_setupTime'+N).value;
   if (!c_setupTimetStr)
     c_setupTimetStr = '0';

   var output = parseFloat(c_outputtStr);
   var processingTime = parseFloat(c_processingTimetStr);
   var setupTime = parseFloat(c_setupTimetStr);
   document.getElementById("r_cycleTime"+N).value = output / (processingTime + setupTime);

   var r_taktTimetStr = document.getElementById('r_taktTime').value;
   var r_cycleTimetStr = document.getElementById('r_cycleTime'+N).value;
   var taktTime = parseFloat(r_taktTimetStr);
   var cycleTime = parseFloat(r_cycleTimetStr);
   document.getElementById("r_idleTime"+N).value = taktTime - cycleTime;
 }

var counter = 1;

var limit = 10;
function addInput(tdName){
     if (counter == limit)  {
          alert("You have reached the maximum of " + counter + " process steps.");
     }
     else {
          counter++;
		  var newtd = document.createElement('td');

      newtd.innerHTML = "Process #" + counter+ "<br>Units processed (pce) <input id='c_output_"+counter+"' type='Text'  name='output' size='4' onkeyup='calculateCycle("+counter+")'>"
         + " <br>Processing time (min) <input id='c_processingTime_"+counter+"' type='Text' name='processingTime_"+counter+"' size='4' onkeyup='calculateCycle("+counter+")'>"
         + " <br>setup time (min) <input id='c_setupTime_"+counter+"' type='Text' name='setupTime_"+counter+"' size='4' onkeyup='calculateCycle("+counter+")'> <br>"
         + " <br>Cycle Time <input id='r_cycleTime_"+counter+"' type='Text' name='cycleTime_"+counter+"' size='4'>"
         + " <br>Idle Time <input id='r_idleTime_"+counter+"' type='Text' name='idleTime_"+counter+"' size='4'>";
      document.getElementById(tdName).appendChild(newtd);


 }
} 


 </script>
<b>Machinery and Process Indicators</b><br>
 <input id = "c_demand" type="Text"  name="demand" size="4" onkeyup="calculateTakt()"> Customer demand (YR)<br>
 <input id = "c_workingTime" type="Text" name="workingTime" size="4" onkeyup="calculateTakt()"> Net working time (YR)<br>
 <input id = "r_taktTime" type="Text" name="taktTime" id="taktTime" size="4"> Takt Time<br><br>


<form method="POST">
<table>
  <tr id="dynamicInput">
<td>
         Process #1<br>
         Units processed (pce) <input id = "c_output" type="Text"  name="output" size="4" onkeyup="calculateCycle()"> <br>  

         Processing time (min) <input id = "c_processingTime" type="Text" name="processingTime" size="4" onkeyup="calculateCycle()"> <br>
         setup time (min) <input id = "c_setupTime" type="Text" name="setupTime" size="4" onkeyup="calculateCycle()"> <br><br>
         Cycle Time <input id = "r_cycleTime" type="Text" name="cycleTime id="cycleTime" size="4"> <br>
         Idle Time <input id = "r_idleTime" type="Text" name="idleTime id="idleTime" size="4"> <br>
</td>
  </tr>
</table>
<input type="button" value="Add Step" onClick="addInput('dynamicInput');">
</form> 

</html>

Rio115

Great! Many thanks!

Padonak

you welcome ))