Changing text in a text box

**ggerke** · Apr 22, 2011 13:16

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>

**paul_wilkins** · Apr 22, 2011 15:36

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

**ggerke** · Apr 23, 2011 09:12

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.

**ggerke** · Apr 25, 2011 12:34

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>

**paul_wilkins** · Apr 25, 2011 14:30

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();

**ggerke** · Apr 26, 2011 10:43

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>

**paul_wilkins** · Apr 26, 2011 16:02

Originally Posted by ggerke

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

**ggerke** · Apr 27, 2011 04:43

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...

**paul_wilkins** · Apr 27, 2011 04:45

Originally Posted by ggerke

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.

User Tag List

Thread: Changing text in a text box

Thread Tools

Display

Changing text in a text box

Bookmarks

Bookmarks

Posting Permissions