Javascript Logic

Question

Hi folks,

I just modified an older code and now nothing seems to be working. Could you please guide where am I going wrong.

Some of the things that aren't working are:

Earlier, focus would always stay on the only input field present on the screen. (Now it doesnt), also the if else conditions in the code arent working. On keyup function isnt working either.

<script language="javascript">
    $(document).ready(function() {
        $("#serialNumber").focus();
        $("#scroll-pane").jScrollPane();
        $(document).keydown(function() {
            $("#serialNumber").focus();
        });
        var code = $("#hiddenSerialCode").val();

        $("#serialNumber").keyup(function() {
            var $this = $(this);
            var d = $(this).val();
            var d5 = d.substring(0, 5);

            if (d.length != 20) {
                alert('Incorrect Serial Code');
            }
            else if (d.length == 20 && d5 != code) {
                var serialCode = d.substring(0, 8);
                alert('Serial Code: ' + serialCode);
                $(this).val("");
            }
            else if (d.length == 20 && d5 == code) {
                var flagNumber = d.substring(0, 6);
                var errorNumber = d.substring(7, 10);
                alert('Flag Number ' + flagNumber + '\nError Number ' + errorNumber);
                $(this).val("");
            }
        });
    });
</script>

HTML Code: --------------

<table>
  <tr>
    <td>
    <input type="text" id="serialNumber" class="" />
    <input type="hidden" id="hiddenSerialCode" value="01327"/>
    </td>
  </tr>
</table>

<div id="scroll-pane" class="scroll-pane">

Old working Code: ------

$(document).ready(function() {
    $("#serialCode").focus();
    $(document).keydown(function() {
        $("#serialCode").focus();
    });

    $("#serialCode").keyup(function(){
        var $this = $(this);
        var d = $(this).val();
        if (d.length >= 5){
            //$this.attr("disabled","disabled")
            var $code = d.substring(0,8) ;
            alert('code is ' + $code);

        }
    });
});

Answer 1

The first thing you need to do is get a javascript trace/debugger for your browser. The one built-in to Chrome is ok, but not great, and FireBug for Firefox is excellent.

Answer 2

@t3ch - Could you also post your html..also, what browser(s) are you testing in?

Answer 3

The main problem with your code is that $("#scroll-pane").jScrollPane(); refers to an undefined method.

If you take that line out your code functions.

So, you have to make sure to include the jScrollPane() plugin somewhere in your code.

If you just want to scroll to #scroll-pane use .animate():

$('html,body').animate({
    scrollTop: $('#scroll-pane').offset().top},
    'slow');

Additionally, your if statement should probably be if (d.length > 20) otherwise you get an error on every single keypress. You could do a check with .blur() for if (d.length != 20).

Also, you might want to check for a valid serial number before d.length of 20, since it looks like a serial number only has a length of 9.

Finally, as a note, you define $this as $(this), but then you use $(this). For values you could simply use this.value.

$(document).ready(function() {
    $("#serialNumber").focus();
    // $("#scroll-pane").jScrollPane(); - Include plugin if you want to use this.
    $(document).keydown(function() {
        $("#serialNumber").focus();
    });
    var code = $("#hiddenSerialCode").val();

    $("#serialNumber").keyup(function() {
        var $this = $(this);
        var d = $this.val();
        var d5 = d.substring(0, 5);

        if (d.length > 20) {
            alert('Incorrect Serial Code');
        }
                            // Should this really be 20? and not 9?
        else if (d.length == 20 && d5 != code) {
            var serialCode = d.substring(0, 8);
            alert('Serial Code: ' + serialCode);
            $this.val("");
        }                   // What about here?
        else if (d.length == 20 && d5 == code) {
            var flagNumber = d.substring(0, 6);
            var errorNumber = d.substring(7, 10);
            alert('Flag Number ' + flagNumber + '\nError Number ' + 
                   errorNumber);
            $this.val("");
        }
    });        
});

jsFiddle example