SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Javascript form is not working. Can you check this code for me?

    This code validates in JSHint. But clicking on the run time button does not generate an answer.

    The Form:

    HTML Code:
                        <form id="form1"><table border="0" cellpadding="5" cellspacing="0" width="100%">
                            <tr>
                                <td><a name="form1">Tank</a> capacity, cc's:</td>
                                <td><input class="display2" type="number" size="4" value="" name="tank"></td>
                                <td width="50"><a href="#" onclick="alert('How much fuel does your tank hold?')"><img src="qmark2.png" width="45px" height="40px"></a></td>
                            </tr>
                            <tr><td bgcolor="#eeeeee">Drive time, minutes:</td>
                                <td bgcolor="#eeeeee"><input class="display2" type="number" size="4" value="" name="driveMinutes"></td>
                                <td bgcolor="#eeeeee"><a href="#form1" onclick="alert('Take a test drive and time it. Put your minutes here and seconds in the next box.')"><img src="qmark2.png" width="45px" height="40px"></a></td>
                            </tr>
                            </tr>
                                <td bgcolor="#eeeeee">Drive time, seconds:</td>
                                <td bgcolor="#eeeeee"><input class="display2" type="number" size="4" value="0" name="driveSeconds"></td>
                                <td bgcolor="#eeeeee">&nbsp;</td>
                            </tr>
                            <tr><td>Fuel remaining, cc's:</td>
                                <td><input class="display2" type="number" size="4" value="" name="consumed"></td>
                                <td><a href="#form1" onclick="alert('Enter the amount of fuel remaining after your test drive. Enter 0 if you ran til empty.')"><img src="qmark2.png" width="45px" height="40px"></a></td>
                            </tr>
                            <tr><td bgcolor="#eeeeee"><input id="runtime" name="runtime" class="buttPress3" type="button" value="Run time"></td>
                                <td bgcolor="#eeeeee"><input class="display2" size="4" type="number" value="" name="ans"></td>
                                <td bgcolor="#eeeeee"><a href="#form1" onclick="alert('This is how many minutes you will run per tank based on your test run.')"><img src="qmark2.png" width="45px" height="40px"></a></td>
                            </tr>
                            <tr><td colspan="3" bgcolor="#ffffff">
                                <p style="font-size:.8em"><em>If readout says, "NaN," please double-check your figures and fill every box.</em></p>
                            </td>
                            </tr>
                         </table></form>
    If I put an alert in the Javascript immediately after "function formFuel(form) {", then it fires when tapping on the runtime button.

    The Javascript at bottom of page:

    <script type="text/javascript">
    Code:
           
                
                function formFuel(form) {
                    // get the info
                    var a = form.elements.tank.value,
                    b = parseInt(form.elements.driveMinutes.value, 10),
                    c = parseInt(form.elements.driveSeconds.value, 10),
                    d = form.elements.consumed.value;
                    if (c === "") {c = 0;}
                    var used = a - d, // get the amount of fuel used
                    
                    // convert min to secs
                    secs = b * "60"; 
                    
                    // form checking 
                    if (c >= "60") { alert("Please keep your seconds value under 1 minute.");
                    }
                    if (a <= "0") { alert("Please add the amount of fuel in your tank at the beginning of your test run.");
                    }
                    if (b === "" || c === "") { alert("Please enter the length of your test run.");
                    }
                    if (d === "") { alert("Please enter how much fuel remained after your test run. Put 0 if empty.");
                    }
                    
                    var secstotal = secs + c, // add minutes and seconds to get total seconds
                    secsPerCC = secstotal / used, // divide the number of seconds into the used fuel amount (for secs per cc)
                    runtime = secsPerCC * a, // Get the amount of runtime per tankful of fuel
                    minutes = Math.floor(runtime / 60),  // get the minute figure as a digit for the time readout
                    seconds = runtime % 60; // use modulus operator to get the remainder and convert into seconds figure for the time readout
                    seconds = parseInt(seconds, 10);
                    if (seconds === 0) {seconds = "00";}
                    var runtime2 = minutes + ":" + seconds; // concatenate everything into minutes and seconds
                    
                    form.elements.ans.value = runtime2; // display "runtime2" value in the "ans" field
                }
    
    
    var runtime = document.getElementById('runtime');
                runtime.onclick = function () { 
                    var form = document.getElementById('form1');
                    formFuel(form);
                };
    </script>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    I suspect that the problem is that you're trying to apply a value such as "3:46" to a field in the form that's expecting a number instead.

    Code:
    <input class="display2" size="4" type="number" value="" name="ans">
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I changed it to text and it still won't display anything. What's odd is that If I strip it down to:

    Code:
                function formBatt(form) {  
                "use strict";
                    // get the info
                    var a = form.elements.batt.value;
    runtime2 = a;               
                    form.elements.ansE.value = runtime2; // display "runtime2" value in the "ansE" field
                }
    ... it won't display "a" either, which is the first input box.
    Something is fundamentally wrong.

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It is now working! Thank you, Paul!


Bookmarks

Posting Permissions

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