...

View Full Version : Onclick add date entry



macleodjb
05-04-2007, 08:31 PM
I have a form with a checkbox and a textbox. I would like to have it so when you check the checkbox the date gets entered into the checkbox. I'm using php but i think this is a javascript routine. If it can be done using php let me know. I'm new to php and javascript so i don't know. Thanks in advance for the help.

nikkiH
05-04-2007, 10:51 PM
What, today's date?
Example, no date formatting or anything.


<input type="checkbox" name="chkDate" id="chkDate" onclick="if(this.checked){var d = new Date(); this.form.txtDate.value=d;}else{this.form.txtDate.value=''}" />
<input type="text" name="txtDate" id="chkDate" value="" />

Arbitrator
05-04-2007, 11:15 PM
More Examples (Live Version (http://www.jsgp.us/demos/CF113580.html)):


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-Latn-US">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo CF113580</title>
<meta name="Author" content="Patrick Garies">
<meta name="Created" content="2007 May 4">
<style type="text/css">
* { margin: 0; }
html { padding: 1em; line-height: 2; }
[readonly] { background: #eee; color: black; }
[for="date1"]:after, [for="date2"]:after, [for="date3"]:after { content: ":"; }
#populate1, #populate2, #populate3 { cursor: pointer; }
#populate2, #populate3 { font-weight: bold; }
#populate2:hover, #populate3:hover { color: red; }
</style>
<script type="text/javascript">
function populate1() {
if (document.getElementById("populate1").checked) {
var now = new Date();
function zeroMonth() { if (now.getMonth().toString.length < 2) { return "0"; } else { return ""; } }
function zeroDay() { if (now.getDay().toString.length < 2) { return "0"; } else { return ""; } }
document.getElementById("date1").value = now.getFullYear() + "–" + zeroMonth() + now.getMonth() + "–" + zeroDay() + now.getDay();
}
else {
document.getElementById("date1").value = "";
}
}
var checked1 = false;
function populate2() {
if (!checked1) {
checked1 = true;
document.getElementById("populate2").firstChild.data = "\u2611"; // see also U+2612
var now = new Date();
function zeroMonth() { if (now.getMonth().toString.length < 2) { return "0"; } else { return ""; } }
function zeroDay() { if (now.getDay().toString.length < 2) { return "0"; } else { return ""; } }
document.getElementById("date2").value = now.getFullYear() + "–" + zeroMonth() + now.getMonth() + "–" + zeroDay() + now.getDay();
}
else {
checked1 = false;
document.getElementById("populate2").firstChild.data = "\u2610";
document.getElementById("date2").value = "";
}
}
var checked2 = false;
function populate3() {
if (!checked2) {
checked2 = true;
document.getElementById("populate3").firstChild.data = "\u2612"; // see also U+2611
var now = new Date();
document.getElementById("date3").value = now.toUTCString();
}
else {
checked2 = false;
document.getElementById("populate3").firstChild.data = "\u2610";
document.getElementById("date3").value = "";
}
}
</script>

</head>
<body>

<div>
<label for="date1">Date</label>
<input type="text" id="date1" readonly="readonly">
</div>
<div>
<input type="checkbox" id="populate1" onclick="populate1();">
<label for="populate1">Populate Field with Current Date</label>
</div>

<div>
<label for="date2">Date</label>
<input type="text" id="date2" readonly="readonly">
</div>
<div>
<span id="populate2" onclick="populate2();">&#x2610;</span>
Populate Field with Current Date
</div>

<div>
<label for="date3">Date</label>
<input type="text" id="date3" readonly="readonly">
</div>
<div>
<span id="populate3" onclick="populate3();">&#x2610;</span>
Populate Field with Current Date
</div>

</body>
</html>

macleodjb
05-07-2007, 01:59 PM
What, today's date?
Example, no date formatting or anything.


<input type="checkbox" name="chkDate" id="chkDate" onclick="if(this.checked){var d = new Date(); this.form.txtDate.value=d;}else{this.form.txtDate.value=''}" />
<input type="text" name="txtDate" id="chkDate" value="" />

How can i format the date properly? i want to use 'Y-n-j' i tried but i couldn't get it to work properly.

nikkiH
05-07-2007, 02:38 PM
Y-n-j??

What do you want, as an example using today's date?
2007-May-07 or ???

macleodjb
05-07-2007, 02:58 PM
I'm sorry i'm looking for an output like this. 2007-05-07.

Also how can i change it so that txtdate is a variable retrieved by the id. So the line of code you have.



this.form.txtDate.value=d


I'd like it to replace txtdate with a variable.

[code]
this.form.$IDVariable.value=d
[code]

Thanks in advance.

nikkiH
05-07-2007, 07:27 PM
Cheap and dirty. There are quite a few date formatting functions out there that people have written. This is only an example of passing ids to a function to determine which checkbox and which textbox to be looking at.


<script type="text/javascript">
function putDate(chkId, txtId)
{
if (document.getElementById)
{
var c = document.getElementById(chkId);
if (c && c.type == "checkbox" && c.checked)
{
var t = document.getElementById(txtId);
if (t && t.type == "text")
{
var d = new Date();
var df = "" + d.getFullYear() + "-" + (d.getMonth()<10?"0"+d.getMonth():d.getMonth()) + "-" + (d.getDate()<10?"0"+d.getDate():d.getDate());

t.value=df;
}
}
else
{
var t = document.getElementById(txtId);
if (t && t.type == "text") t.value = "";
}
}
}
</script>
</head>

<body>
<form id="form1" name="form1" >
<input type="checkbox" name="chkDate" id="chkDate" onclick="putDate(this.id,'txtDate');" />
<input type="text" name="txtDate" id="chkDate" value="" />
</form>


Javascript date built-ins: http://www.w3schools.com/jsref/jsref_obj_date.asp

macleodjb
05-07-2007, 08:15 PM
Thanks alot Nikki. Just one last thing though...why does getmonth() output one month less than today's date? It outputs 2007-04-07, instead of 2007-05-07.

glenngv
05-07-2007, 08:18 PM
It returns zero-based month, 0 to 11. So you need to add 1 to display the correct month.

macleodjb
05-07-2007, 08:45 PM
i figured i needed to add a 1 but i don't understand javascript so i don't know the proper syntax to add the 1.



(d.getMonth()<10?"0"+d.getMonth():d.getMonth()) + 1

//Doesn't work




(d.getMonth()<10?"0"+d.getMonth():d.getMonth()+1)

//Doesn't work

glenngv
05-07-2007, 09:03 PM
if (t && t.type == "text")
{
var d = new Date();
var m = d.getMonth()+1;
var df = d.getFullYear() + "-" + (m<10?"0"+m:m) + "-" + (d.getDate()<10?"0"+d.getDate():d.getDate());

t.value=df;
}

macleodjb
01-06-2008, 01:55 AM
Can anyone tell me why i can't get this function to work in firefox?

Arbitrator
01-06-2008, 12:11 PM
More Examples (Live Version (http://www.jsgp.us/demos/CF113580.html))I just updated this document so that it works correctly. I really don’t know what I was thinking when I wrote it. The current document is at a new (case‐sensitive) address: http://www.jsgp.us/demos/cf113580.html.


Can anyone tell me why i can't get this function to work in firefox?Assuming that you’re using nikkiH’s code, it contains what appears to be a typographical error; the id attribute value for the second input element should probably be txtDate instead of chkDate.

Tangential Information
nikkiH’s code also contains another technical error: the form element is missing the required action attribute. * There are also three more technical errors assuming an XHTML 1.0 Strict or XHTML 1.1 DTD: there’s no name attribute for the form element nor are input elements permitted as (immediate) children of form elements.

I’m also a bit curious as to why his/her code contains unnecessary instances of if (c … and if (t … since if either c or t do not exist, an error will be thrown.

* The statement assumes use of an XHTML 1.0 or XHTML 1.1 DTD; use of a DTD is not required in XHTML documents.

macleodjb
03-26-2008, 02:47 AM
Arbitrator, how can i make your code populate1() work like nikki H's code. I need to be able to pass multiple name's and ID's through this function without having to create a separate function for each set of checkbox and textbox? Simple question i'm sure for you but I gave it a stab and i can't get it functioning properly. Thanks in advance.

_Aerospace_Eng_
03-26-2008, 08:11 AM
I’m also a bit curious as to why his/her code contains unnecessary instances of if (c … and if (t … since if either c or t do not exist, an error will be thrown.
An error won't be thrown. The code was checking for the existence of those elements. If they didn't exist c would be false causing the whole conditional statement to be false therefore not doing anything. It wouldn't error out though.

Arbitrator
03-26-2008, 09:01 AM
Arbitrator, how can i make your code populate1() work like nikki H's code.Why don’t you simply use nikkiH’s code then?


An error won't be thrown. The code was checking for the existence of those elements. If they didn't exist c would be false causing the whole conditional statement to be false therefore not doing anything. It wouldn't error out though.Yeah, my mistake. I was thinking something like the following:


// produces “error”
try {
if (c) {
alert("c");
}
else {
alert("not c");
}
}
catch (e) {
alert("error");
}

However, nikkiH has something more like the following:


// produces “not c”
try {
var c = document.getElementById("false-id");
if (c) {
alert("c");
}
else {
alert("not c");
}
}
catch (e) {
alert("error");
}

If no element with the specified ID exists though, c becomes null, not false. Of course, it doesn’t seem to make any difference here.

macleodjb
03-26-2008, 04:39 PM
I can't use NikkiH's code because it doesn't work it firefox. Your code does work in firefox but i need to be able to pass parameters to it instead of being locked into one name description. That's all i need is your function populate1 formatted so it can accept more than one parameter. I tried to do it but I don't know javascript.

Arbitrator
03-27-2008, 11:18 AM
I can't use NikkiH's code because it doesn't work it firefox.Did you correct the typo mentioned in post 13 (http://www.codingforums.com/showpost.php?p=644471&postcount=13)?

I would guess that this is why the code does not work in Mozilla Firefox yet might work in Internet Explorer; Internet Explorer has an issue whereby you can select elements by name attribute via getElementById. Since the id attribute value is incorrect, but the name attribute value is not, this might allow the latter browser to behave as “expected”. (Note: I didn’t run a test to see if this was the case.)


I tried to do it but I don't know javascript.You’d probably find my code hard to use even if I modified it then since I use scripted event listeners (i.e., I used the addEventListener method for browsers that support W3C DOM2 Events and the onclick property for IE).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum