javascript loop function on multple text boxes

Discussion in 'JavaScript' started by xbat, Oct 15, 2014.

0
  1. #1
    My math only works on the first box. I tried to run a loop but I am not sure what I am doing incorrectly. Any pointers would be appreciated.

    
 
  <style type='text/css'>
    .input-left{
  float:left; 
   
}

.input-right{
  margin-left:100px; 
}
  </style>
 


<script type='text/javascript'>//<![CDATA[

window.onload = function(){
  //> this loop doesn't work for(i=0;i<documen-1;i++){
    var left = document.getElementById('left');
    var right = document.getElementById('right');
    var result = document.getElementById("result");
    left.onkeyup = calc;
    right.onkeyup = calc;
    function calc() {
        var a = parseFloat(left.value) || 0;
        var b = parseFloat(right.value) || 0;
        result.innerHTML = ( a + b ) || "";
    }
   // end of loop }
}


//]]> 

</script>

  <div class="input-left"><span><input  class="textbox" id="left" name="count1[]" type="text" size="5"  value="" /></span></div>

<div class="input-right"><span><input  class="textbox" id="right" name="count2[]" type="text" size="5"  value="" /></span></div>
<div id="result"> </div>



<div class="input-left"><span><input  class="textbox" id="left" name="count1[]" type="text" size="5"  value="" /></span></div>

<div class="input-right"><span><input  class="textbox" id="right" name="count2[]" type="text" size="5"  value="" /></span></div>
<div id="result"> </div>



<div class="input-left"><span><input  class="textbox" id="left" name="count1[]" type="text" size="5"  value="" /></span></div>

<div class="input-right"><span><input  class="textbox" id="right" name="count2[]" type="text" size="5"  value="" /></span></div>
<div id="result"> </div>
 
</body>


</html>
    Code (markup):
     
    Solved! View solution.
    xbat, Oct 15, 2014 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,824
    Likes Received:
    4,539
    Best Answers:
    123
    Trophy Points:
    665
    #2
    You can't have an id on a page more than once

    I'll have a play on jsfiddle: http://jsfiddle.net/gnucjcok/19/

    Edit - I have the adding working but not the event management. I do a lot of wordpress which has jquery installed so it makes sense to use it and event management is super easy.
     
    Last edited: Oct 15, 2014
    sarahk, Oct 15, 2014 IP
  3. xbat

    xbat Well-Known Member

    Messages:
    326
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    105
    #3
    Can I do by name? Would that be possible? Also I am fine with jquery but figuring out how to do math on multiple lines like that.. Any suggestions where I may find a good example? Or maybe I am using the wrong words when I search.
     
    xbat, Oct 16, 2014 IP
  4. #4
    The math works on my example and it's pure javascript so just follow what I've done.

    I've got two versions - pick the one that fits best.
     
    sarahk, Oct 16, 2014 IP
  5. xbat

    xbat Well-Known Member

    Messages:
    326
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    105
    #5
    I ended up using php with the loop instead of javascript. Its funky but it works.. :)

    Example 
    <?php $begin=1; ?>

/// Loop begins here

While {

$sendbegin=$begin++;

<!-- java script is placed inside here -->

Then inside my javascript on the functions <?php $sendbegin ?;>


And in input tags <?php echo $sendbegin ?>
    PHP:
     
    xbat, Oct 16, 2014 IP
  6. seductiveapps.com

    seductiveapps.com Active Member

    Messages:
    200
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #6
    try this :
    
<?php
    $rows = 3;
?>
<html>
    <head>
        <title>rows adding</title>
        <script type='text/javascript'>
            var myApp = {
                globals : {
                },
                settings : {
                },
               
                startApp : function() {
                   
                },
                calc : function(row) {
                    var 
                    left = document.getElementById('input_left__'+row),
                    right = document.getElementById('input_right__'+row),
                    result = document.getElementById('result__'+row),
                    leftValue = parseFloat(left.value) || 0,
                    rightValue = parseFloat(right.value) || 0;
                   
                    result.innerHTML = ( a + b ) || "error";
                }
            };
        </script>
    </head>
    <body onload="myApp.startApp();">
        <table style="width:100%;">
            <?php
                for ($row=1; $row<=$rows; $row++) {
            ?>
            <tr>
                <td>
                    <div class="input-left">
                        <input id="input_left__<?php echo $r?>" class="textbox" size="5" value="0.00" onkeyup="myApp.calc(<?php echo $row?>);"/>
                    </div>
                </td>
                <td>
                    <div class="input-right">
                        <input id="input_right__<?php echo $r?>" class="textbox" size="5" value="0.00" onkeyup="myApp.calc(<?php echo $row?>);"/>
                    </div>
                </td>
                <td>
                    <div id="result__<?php echo $r?>" class="result">
                    </div>
                </td>
            </tr>
            <?php    
                }
            ?>
        </table>
    </body>
</html>
    Code (markup):
     
    seductiveapps.com, Oct 25, 2014 IP