locked
Simple js code runs on jsfiddle and not on webpage. What's missing? RRS feed

  • Question

  • User-352524747 posted

    Hi,

    this code runs on jsfiddle and not on my webpage.

    https://jsfiddle.net/2kknb351/

    I created a new webpage and still does not work. What's missing?

    <html>
    <head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
    <script type="text/javascript">
        $('#startdate').keydown(function (e) {
            var key = e.charCode || e.keyCode || 0,
              $startdate = $(this);
            if (key !== 8 && key !== 9) {
                if ($startdate.val().length === 2) {
                    $startdate.val($startdate.val() + '.');
                }
                if ($startdate.val().length === 5) {
                    $startdate.val($startdate.val() + '.');
                }
            }
            // Allow numeric, tab, backspace, delete keys only
            return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
        });
    </script>
    
    <form>
      <input id="startdate" name="date" type="text" maxlength="10" placeholder="DD.MM.YYYY">
    </form>
    
    </body>
    </html>

    Sunday, October 23, 2016 9:38 PM

Answers

  • User-654786183 posted

    Just try this.  I enclosed your keydown function inside $(document).ready

    <html>
    <head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
    <script type="text/javascript">
    $(function(){
        $('#startdate').keydown(function (e) {
            var key = e.charCode || e.keyCode || 0,
              $startdate = $(this);
            if (key !== 8 && key !== 9) {
                if ($startdate.val().length === 2) {
                    $startdate.val($startdate.val() + '.');
                }
                if ($startdate.val().length === 5) {
                    $startdate.val($startdate.val() + '.');
                }
            }
            // Allow numeric, tab, backspace, delete keys only
            return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
        });
    	});
    </script>
    
    <form>
      <input id="startdate" name="date" type="text" maxlength="10" placeholder="DD.MM.YYYY">
    </form>
    
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 24, 2016 1:34 PM
  • User-183374066 posted

    It is working for me. can you place this in separate file and check that in browser

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#startdate').keydown(function (e) {
                    var key = e.charCode || e.keyCode || 0,
                      $startdate = $(this);
                    if (key !== 8 && key !== 9) {
                        if ($startdate.val().length === 2) {
                            $startdate.val($startdate.val() + '.');
                        }
                        if ($startdate.val().length === 5) {
                            $startdate.val($startdate.val() + '.');
                        }
                    }
                    // Allow numeric, tab, backspace, delete keys only
                    return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
                });
            });
        </script>
    
    </head>
    <body>
       
        
        <form>
            <input id="startdate" name="date" type="text" maxlength="10" placeholder="DD.MM.YYYY">
        </form>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 24, 2016 1:50 PM

All replies

  • User-352524747 posted

    i read that .keyCode has been removed from the Web standards. Could this be the problem?

    Monday, October 24, 2016 9:05 AM
  • User-183374066 posted

    Just put your function in ready function

    <html>
    <head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
    <script type="text/javascript">
    $(function(){
        $('#startdate').keydown(function (e) {
            var key = e.charCode || e.keyCode || 0,
              $startdate = $(this);
            if (key !== 8 && key !== 9) {
                if ($startdate.val().length === 2) {
                    $startdate.val($startdate.val() + '.');
                }
                if ($startdate.val().length === 5) {
                    $startdate.val($startdate.val() + '.');
                }
            }
            // Allow numeric, tab, backspace, delete keys only
            return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
        });
    }
    </script>
    
    <form>
      <input id="startdate" name="date" type="text" maxlength="10" placeholder="DD.MM.YYYY">
    </form>
    
    </body>
    </html>

    Monday, October 24, 2016 9:40 AM
  • User-352524747 posted

    Just put your function in ready function

    Still doesn't work. I tried it on jsfiddle and your code does not work there too.

    Monday, October 24, 2016 1:16 PM
  • User-654786183 posted

    Just try this.  I enclosed your keydown function inside $(document).ready

    <html>
    <head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
    <script type="text/javascript">
    $(function(){
        $('#startdate').keydown(function (e) {
            var key = e.charCode || e.keyCode || 0,
              $startdate = $(this);
            if (key !== 8 && key !== 9) {
                if ($startdate.val().length === 2) {
                    $startdate.val($startdate.val() + '.');
                }
                if ($startdate.val().length === 5) {
                    $startdate.val($startdate.val() + '.');
                }
            }
            // Allow numeric, tab, backspace, delete keys only
            return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
        });
    	});
    </script>
    
    <form>
      <input id="startdate" name="date" type="text" maxlength="10" placeholder="DD.MM.YYYY">
    </form>
    
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 24, 2016 1:34 PM
  • User-183374066 posted

    It is working for me. can you place this in separate file and check that in browser

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#startdate').keydown(function (e) {
                    var key = e.charCode || e.keyCode || 0,
                      $startdate = $(this);
                    if (key !== 8 && key !== 9) {
                        if ($startdate.val().length === 2) {
                            $startdate.val($startdate.val() + '.');
                        }
                        if ($startdate.val().length === 5) {
                            $startdate.val($startdate.val() + '.');
                        }
                    }
                    // Allow numeric, tab, backspace, delete keys only
                    return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
                });
            });
        </script>
    
    </head>
    <body>
       
        
        <form>
            <input id="startdate" name="date" type="text" maxlength="10" placeholder="DD.MM.YYYY">
        </form>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 24, 2016 1:50 PM
  • User-654786183 posted
            }
            // Allow numeric, tab, backspace, delete keys only
            return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
        });
    }
    </script>

    Nasser,

    I just realized that your previous version of code doesn't has a closing curly braces for $(function(){

    Monday, October 24, 2016 2:09 PM