943,608 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Date Expired? date expiration alert
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
May 20th, 2009
0

Date Expired? date expiration alert

Expand Post »
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]
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
m-hrt is offline Offline
46 posts
since May 2009
Permalink
May 20th, 2009
0

Re: Date Expired? date expiration alert

any one?
Reputation Points: 10
Solved Threads: 0
Light Poster
m-hrt is offline Offline
46 posts
since May 2009
Permalink
May 20th, 2009
0

Re: Date Expired? date expiration alert

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!
Reputation Points: 14
Solved Threads: 22
Junior Poster
JugglerDrummer is offline Offline
138 posts
since Apr 2009
Permalink
May 20th, 2009
0

Re: Date Expired? date expiration alert

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.
Sponsor
Reputation Points: 300
Solved Threads: 357
WiFi Lounge Lizard
Airshow is offline Offline
2,524 posts
since Apr 2009
Permalink
May 21st, 2009
1

Re: Date Expired? date expiration alert

Sorry, forgot the old Date.getYear() dichotomy (IE & Safari vs the rest).

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

Airshow
Sponsor
Reputation Points: 300
Solved Threads: 357
WiFi Lounge Lizard
Airshow is offline Offline
2,524 posts
since Apr 2009
Permalink
May 24th, 2009
0

Re: Date Expired? date expiration alert

thanx for the help airshow rep added thanx
Reputation Points: 10
Solved Threads: 0
Light Poster
m-hrt is offline Offline
46 posts
since May 2009
Permalink
May 26th, 2009
0

Re: Date Expired? date expiration alert

Thanks m-hrt,

I hope your project goes well.

Airshow
Sponsor
Reputation Points: 300
Solved Threads: 357
WiFi Lounge Lizard
Airshow is offline Offline
2,524 posts
since Apr 2009
Permalink
May 26th, 2009
0

Re: Date Expired? date expiration alert

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.
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006
Permalink
May 26th, 2009
1

Re: Date Expired? date expiration alert

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.
Sponsor
Reputation Points: 300
Solved Threads: 357
WiFi Lounge Lizard
Airshow is offline Offline
2,524 posts
since Apr 2009
Permalink
May 26th, 2009
1

Re: Date Expired? date expiration alert

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.
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Extract part of string
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Ajax hidden boxes for log in interface help!





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC