SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing text in a text box

    I've stripped down a project I'm working on to just the essentials, figuring I could work my way up to what the eventual goal is after I get this to work. Unfortunately this part isn't working and smacking my head against the wall is only making a bigger splotch.

    All I'm looking to do in this bit 'o coding is to get the current date to show up in the text box once anything from the dropbox is selected. Later on there'll be multiple text boxes based on the different types of dates but for now I'd just like to be able to do this one little part.

    Anybody got a clue-gram for what I'm doing wrong?

    Mannie Garcias in advance

    Code HTML4Strict:
    <html>
    <head>
     
      <script type="text/javascript" src="jquery-1.5.2.min.js"></script>
     
      <script>
        $(function() {
          $('#select').change(function() {
            var date = new Date();
            var day = date.getDate();
            if (day < 10) { day = "0" + day; }
            var month = date.getMonth() + 1;
            if (month < 10) { month = "0" + month; }
            var year = date.getFullYear();
            date = day + '/' + month + '/' + year; 
            alert(date);
            $('#up_date').val(date));
          });
        });
      </script>
     
    </head>
    <body>
     
    <input type="text" name="up_date" id="up_date" value="mm/dd/yyyy" size="10" maxlength="10" />
     
    <form>
    <select name="select" id="select">
      <option>Select your status</option>
      <option value="Complete">Complete date</option>
      <option value="Cancel">Cancel date</option>
      <option value="Reject">Reject date</option>
      <option value="Deny">Deny date</option>
    </select>
    </form>
     
    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Have you tried looking at the javascript or error console?
    Ctrl_Shift+J is the typical shortcut for it, while in IE you can go to the advanced options tab and turn on the checkbox for "Display a notification about every script error".

    When using Google Chrome, scripting console says:
    Uncaught SyntaxError: Unexpected token ) on line 17
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was so focused and sure it was something in my understanding of doing java 'n jquery that I hadn't even looked at the syntax. Sure enough, soon as I took out the extra paren the thing did just what it was suppose to. Now on to updating a particular text box depending on which drop down was selected.

    Thanks for the nudge to remember to check the console for errors; I'm putting up a post-it note now.

  4. #4
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, so here's the final (albeit stripped down) results from what I was trying to accomplish. Now when I select one of the options from the dropdown it will replace the existing string in the corresponding text box with today's date. I know I can combine a few of the lines (ie "var year=...", "var mmddyyyy=...') into the actual line that does the change but this seems clearer (and way less fugly) for when I potentially come back in the future and look at this again.

    Code HTML4Strict:
    <html>
    <head>
      <script type="text/javascript" src="jquery-1.5.2.min.js"></script>
     
      <script>
        $(function() {
          $('#select').change(function() {
            var date = new Date();
            var day = date.getDate();
            if (day < 10) { day = "0" + day; }
            var month = date.getMonth() + 1;
            if (month < 10) { month = "0" + month; }
            var year = date.getFullYear();
            var mmddyyyy = month + '/' + day + '/' + year;
            $('#'+$('#select').val() + '_date').val(mmddyyyy);
          });
        });
      </script>
     
    </head>
    <body>
     
    complete_date: <input type="text" name="complete_date" id="complete_date" value="mm/dd/yyyy" size="10" /><br>
    cancel_date:   <input type="text" name="cancel_date"   id="cancel_date"   value="mm/dd/yyyy" size="10" /><br>
    reject_date:   <input type="text" name="reject_date"   id="reject_date"   value="mm/dd/yyyy" size="10" /><br>
    deny_date:     <input type="text" name="deny_date"     id="deny_date"     value="mm/dd/yyyy" size="10" /><br>
     
    <br>
    <form>
    <select name="select" id="select">
      <option>Select your status</option>
      <option value="complete">Complete date</option>
      <option value="cancel">Cancel date</option>
      <option value="reject">Reject date</option>
      <option value="deny">Deny date</option>
    </select>
    </form>
     
    </body>
    </html>

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Perhaps a minor suggestion, but moving the leading zero stuff off to a separate function might help the code to be more expressive, as well as understandable.

    Code javascript:
    function leadingZero(value) {
        return (value < 10) ? '0' + value : value;
    }
    var date = new Date();
    var mmddyyyy =
        leadingZero(month) + '/' + 
        leadingZero(day) + '/' + 
        date.getFullYear();

    or

    Code javascript:
    function leadingZero(value) {
        return (value < 10) ? '0' + value : value;
    }
    var date = new Date();
    var mmddyyyy = leadingZero(month) + '/' + leadingZero(day) + '/' + date.getFullYear();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, okay - I do like that better. Cleaner and simple to read. The time it'd take for doing the function call to potentially add the leading zero should be negligible since it's only for one call and not bazillions of 'em, yes?

    Thus it ends up looking like this:

    Code HTML4Strict:
      <script>
        jQuery(function() {
          jQuery('#select').change(function() {
      	    function leadingZero(value) {
              //prepend a leading zero if a single digit
              return (value < 10) ? '0' + value : value;
            }
            var date = new Date();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var mmddyyyy = leadingZero(month) + '/' + 
                           leadingZero(day) + '/' +
                           date.getFullYear();          
            jQuery('#'+jQuery('#select').val() + '_date').val(mmddyyyy);
          });
        });
      </script>

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ggerke View Post
    Ah, okay - I do like that better. Cleaner and simple to read. The time it'd take for doing the function call to potentially add the leading zero should be negligible since it's only for one call and not bazillions of 'em, yes?
    One of the nice things about javascript is that it's designed to handle functions with great ease.

    Here's a quote from Douglas Crockford in a piece called The world's most misunderstood programming language (bold added by myself)

    JavaScript's C-like syntax, including curly braces and the clunky for statement, makes it appear to be an ordinary procedural language. This is misleading because JavaScript has more in common with functional languages like Lisp or Scheme than with C or Java. It has arrays instead of lists and objects instead of property lists. Functions are first class. It has closures. You get lambdas without having to balance all those parens
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I'm not saying that functions aren't good or make for cleaner code... I was just wondering if having a couple of if's in-line would be better for speed rather than readability. I know my target audience and the P4's they're using aren't exactly the speediest machines on the planet so whatever I can do to help 'em along is something I'm trying to keep in mind...

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ggerke View Post
    Oh, I'm not saying that functions aren't good or make for cleaner code... I was just wondering if having a couple of if's in-line would be better for speed rather than readability. I know my target audience and the P4's they're using aren't exactly the speediest machines on the planet so whatever I can do to help 'em along is something I'm trying to keep in mind...
    The difference won't be anything that can be easily observed.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •