Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Regular Coder
    Join Date
    Apr 2007
    Posts
    317
    Thanks
    24
    Thanked 3 Times in 3 Posts

    Onclick add date entry

    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.

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    What, today's date?
    Example, no date formatting or anything.

    Code:
    <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="" />

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    More Examples (Live Version):

    Code:
    <!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>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Regular Coder
    Join Date
    Apr 2007
    Posts
    317
    Thanks
    24
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by nikkiH View Post
    What, today's date?
    Example, no date formatting or anything.

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

  • #5
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Y-n-j??

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

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #6
    Regular Coder
    Join Date
    Apr 2007
    Posts
    317
    Thanks
    24
    Thanked 3 Times in 3 Posts
    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.

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

  • #7
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    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.

    Code:
    <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

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #8
    Regular Coder
    Join Date
    Apr 2007
    Posts
    317
    Thanks
    24
    Thanked 3 Times in 3 Posts
    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.

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    It returns zero-based month, 0 to 11. So you need to add 1 to display the correct month.

  • #10
    Regular Coder
    Join Date
    Apr 2007
    Posts
    317
    Thanks
    24
    Thanked 3 Times in 3 Posts
    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.

    Code:
    (d.getMonth()<10?"0"+d.getMonth():d.getMonth()) + 1
    
    //Doesn't work
    Code:
    (d.getMonth()<10?"0"+d.getMonth():d.getMonth()+1)
    
    //Doesn't work

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    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;
    }

  • #12
    Regular Coder
    Join Date
    Apr 2007
    Posts
    317
    Thanks
    24
    Thanked 3 Times in 3 Posts
    Can anyone tell me why i can't get this function to work in firefox?

  • #13
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Arbitrator View Post
    More Examples (Live Version)
    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.

    Quote Originally Posted by macleodjb View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    macleodjb (01-06-2008)

  • #14
    Regular Coder
    Join Date
    Apr 2007
    Posts
    317
    Thanks
    24
    Thanked 3 Times in 3 Posts
    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.

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by Arbitrator View Post
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •