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
<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>
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
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.
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.
<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>
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.
function leadingZero(value) {
return (value < 10) ? '0' + value : value;
}
var date = new Date();
var mmddyyyy =
leadingZero(month) + '/' +
leadingZero(day) + '/' +
date.getFullYear();
or
function leadingZero(value) {
return (value < 10) ? '0' + value : value;
}
var date = new Date();
var mmddyyyy = leadingZero(month) + '/' + leadingZero(day) + '/' + date.getFullYear();
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:
<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>
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
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…
