Member Avatar for m-hrt

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:

<?php

$connection = mysql_connect("localhost","root","autodeskmaya") or die("error connect");
mysql_select_db("online_bus_project");

if(isset($_POST['submit']))
{
header("location: http://localhost/site/printticket.php");

$first_name = $_POST["fname"];

$card_number = $_POST["card_number_field1"] . $_POST["card_number_field2"] . $_POST["card_number_field3"] . $_POST["card_number_field4"];

$expiry_date = $_POST["card_exp_month"] . $_POST["card_exp_year"];

$query = "INSERT INTO payment (name, number, expire) VALUES('$first_name', '$card_number','$expiry_date')";
mysql_query($query, $connection) or die(mysql_error());

}
?>

HTML FORM:

<div class="style3" id="payment_box">

<form name="payment" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">

<center>Make Payment<br />
</center>
<br /><br /><br />
&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" />
<br /><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Card Number:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT name="card_number_field1" type="text" id="card_number_field1" size="4" maxlength="4" />
&nbsp;<INPUT name="card_number_field2" type="text" id="card_number_field2" size="4" maxlength="4">
&nbsp;<INPUT name="card_number_field3" type="text" id="card_number_field3" size="4" maxlength="4">
&nbsp;<INPUT name="card_number_field4" type="text" id="card_number_field4" size="4" maxlength="4">
<br /><br />

&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"> 
/ 
<INPUT name="card_exp_year" type="text" id="card_exp_year" size="4" maxlength="4">
</center><br /><br />
<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" />

</form>

</div>

form is validate thats why it contains javascript.

these two fields are the expiration in which i want that alert

<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">

month and year is on numbers like [05]\[2009]

  • 4 Contributors
  • 12 Replies
  • 2K Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by m-hrt

Recommended Answers

All 12 Replies

Member Avatar for m-hrt

any one?

Member Avatar for JugglerDrummer

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! :D

Member Avatar for Airshow

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#cardDetails td { vertical-align:top; }
#cardDetails td p { margin:0; font-size:9pt; }
</style>

<script language="JavaScript" type="text/javascript">
var $ = Object.prototype.$ = function(id) { return (document.getElementById) ? document.getElementById(id): document.all[id]; };
function validate(form) {
	var resultCodes = [];//Will be populated with -ve numbers for errors, +ve for validated
	var allNumeric = /^[0-9]+$/;
	//Name validation
	if($('fname').value === '') { resultCodes.push(-1); }//check 1: error
	else { resultCodes.push(1); }//check 1: pass
	//Card number validation
	var el_1 = $('card_number_field1');
	var el_2 = $('card_number_field2');
	var el_3 = $('card_number_field3');
	var el_4 = $('card_number_field4');
	if(!el_1 || !el_1.value || !allNumeric.test(el_1.value) || el_1.value.length < 4 ||
	   !el_2 || !el_2.value || !allNumeric.test(el_2.value) || el_2.value.length < 4 ||
	   !el_3 || !el_3.value || !allNumeric.test(el_3.value) || el_3.value.length < 4 ||
	   !el_4 || !el_4.value || !allNumeric.test(el_4.value) || el_4.value.length < 4 ) { resultCodes.push(-2); }//check 2: error
	else { resultCodes.push(2); }//check 2: pass
	//Date validation
	var today = new Date();
	var expMonth = $('card_exp_month');
	var expYear  = $('card_exp_year');
	expMonth = (!expMonth || !expMonth.value || !allNumeric.test(expMonth.value)) ? -1 : parseInt(expMonth.value-1);//Convert to index-origin:zero
	expYear  = (!expYear  || !expYear.value  || !allNumeric.test(expYear.value))  ?  0 : parseInt(expYear.value);
	if( expMonth === -1 || expYear === 0 || expYear < today.getYear() ||
	  (expYear === today.getYear() && expMonth < today.getMonth()) ) { resultCodes.push(-3); }//check 3: error
	else { resultCodes.push(3); }//check 3: pass
	//Error indication
	var rtnVal = true;
	for(var i=0; i<resultCodes.length; i++){
		var el = $('msg'+Math.abs(resultCodes[i]));
		if(el){
			el.style.color = (resultCodes[i] < 0) ? '#FF0000' : '#000000';
			rtnVal = rtnVal && (resultCodes[i] > 0);
		}
	}
	return rtnVal;
}
</script>
</head>

<body>
<div class="style3" id="payment_box">
	<form name="payment" action="" method="post" onsubmit="return validate(this);">
	<table id="cardDetails" align="center"><tr>
	<td>Card Holder's Name :</td>
	<td><input name="fname" type="text" id="fname" msg="msg1" />
	<p id="msg1" class="msg">Enter the account holder's name that appears on your card.</p></td>
	</tr><tr>
	<td>Card Number :</td>
	<td><INPUT name="card_number_field1" type="text" id="card_number_field1" size="4" maxlength="4" msg="msg2" />
	&nbsp;<INPUT name="card_number_field2" type="text" id="card_number_field2" size="4" maxlength="4" msg="msg2" />
	&nbsp;<INPUT name="card_number_field3" type="text" id="card_number_field3" size="4" maxlength="4" msg="msg2" />
	&nbsp;<INPUT name="card_number_field4" type="text" id="card_number_field4" size="4" maxlength="4" msg="msg2" />
	<p id="msg2" class="msg">Enter your card's 16-digit account number.</p>
	</td>
	</tr><tr>
	<td>Card Expiry Date (mm yyyy) :</td>
	<td><INPUT name="card_exp_month" type="text" id="card_exp_month" size="2" maxlength="2" msg="msg3" />&nbsp;/&nbsp;
	<INPUT name="card_exp_year" type="text" id="card_exp_year" size="4" maxlength="4" msg="msg3" />
	<p id="msg3" class="msg">Date must be in the format "01 2000" and must not be earlier than the current month.</p>
	</td>
	</tr><tr>
	<td></td>
	<td><input name="submit" type="submit" value="Submit" /></td>
	</tr></table>
	</form>
</div>
</body>
</html>

But please don't simply trust my code. Check it thoroughly and modify if it doesn't do exactly what you want.

Airshow

Member Avatar for Airshow

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

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

Airshow

commented: thanx for the help in validating expiry date +1
Member Avatar for m-hrt

thanx for the help airshow rep added thanx

Member Avatar for Airshow

Thanks m-hrt,

I hope your project goes well.

Airshow

Member Avatar for Luckychap

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:

// Checks if 2 input dates are same
 function areSame(date1, date2) {
    var date1Date = date1.getDate();
    var date1Month = date1.getMonth();
    var date1Year = date1.getFullYear();
    
    var date2Date = date2.getDate();
    var date2Month = date2.getMonth();
    var date2Year = date2.getFullYear();
    
    var result = true;
    if((date1Date != date2Date) || (date1Month != date2Month) || (date1Year != date2Year)) {
	result = false;
    }
    
    return result;
}

// Compares 2 dates
// if date1 < date2, return 1
// if date1 > date2, return -1
// if date1 == date2, return 0
 function compare(date1, date2) {
    var date1Date = date1.getDate();
    var date1Month = date1.getMonth();
    var date1Year = date1.getFullYear();
    
    var date2Date = date2.getDate();
    var date2Month = date2.getMonth();
    var date2Year = date2.getFullYear();
   
    // Check for same date
    if(areSame(date1, date2))
	return 0;
    
    if(date1Year == date2Year) {
	if(date1Month == date2Month) {
	    if(date1Date == date2Date) {
		return 0;
	    } else {
		if(date1Date < date2Date) {
		    return 1;
		} else {
		    return -1;
		}
	    }
	} else {
	    if(date1Month < date2Month) {
		return 1;
	    } else {
		return -1;
	    }
	}
    } else {
	if(date1Year < date2Year) {
	    return 1;
	} else {
	    return -1
	}
    }
}
Member Avatar for Airshow

Lucky, I'm sure your code works but it can be much more compact by adding some simple methods to the Date object.

Date.prototype.setToMidday = function(){ this.setHours(12); this.setMinutes(0); this.setSeconds(0); this.setMilliseconds(0); return this; };
Date.prototype.isSameDateAs = function(d){ return d.setToMidday().getTime() == this.clone().setToMidday().getTime(); };
Date.prototype.compareDate = function(d){ return this.isSameDateAs(d) ? 0 : (this.clone().setToMidday().getTime() > d.setToMidday().getTime()) ? 1 : -1; };
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:

var d1 = new Date(2009, 04, 25, 01, 31, 15);//Yesterday
var d2 = new Date(2009, 04, 26, 01, 31, 15);//Today
var d3 = new Date(2009, 04, 27, 01, 31, 15);//Tomorrow
alert(d2.compareDate(d1));//Today is later than Yesterday; therefore 1
alert(d2.compareDate(d2));//Today is the same as Today; therefore 0
alert(d2.compareDate(d3));//Today is earlier than Tomorrow; therefore -1

Airshow

commented: Good work! +3
Member Avatar for Luckychap

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.

commented: thanx for the help +1
Member Avatar for Airshow

Lucky,

Aha, thanks. I didn't know that. STB browsers are a big gap in my knowledge, so your info is also appreciated.

Airshow

Member Avatar for m-hrt

Lucky,

Aha, thanks. I didn't know that. STB browsers are a big gap in my knowledge, so your info is also appreciated.

Airshow

haha ya thanx again

Member Avatar for m-hrt

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.

thanx to you 2 really help full guys rep added.....

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.