JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Date Expired? date expiration alert

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply
1 2

•
•
Join Date: May 2009
Posts: 38
Reputation: m-hrt is an unknown quantity at this point 
Solved Threads: 0
m-hrt's Avatar
m-hrt m-hrt is offline Offline
Light Poster

Date Expired? date expiration alert

 
0
  #1
May 20th, 2009
i want a alert that alert when press submit button if the date user have inserted is expired as today is 19 may 2009 if a user puts 18 may 2009 it alerts that card expired.

here is the code:-

PHP CODE:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <?php
  2.  
  3. $connection = mysql_connect("localhost","root","autodeskmaya") or die("error connect");
  4. mysql_select_db("online_bus_project");
  5.  
  6. if(isset($_POST['submit']))
  7. {
  8. header("location: http://localhost/site/printticket.php");
  9.  
  10. $first_name = $_POST["fname"];
  11.  
  12. $card_number = $_POST["card_number_field1"] . $_POST["card_number_field2"] . $_POST["card_number_field3"] . $_POST["card_number_field4"];
  13.  
  14. $expiry_date = $_POST["card_exp_month"] . $_POST["card_exp_year"];
  15.  
  16. $query = "INSERT INTO payment (name, number, expire) VALUES('$first_name', '$card_number','$expiry_date')";
  17. mysql_query($query, $connection) or die(mysql_error());
  18.  
  19. }
  20. ?>




HTML FORM:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <div class="style3" id="payment_box">
  2.  
  3. <form name="payment" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
  4.  
  5. <center>Make Payment<br />
  6. </center>
  7. <br /><br /><br />
  8. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Card Holder's Name:&nbsp; <input name="fname" type="text" id="fname" />
  9. <br /><br />
  10. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Card Number:
  11. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  12. <INPUT name="card_number_field1" type="text" id="card_number_field1" size="4" maxlength="4" />
  13. &nbsp;<INPUT name="card_number_field2" type="text" id="card_number_field2" size="4" maxlength="4">
  14. &nbsp;<INPUT name="card_number_field3" type="text" id="card_number_field3" size="4" maxlength="4">
  15. &nbsp;<INPUT name="card_number_field4" type="text" id="card_number_field4" size="4" maxlength="4">
  16. <br /><br />
  17.  
  18. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Card Expiry Date:&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;<INPUT name="card_exp_month" type="text" id="card_exp_month" size="2" maxlength="2"> 
  19. / 
  20. <INPUT name="card_exp_year" type="text" id="card_exp_year" size="4" maxlength="4">
  21. </center><br /><br />
  22. <center><input name="submit" type="submit" onclick="MM_validateForm('fname','','R','card_number_field1','','RisNum','card_number_field2','','RisNum','card_number_field3','','RisNum','card_number_field4','','RisNum','card_exp_month','','RisNum','card_exp_year','','RisNum');return document.MM_returnValue" value="Submit" />
  23.  
  24. </form>
  25.  
  26. </div>
  27.  
  28. form is validate thats why it contains javascript.
  29.  
  30. these two fields are the expiration in which i want that alert
  31.  
  32. <INPUT name="card_exp_month" type="text" id="card_exp_month" size="2" maxlength="2">/<INPUT name="card_exp_year" type="text" id="card_exp_year" size="4" maxlength="4">
  33.  


month and year is on numbers like [05]\[2009]
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 38
Reputation: m-hrt is an unknown quantity at this point 
Solved Threads: 0
m-hrt's Avatar
m-hrt m-hrt is offline Offline
Light Poster

Re: Date Expired? date expiration alert

 
0
  #2
May 20th, 2009
any one?
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 119
Reputation: JugglerDrummer is an unknown quantity at this point 
Solved Threads: 15
JugglerDrummer's Avatar
JugglerDrummer JugglerDrummer is offline Offline
Junior Poster

Re: Date Expired? date expiration alert

 
0
  #3
May 20th, 2009
You're going to have a little thing that determines if the date is before the current date, probably using the > operator of Date, and you can just add a process() function as the event handler of the submit button. If you need more clarification, just let us know!
92% of all statistics are made up on the spot.

If you found a post helpful, please click the "give XXX reputation" link, to show your appreciation to those who helped you. Thanks! :D
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 844
Reputation: Airshow is on a distinguished road 
Solved Threads: 121
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: Date Expired? date expiration alert

 
0
  #4
May 20th, 2009
m-hrt,

Try this. It validates name, card number and date fields so it's a bit more than you asked for. From this you should be able to see how client-side form validation works. The main parts of the trick are to attach the validate() function as the form's onsubmit handler and to return true to allow submission, or false to suppress it.

As you will see, I have chosen to give colour coded feedback to the user rather than an alert, but I am sure you wil be able to work out where to insert an alert if you want one.

You will also see that a form is more neatly formatted with a table rather than using &nbsp; to pad it out.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <title>Untitled</title>
  6. <style type="text/css">
  7. #cardDetails td { vertical-align:top; }
  8. #cardDetails td p { margin:0; font-size:9pt; }
  9. </style>
  10.  
  11. <script language="JavaScript" type="text/javascript">
  12. var $ = Object.prototype.$ = function(id) { return (document.getElementById) ? document.getElementById(id): document.all[id]; };
  13. function validate(form) {
  14. 	var resultCodes = [];//Will be populated with -ve numbers for errors, +ve for validated
  15. 	var allNumeric = /^[0-9]+$/;
  16. 	//Name validation
  17. 	if($('fname').value === '') { resultCodes.push(-1); }//check 1: error
  18. 	else { resultCodes.push(1); }//check 1: pass
  19. 	//Card number validation
  20. 	var el_1 = $('card_number_field1');
  21. 	var el_2 = $('card_number_field2');
  22. 	var el_3 = $('card_number_field3');
  23. 	var el_4 = $('card_number_field4');
  24. 	if(!el_1 || !el_1.value || !allNumeric.test(el_1.value) || el_1.value.length < 4 ||
  25. 	   !el_2 || !el_2.value || !allNumeric.test(el_2.value) || el_2.value.length < 4 ||
  26. 	   !el_3 || !el_3.value || !allNumeric.test(el_3.value) || el_3.value.length < 4 ||
  27. 	   !el_4 || !el_4.value || !allNumeric.test(el_4.value) || el_4.value.length < 4 ) { resultCodes.push(-2); }//check 2: error
  28. 	else { resultCodes.push(2); }//check 2: pass
  29. 	//Date validation
  30. 	var today = new Date();
  31. 	var expMonth = $('card_exp_month');
  32. 	var expYear  = $('card_exp_year');
  33. 	expMonth = (!expMonth || !expMonth.value || !allNumeric.test(expMonth.value)) ? -1 : parseInt(expMonth.value-1);//Convert to index-origin:zero
  34. 	expYear  = (!expYear  || !expYear.value  || !allNumeric.test(expYear.value))  ?  0 : parseInt(expYear.value);
  35. 	if( expMonth === -1 || expYear === 0 || expYear < today.getYear() ||
  36. 	  (expYear === today.getYear() && expMonth < today.getMonth()) ) { resultCodes.push(-3); }//check 3: error
  37. 	else { resultCodes.push(3); }//check 3: pass
  38. 	//Error indication
  39. 	var rtnVal = true;
  40. 	for(var i=0; i<resultCodes.length; i++){
  41. 		var el = $('msg'+Math.abs(resultCodes[i]));
  42. 		if(el){
  43. 			el.style.color = (resultCodes[i] < 0) ? '#FF0000' : '#000000';
  44. 			rtnVal = rtnVal && (resultCodes[i] > 0);
  45. 		}
  46. 	}
  47. 	return rtnVal;
  48. }
  49. </script>
  50. </head>
  51.  
  52. <body>
  53. <div class="style3" id="payment_box">
  54. 	<form name="payment" action="" method="post" onsubmit="return validate(this);">
  55. 	<table id="cardDetails" align="center"><tr>
  56. 	<td>Card Holder's Name :</td>
  57. 	<td><input name="fname" type="text" id="fname" msg="msg1" />
  58. 	<p id="msg1" class="msg">Enter the account holder's name that appears on your card.</p></td>
  59. 	</tr><tr>
  60. 	<td>Card Number :</td>
  61. 	<td><INPUT name="card_number_field1" type="text" id="card_number_field1" size="4" maxlength="4" msg="msg2" />
  62. 	&nbsp;<INPUT name="card_number_field2" type="text" id="card_number_field2" size="4" maxlength="4" msg="msg2" />
  63. 	&nbsp;<INPUT name="card_number_field3" type="text" id="card_number_field3" size="4" maxlength="4" msg="msg2" />
  64. 	&nbsp;<INPUT name="card_number_field4" type="text" id="card_number_field4" size="4" maxlength="4" msg="msg2" />
  65. 	<p id="msg2" class="msg">Enter your card's 16-digit account number.</p>
  66. 	</td>
  67. 	</tr><tr>
  68. 	<td>Card Expiry Date (mm yyyy) :</td>
  69. 	<td><INPUT name="card_exp_month" type="text" id="card_exp_month" size="2" maxlength="2" msg="msg3" />&nbsp;/&nbsp;
  70. 	<INPUT name="card_exp_year" type="text" id="card_exp_year" size="4" maxlength="4" msg="msg3" />
  71. 	<p id="msg3" class="msg">Date must be in the format "01 2000" and must not be earlier than the current month.</p>
  72. 	</td>
  73. 	</tr><tr>
  74. 	<td></td>
  75. 	<td><input name="submit" type="submit" value="Submit" /></td>
  76. 	</tr></table>
  77. 	</form>
  78. </div>
  79. </body>
  80. </html>
  81.  
But please don't simply trust my code. Check it thoroughly and modify if it doesn't do exactly what you want.

Airshow
Last edited by Airshow; May 20th, 2009 at 11:44 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 844
Reputation: Airshow is on a distinguished road 
Solved Threads: 121
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: Date Expired? date expiration alert

 
1
  #5
May 21st, 2009
Sorry, forgot the old Date.getYear() dichotomy (IE & Safari vs the rest).

