All 4 Developer: jQuery and PHP generated form

Say you want to enable disable text fields in a form that is generated by PHP script. The script pulls data from a MySQL table, and you want to reduce source code you maintain to minimum. You want JavaScript to work regardless of number of fields in table only condition is that billing fields are enabled when shipping data is different from billing data. And vice versa.

Well solution is simple and you have to maintain only two SQL statements on server side, and jQuery makes sure that you don't have to maintain JavaScript code.

Below are the PHP script that relies on table custaddr and MySQL script for the table.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery and PHP working on a form</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#sameAsShipping').change(function(){
if( this.checked ){
// find all text inputs inside billingInfo and disable them
$('#billingInfo input:text').attr('disabled','disabled');
} else {
// find all text inputs inside billingInfo and enable them
$('#billingInfo input:text').removeAttr('disabled');
}
}).trigger('change');
});
</script>
</head>

<body>
<h1>jQuery enables / disables text fields generated by PHP</h1>
<?php
$conn = mysql_connect("localhost", "", "") or die ("enter username and password");
mysql_select_db("your_database");
echo'<form>';
echo'<fieldset id="shippingInfo">';
echo'<legend>Shipping Info</legend>';
$sql = "SELECT shipName , shipAddr, shipRemark FROM custaddr";
$query = mysql_query($sql,$conn);
$columns = mysql_num_fields($query);

for($i = 0; $i < $columns; $i++) {
$param = mysql_field_name($query,$i);
echo "<label for=\"$param\">$param</label>
<input name=\"$param\" id=\"$param\" type=\"text\" />";
}
echo'</fieldset>';

echo'<fieldset id="billingInfo">';
echo'<legend>Billing Info</legend>';
echo"<label for=\"sameAsShipping\">Same as Shipping</label>
<input name=\"sameAsShipping\" id=\"sameAsShipping\" type=\"checkbox\"
value=\"sameAsShipping\" /><br/>";
$sql = "SELECT billName, billAddr, billRemark FROM custaddr";
$query = mysql_query($sql,$conn);
$columns = mysql_num_fields($query);

for($i = 0; $i < $columns; $i++) {
$param = mysql_field_name($query,$i);
echo "<label for=\"$param\">$param</label>
<input name=\"$param\" id=\"$param\" type=\"text\" />";
}
echo'</fieldset><input type="submit" value="Submit" /></form>';
?>
</body>
</html>

and here is the MySQL script for custaddr table. Add or delete column(s) and run PHP script from above to see it in action.

CREATE TABLE `custaddr` (
`shipName` varchar(15) default NULL,
`shipAddr` varchar(60) default NULL,
`shipRemark` varchar(50) NOT NULL,
`billName` varchar(15) default NULL,
`billAddr` varchar(60) default NULL,
`billRemark` varchar(50) NOT NULL)
ENGINE=InnoDB DEFAULT CHARSET=latin1;

you need only to maintain this two SQL statements $sql = "SELECT billName, billAddr, billRemark FROM custaddr"; and $sql = "SELECT shipName, shipAddr, shipRemark FROM custaddr";. Number of text fields and their names and ids are set in PHP loops and they depend of column name and number of columns in the query.

All 4 Developer

Saturday, April 6, 2013

jQuery and PHP generated form

No comments:

Post a Comment