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 9 of 9
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    32
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Real-Time JavaScript Debugger or Coding Help

    Hello,

    Does anyone know of a real-time JavaScript Debugger? I am trying to find out why this script is not working correctly, but can't find something that will watch the variables.

    The form is to allow users to rank 1 - 5 of the 9 items.

    Thanks
    jlimited

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var newvalue = '0';
    var oldvalue = '';
    
    function Reset_Form()
    {
        newvalue = '0';
        document.getElementById("submitbutton").disabled = true;
        return newvalue;
    }
    
    function Check_Data(id,oldvalue,isover)
    {
        if (((id.value - 0) == id.value) && (id.value.length > 0))
        {
            if (oldvalue.length > 0) {
                isover = parseFloat(isover) - Math.pow(5,oldvalue);
            }
            
            newvalue = parseFloat(isover) + Math.pow(5,id.value);
        }
    
        if (newvalue == '3905')
        {
            document.getElementById("submitbutton").disabled = false;
        }
        else
        {
            document.getElementById("submitbutton").disabled = true;
            return newvalue;
        }
    }
    
    function remember_old(id)
    {
        return oldvalue = id.value;
    }
    
    
    </script>
    </head>
    <body>
    <form action=process.php method=post>
    <input type=text name=item1 id=item1 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
    <input type=text name=item2 id=item2 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
    <input type=text name=item3 id=item3 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
    <input type=text name=item4 id=item4 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
    <input type=text name=item5 id=item5 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
    <input type=text name=item6 id=item6 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
    <input type=text name=item7 id=item7 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
    <input type=text name=item8 id=item8 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
    <input type=text name=item9 id=item9 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
    <input type=submit value="Submit Rankings" id="submitbutton" DISABLED> <input type=reset value="Reset Form" onclick="Reset_Form();">
    </form>
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    You can always create a <DIV ID="DUMP"> and then use document.getElementById("DUMP").innerHTML = xxxx to display things as they happen.

    But really, this whole thing looks HORRIBLY error-prone to me.

    What's to prevent somebody from entering "zam" or "999999" into one of those field??

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Why not K.I.S.S.????

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function check(fld)
    {
        var form = fld.form;
        var rank = parseInt(fld.value);
        fld.value = rank; // in case user typed "3 bats"
        if ( isNaN(rank) || rank < 1 || rank > 5 )
        {
            fld.value = "";
            return;
        }
        // rank is 1 thru 5
    
        // build list of already taken ranks from all fields
        // except the current one:
        var fldnum = parseInt(fld.name.substring(4));
        var ranks = "";
        for ( var n = 1; n <= 9; ++n )
        {
            if ( n != fldnum ) ranks += form.elements["item"+n].value;
        }
        // and now just see if that one is taken
        if ( ranks.indexOf(rank) >= 0 )
        {
            alert("That rank is already taken");
            fld.value = "";
            return;
        }
        // nope...not taken...
        ranks += rank; 
        form.submitbutton.disabled = ( ranks.length != 5 );
    }
    </script>
    </head>
    <body>
    
    <form action=process.php method=post>
    <input type=text name=item1 onchange="check(this);"><br>
    <input type=text name=item2 onchange="check(this);"><br>
    <input type=text name=item3 onchange="check(this);"><br>
    <input type=text name=item4 onchange="check(this);"><br>
    <input type=text name=item5 onchange="check(this);"><br>
    <input type=text name=item6 onchange="check(this);"><br>
    <input type=text name=item7 onchange="check(this);"><br>
    <input type=text name=item8 onchange="check(this);"><br>
    <input type=text name=item9 onchange="check(this);"><br>
    
    <input type=submit value="Submit Rankings" name="submitbutton" DISABLED> 
    <br>
    <input type=reset value="RESET">
    </form>
    </body>
    </html>

  • Users who have thanked Old Pedant for this post:

    jlimited (05-06-2009)

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Old Pedant - There is a slight snag in that if the user correctly fills in ranks 1-5 the Submit button then becomes enabled, but the user can then erase one or more rankings or press the Reset button and the Submit button is still enabled.

    Suggested revised code:-

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function check(fld) {
        var form = fld.form;
        var rank = parseInt(fld.value);
        fld.value = rank; 
        if ((/[^1-5]/g.test(rank)) || (rank == ""))  {
        fld.value = " ";  // space
        alert ("Only numbers 1 - 5 are valid and 5 boxes must be filled ");
         }
        // rank is 1 thru 5
    
        // build list of already taken ranks from all fields except the current one:
    
        var fldnum = parseInt(fld.name.substring(4));  // item1 etc.
        var ranks = "";
    
        for ( var n = 1; n <= 9; ++n ) {
            if ( n != fldnum ) ranks += form.elements["item"+n].value;
        }
    
        // and now just see if that one is taken
        if ( ranks.indexOf(rank) >= 0 )  {
            alert("That rank is already taken");
            fld.value = "";
            return;
        }
        // nope...not taken...
        ranks += rank; 
        ranks = ranks.replace(/[^1-5]/g,"");
        form.submitbutton.disabled = ( ranks.length != 5 );
    }
    
    function clearIt(which) {
    which.value = "";
    }
    
    
    </script>
    </head>
    <body>
    
    RANK FIVE ITEMS OUT OF NINE WITH SCORES 1-5<br>
    
    <form name = "myform" action=process.php method=post>
    ITEM 1 <input type=text size = "1" maxlength = "1" name = "item1" onfocus="clearIt(this)"; onblur="check(this)"><br>
    ITEM 2 <input type=text size = "1" maxlength = "1" name = "item2" onfocus="clearIt(this)"; onblur="check(this)"><br>
    ITEM 3 <input type=text size = "1" maxlength = "1" name = "item3" onfocus="clearIt(this)"; onblur="check(this)"><br>
    ITEM 4 <input type=text size = "1" maxlength = "1" name = "item4" onfocus="clearIt(this)"; onblur="check(this)"><br>
    ITEM 5 <input type=text size = "1" maxlength = "1" name = "item5" onfocus="clearIt(this)"; onblur="check(this)"><br>
    ITEM 6 <input type=text size = "1" maxlength = "1" name = "item6" onfocus="clearIt(this)"; onblur="check(this)"><br>
    ITEM 7 <input type=text size = "1" maxlength = "1" name = "item7" onfocus="clearIt(this)"; onblur="check(this)"><br>
    ITEM 8 <input type=text size = "1" maxlength = "1" name = "item8" onfocus="clearIt(this)"; onblur="check(this)"><br>
    ITEM 9 <input type=text size = "1" maxlength = "1" name = "item9" onfocus="clearIt(this)"; onblur="check(this)"><br>
    
    <input type=submit value="Submit Rankings" name = "submitbutton" DISABLED> 
    <br>
    <input type=reset value="RESET" onclick = "document.myform.submitbutton.disabled = true">
    </form>
    </body>
    </html>
    Last edited by Philip M; 05-06-2009 at 10:49 AM. Reason: Improved

  • Users who have thanked Philip M for this post:

    jlimited (05-06-2009)

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    32
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Both examples work great. And what both of you did makes since. Thanks.

  • #6
    New Coder
    Join Date
    Sep 2006
    Posts
    32
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Here is another question and I am not coming up with a good answer.

    Using Old Pedant code, I enter the 1 - 5 into the fields. Then I clear one of the numbers as if I am changing my ranking to another option. The Submit button is still enabled.

    From what it looks like the code throws out blank fields at the beginning and so the ranks.length statement at the end is still 5 even though there are only four items selected.

    What would be the best method of locking the submit button until 5 fields have unique values in them?

    Thanks
    jlimited

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    I dealt with this in Post#4. Have you tried it?

  • #8
    New Coder
    Join Date
    Sep 2006
    Posts
    32
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I have. As a user of the site, I was receiving a lot more pop-up error message with your code, than using the Old Pedant code.

    For example:
    When I enter 1 - 5 into the first five boxes using the tab key to advance between them. I get down to Item6 and the submit button is active. If I continue using the tab key to advance through the rest I get a pop-up for each time, because the fields are blank.

    When I try to re-rank Item4 (which = 4) and Item5 (which = 5) and I clear Item5 and Shift + Tab up to Item4, I get another pop-up when I leave Item5 for it being blank. Then I change Item4 to be 5 and Tab back to Item 5 and change it to 4.

    Then I just randomly switch between fields using my mouse. And a "NaN" appears in one of the boxes and I get several pop-ups "That number is already taken" as well as "Only Numbers 1 - 5 are allow".

    All in all there are way to may times that the user has to acknowledge a pop-up for doing what I feel are normal functions of this type of site. In my mind the user does not need to see a pop-up every time they change their rankings.

    I got the Old Pedant to give me the NaN, but it cleared it within a blink of an eye.

    The only issue that I have with Old Pedant code is that is does not disable the submit button if I clear a rank from a previous field.

    Thanks
    jlimited

  • #9
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Well delete the alert then, if you don't like it.

    What would you have done with that Javascript debugger, if you are willing to use a whole different script with possible errors, just because you don't want to modify one line of code in a script that's working perfectly well?

  • Users who have thanked venegal for this post:

    Philip M (05-07-2009)


  •  

    Posting Permissions

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