Change .getYear() to .getFullYear() in three places.

Airshow
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 38
Reputation: m-hrt is an unknown quantity at this point 
Solved Threads: 0
m-hrt's Avatar
m-hrt m-hrt is offline Offline
Light Poster

Re: Date Expired? date expiration alert

 
0
  #6
May 24th, 2009
thanx for the help airshow rep added thanx
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 844
Reputation: Airshow is on a distinguished road 
Solved Threads: 121
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: Date Expired? date expiration alert

 
0
  #7
May 26th, 2009
Thanks m-hrt,

I hope your project goes well.

Airshow
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

Re: Date Expired? date expiration alert

 
0
  #8
May 26th, 2009
Date Comparison is really hard in javascript. So I wrote 2 very useful functions for the same. I think this is right time to post:

javascript Syntax (Toggle Plain Text) 
  1. // Checks if 2 input dates are same
  2.  function areSame(date1, date2) {
  3.     var date1Date = date1.getDate();
  4.     var date1Month = date1.getMonth();
  5.     var date1Year = date1.getFullYear();
  6.  
  7.     var date2Date = date2.getDate();
  8.     var date2Month = date2.getMonth();
  9.     var date2Year = date2.getFullYear();
  10.  
  11.     var result = true;
  12.     if((date1Date != date2Date) || (date1Month != date2Month) || (date1Year != date2Year)) {
  13. 	result = false;
  14.     }
  15.  
  16.     return result;
  17. }
  18.  
  19. // Compares 2 dates
  20. // if date1 < date2, return 1
  21. // if date1 > date2, return -1
  22. // if date1 == date2, return 0
  23.  function compare(date1, date2) {
  24.     var date1Date = date1.getDate();
  25.     var date1Month = date1.getMonth();
  26.     var date1Year = date1.getFullYear();
  27.  
  28.     var date2Date = date2.getDate();
  29.     var date2Month = date2.getMonth();
  30.     var date2Year = date2.getFullYear();
  31.  
  32.     // Check for same date
  33.     if(areSame(date1, date2))
  34. 	return 0;
  35.  
  36.     if(date1Year == date2Year) {
  37. 	if(date1Month == date2Month) {
  38. 	    if(date1Date == date2Date) {
  39. 		return 0;
  40. 	    } else {
  41. 		if(date1Date < date2Date) {
  42. 		    return 1;
  43. 		} else {
  44. 		    return -1;
  45. 		}
  46. 	    }
  47. 	} else {
  48. 	    if(date1Month < date2Month) {
  49. 		return 1;
  50. 	    } else {
  51. 		return -1;
  52. 	    }
  53. 	}
  54.     } else {
  55. 	if(date1Year < date2Year) {
  56. 	    return 1;
  57. 	} else {
  58. 	    return -1
  59. 	}
  60.     }
  61. }
Last edited by Luckychap; May 26th, 2009 at 2:44 pm.
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 844
Reputation: Airshow is on a distinguished road 
Solved Threads: 121
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: Date Expired? date expiration alert

 
1
  #9
May 26th, 2009
Lucky, I'm sure your code works but it can be much more compact by adding some simple methods to the Date object.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. Date.prototype.setToMidday = function(){ this.setHours(12); this.setMinutes(0); this.setSeconds(0); this.setMilliseconds(0); return this; };
  2. Date.prototype.isSameDateAs = function(d){ return d.setToMidday().getTime() == this.clone().setToMidday().getTime(); };
  3. Date.prototype.compareDate = function(d){ return this.isSameDateAs(d) ? 0 : (this.clone().setToMidday().getTime() > d.setToMidday().getTime()) ? 1 : -1; };
  4. Date.prototype.clone = function(){ return new Date(this.getTime()); };
Note: .clone() is used before .setToMidday() thus avoiding the modification of this when performing tests in .isSameDateAs() and .compareDate() .

Use as follows:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. var d1 = new Date(2009, 04, 25, 01, 31, 15);//Yesterday
  2. var d2 = new Date(2009, 04, 26, 01, 31, 15);//Today
  3. var d3 = new Date(2009, 04, 27, 01, 31, 15);//Tomorrow
  4. alert(d2.compareDate(d1));//Today is later than Yesterday; therefore 1
  5. alert(d2.compareDate(d2));//Today is the same as Today; therefore 0
  6. alert(d2.compareDate(d3));//Today is earlier than Tomorrow; therefore -1
Airshow
Last edited by Airshow; May 26th, 2009 at 4:43 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

Re: Date Expired? date expiration alert

 
1
  #10
May 26th, 2009
Well Airshow,

I wrote these function on STB browsers, which do not support prototyping of predefined objects like Date.

But your effort is really appreciated.
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxexample ajaxjspservlets array beta box browser captchaformproblem cart child class close codes column css date debugger decimal dependent design disablefirebug dom download editor element embed engine enter error events explorer ext file firefox focus form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index java javascript javascripthelp2020 jquery jsf jsp jump libcurl listbox maps masterpage math media menu microsoft mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming prototype redirect safari scale scriptlets scroll search security select software toggle unicode variables w3c web webservice window windowofwords \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC