www.webdeveloper.com
Results 1 to 4 of 4

Thread: Variable id for dynamic input boxes

  1. #1
    Join Date
    May 2013
    Posts
    2

    Question Variable id for dynamic input boxes

    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:

    Code:
    <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>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    Code:
    <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>

  3. #3
    Join Date
    May 2013
    Posts
    2
    Great! Many thanks!

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    you welcome ))

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles