Hi everybody! This is my very first article on DevPapers.com. I hope you find it useful. Don't hesitate to send your comments.
Well, let's start! First let's build a simple form. It contains an input form for a message and the day that the message will be sent.
It also contains the javascript validate function between the head tags. The function will be filled later.
Save it on a file name example.php
<html>
<head>
<title>Building javascript code on-the-fly with PHP</title>
<script language="javascript">
function validate() {
}
</script>
</head>
<html>
<head>
<title>Building javascript code on-the-fly with PHP</title>
<body>
<form name="formExample" method="post" action="example.php" onSubmit="return validate();">
<table>
<tr><td>Message name</td><td><input type="text" name="mName"></td></tr>
<tr><td>Day to send message</td><td><input type="text" name="mDay"></td></tr>
<tr><td> </td><td><input type="submit"></td></tr>
</table>
</form>
</body>
</html> |
All data is recorded on a database. The mDay input must be a valid number between 0 and 365. But there's a problem! The user will fill in this form several times and the mDay field can't accept duplicated values. Otherwise, more than one message will be delivered on the same day.
Of course you could check this input with PHP. But it's not the intention of this article. Let's speed up things for the user! Remember? So, first you make a query to the database and hold all values of mDay in a array. To make things easier for us let's build this array to avoid making the connection code to the dabase. Update the example.php file.
<?
// array filled with values already registered
$mDaysSaved = array(0,5,19,22,91);
?>
<html>
<head>
<title>Building javascript code on-the-fly with PHP</title>
<script language="javascript">
function validate() {
}
</script>
</head>
<body>
<form name="formExample" method="post" action="example.php" onSubmit="return validate();">
<table>
<tr><td>Message name</td><td><input type="text" name="mName"></td></tr>
<tr><td>Day to send message</td><td><input type="text" name="mDay"></td></tr>
<tr><td> </td><td><input type="submit"></td></tr>
</table>
</form>
</body>
</html>
|
Now we'll insert the PHP array into the javascript code!! Update your example.php file again.
<?
// array filled with values already registered
// this values will open an error message
$phpArray = array(0,5,19,22,91);
?>
<html>
<head>
<title>Building javascript code on-the-fly with PHP</title>
<script language="javascript">
function validate() {
error = "";
// php entry
<?
// better check if the array is filled
if(count($phpArray) > 0) {
// this will be command line to create the javascript array: mDaySaved
$jsArray = 'mDaySaved = [';
for($i = 0; $i < count($phpArray); $i++) {
if($i == count($phpArray) - 1) {
$jsArray .= $phpArray[$i].'];';
} else {
$jsArray .= $phpArray[$i].',';
}
}
// this will expose the array mDaySaved to the javascript code
echo $jsArray;
// now let's print the javascript function itself
echo 'for(i = 0; i < mDaySaved.length; i++) {';
echo 'if(window.document.formExample.mDay.value == mDaySaved[i]) {';
echo 'error += "there is already a message set for this day. Please, try another value between 0 and 365. \r";';
echo '}}';
}
?>
// back to javascript code
if(error) {
alert(error);
return false;
} else {
alert("Valid input! The form will be submitted.");
return true;
}
}
</script>
</head>
<body>
<form name="formExample" method="post" action="example.php" onSubmit="return validate();">
<table>
<tr><td>Message name</td><td><input type="text" name="mName"></td></tr>
<tr><td>Day to send message</td><td><input type="text" name="mDay"></td></tr>
<tr><td> </td><td><input type="submit"></td></tr>
</table>
</form>
</body>
</html> |
Well, we're done! Try to submit the values 0, 5, 19, 22 or 91 on the mDay field. The javascript validate function won't accept this values and will inform the user.
Dani Berg
