Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2013
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Onchange Function Goes Only Once in php

    onchange works the first time but if try to change a 2nd field the onchange don't work
    Here is my code
    <script language="javascript"><!--
    function MilesDriven ()
    {

    alert("in MilesDriven " );

    MilesDriven = parseFloat(worksheet.elements["MilesDriven1"].value);
    if(isNaN(MilesDriven)) { MilesDriven = 0;}
    MilesDriven1 = parseFloat((MilesDriven).toFixed(2));
    alert("MilesDriven1 is " + MilesDriven1 );

    MilesDriven = parseFloat(worksheet.elements["MilesDriven2"].value);
    if(isNaN(MilesDriven)) { MilesDriven = 0;}
    MilesDriven2 = parseFloat((MilesDriven).toFixed(2));
    alert("MilesDriven2 is " + MilesDriven2 );

    MilesDriven = parseFloat(worksheet.elements["MilesDriven3"].value);
    if(isNaN(MilesDriven)) { MilesDriven = 0;}
    MilesDriven3 =parseFloat((MilesDriven).toFixed(2));
    alert("MilesDriven3 is " + MilesDriven3 );

    MilesDriven = parseFloat(worksheet.elements["MilesDriven4"].value);
    if(isNaN(MilesDriven)) { MilesDriven = 0;}
    MilesDriven4 = parseFloat((MilesDriven).toFixed(2));
    alert("MilesDriven4 is " + MilesDriven4 );

    MilesDriven = parseFloat(worksheet.elements["MilesDriven5"].value);
    if(isNaN(MilesDriven)) { MilesDriven = 0;}
    MilesDriven5 = parseFloat((MilesDriven).toFixed(2));
    alert("MilesDriven5 is " + MilesDriven5 );

    MilesDriven = parseFloat(worksheet.elements["MilesDriven6"].value);
    if(isNaN(MilesDriven)) { MilesDriven = 0;}
    MilesDriven6 = parseFloat((MilesDriven).toFixed(2));
    alert("MilesDriven6 is " + MilesDriven6 );

    MilesDriven = parseFloat(worksheet.elements["MilesDriven7"].value);
    if(isNaN(MilesDriven)) { MilesDriven = 0;}
    MilesDriven7 = parseFloat((MilesDriven).toFixed(2));
    alert("MilesDriven7 is " + MilesDriven7 );

    total = MilesDriven1 + MilesDriven2 + MilesDriven3 + MilesDriven4 + MilesDriven5 +MilesDriven6 + MilesDriven7;

    alert("total is " + total );

    document.worksheet.sidetotal2.value = total;


    }
    //--></script>
    <form name="worksheet" action="" method="post" >
    <table align="center" >

    <TR>
    <td> </td>
    <td> Mon 12/16/2013</td> <td> Tue 12/17/2013</td> <td> Wed 12/18/2013</td> <td> Thu 12/19/2013</td> <td> Fri 12/20/2013</td> <td> Sat 12/21/2013</td> <td> Sun 12/22/2013</td> <td >Total</td>
    </tr>
    <tr >
    <td id="TRANSPORTATION 1" nowrap="nowrap" align="right" >TRANSPORTATION </td>
    </tr>
    <tr >
    <td id="MilesDriven 2" nowrap="nowrap" align="right" >Miles Driven </td>
    <td id="MilesDriven1" align="right"> <input name="MilesDriven1" size="10" value="3"
    onchange="MilesDriven(this)" /></td>
    <td id="MilesDriven2" align="right"> <input name="MilesDriven2" size="10" value="35"
    onchange="MilesDriven(this)" /></td>
    <td id="MilesDriven3" align="right"> <input name="MilesDriven3" size="10" value="12"
    onchange="MilesDriven(this)" /></td>
    <td id="MilesDriven4" align="right"> <input name="MilesDriven4" size="10" value=""
    onchange="MilesDriven(this)" /></td>
    <td id="MilesDriven5" align="right"> <input name="MilesDriven5" size="10" value=""
    onchange="MilesDriven(this)" /> </td>
    <td id="MilesDriven6" align="right"> <input name="MilesDriven6" size="10" value=""
    onchange="MilesDriven(this)" /></td>
    <td id="MilesDriven7" align="right"> <input name="MilesDriven7" size="10" value=""
    onchange="MilesDriven(this)" /></td>
    <td> <input name="sidetotal2" readonly="readonly" size="12" value="" /> </td>
    </tr>
    <tr>
    <td align=center colspan="10"><input type="submit" name="SubmitFrm" value="Save" ></td>
    </tr>
    </table >
    </form>

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,979
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    This has nothing to do with PHP. Moving to javascript forum.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    @siguy1 please use the code tags. Click the # in tool bar above you in message box to generate them.
    onchange works for you every time. That is not your problem, it the JS code.
    You have IDs in the <td>s where they do no good. I moved them to the <input>s.
    Also added IDs to the total <td> and removed it from the 'Miles Driven' <td>
    I removed the 'this' in the JS calls because the function does not use them.
    You have IDs So I used them to set up variables.
    I also used Number() to make sure the variables were a number and not a string.
    I left the align="right" and the nowrap="nowrap" even though their use is wrong.
    Final code with the changes

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title></title>
    </head>
    
    <body>
    <form name="worksheet" action="" method="post" >
    <table align="center" border="1" >
    <tr >
    <td> </td>
    <td> Mon 12/16/2013</td> <td> Tue 12/17/2013</td> <td> Wed 12/18/2013</td> <td> Thu 12/19/2013</td> <td> Fri 12/20/2013</td> <td> Sat 12/21/2013</td> <td> Sun 12/22/2013</td> <td >Total</td>
    </tr>
    
    <tr ><td id="TRANSPORTATION 1" nowrap="nowrap" align="right" >TRANSPORTATION </td></tr>
    
    <tr >
    <td nowrap="nowrap" align="right" >Miles Driven </td>
    <td align="right"> <input name="MilesDriven1" id="MilesDriven1" size="10" value="3" onchange="MilesDriven()" /></td>
    <td align="right"> <input name="MilesDriven2" id="MilesDriven2" size="10" value="35" onchange="MilesDriven()" /></td>
    <td align="right"> <input name="MilesDriven3" id="MilesDriven3" size="10" value="12" onchange="MilesDriven()" /></td>
    <td align="right"> <input name="MilesDriven4" id="MilesDriven4" size="10" value="" onchange="MilesDriven()" /></td>
    <td align="right"> <input name="MilesDriven5" id="MilesDriven5" size="10" value="" onchange="MilesDriven()" /> </td>
    <td align="right"> <input name="MilesDriven6" id="MilesDriven6" size="10" value="" onchange="MilesDriven()" /></td>
    <td align="right"> <input name="MilesDriven7" id="MilesDriven7" size="10" value="" onchange="MilesDriven()" /></td>
    <td> <input name="sidetotal2" id="sidetotal2" readonly="readonly" size="12" value="" /> </td>
    </tr>
    
    <tr>
    <td align=center colspan="10"><input type="submit" name="SubmitFrm" value="Save" ></td>
    </tr>
    </table >
    </form>
    
    <script>
    function MilesDriven(){
    	var md1 = Number(document.getElementById("MilesDriven1").value);
    	var md2 = Number(document.getElementById("MilesDriven2").value);
    	var md3 = Number(document.getElementById("MilesDriven3").value);
    	var md4 = Number(document.getElementById("MilesDriven4").value);
    	var md5 = Number(document.getElementById("MilesDriven5").value);
    	var md6 = Number(document.getElementById("MilesDriven6").value);
    	var md7 = Number(document.getElementById("MilesDriven7").value);
    	var tot = md1+md2+md3+md4+md5+md6+md7;
    	document.getElementById("sidetotal2").value = tot;
    }
    </script>
    </body>
    </html>
    Using onchange may cause problems with the save button, because you have to move focus away from the input, click something out side of the box you just entered a value into. I suggest changing that to onkeyup.
    Evolution - The non-random survival of random variants.

  • Users who have thanked sunfighter for this post:

    siguy1 (12-23-2013)


  •  

    Posting Permissions

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