Member Avatar for staticwave

Hi, I am very new to working with php and I need a little help getting the fields from my form divided into two rows and properly aligned when output to the user.

Function: This is a Client Profile type of program. A form is displayed to the user and the fields are pre-populated with client's current data from a MySQL DB. The user can then edit the form fields and use the submit button to UPDATE the corresponding data in the DB.

Problem: I am trying to split the form fields into two separate cells in a row inside a table, so that the form isn't so vertically long. I have managed to divide the fields into the cells (though my method may not be the best or most appropriate), but I can't get them to top align. I hope that is clear enough.

I have included the code and a screenshot. I've been messing around with this for a couple hours - ANY help will be greatly appreciated!

Code:

<?php

$labels = array( 
"CompanyName"=>"Company Name:",
"CompanyRep"=>"Company Rep:",
"RepPhone"=>"Phone Number:",
"RepEmail"=>"Email Address:",

"LegalRep"=>"Legal Rep:",
"LegalPhone"=>"Phone Number:",
"LegalEmail"=>"Email Address:",
"LegalAlert"=>"Alert Email:");

$products = array(
"Product1"=>"Product 1:",
"Product2"=>"Product 2:",
"Product3"=>"Product 3:",
"Product4"=>"Product 4:",
"Product5"=>"Product 5:",
"Product6"=>"Product 6:",
"Product7"=>"Product 7:",
"Product8"=>"Product 8:",
"Product9"=>"Product 9:",
"Product10"=>"Product 10:",
);


$user="root";
$host="localhost";
$password="";
$database = "vaclients";
$loginName = "Corel";
$cxn = mysqli_connect($host,$user,$password,$database)
or die ("couldn't connect to server");
$query = "SELECT * FROM corel
WHERE loginName='$loginName'";
$result = mysqli_query($cxn,$query)
or die ("Couldn't execute query.");
$row = mysqli_fetch_assoc($result);
?>

<html>
<head>
<title>Client Profile</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">

</head>

<body>

<?php

//Client Profile Form

//Company & Legal Info - Left Column
{
echo "<table border='0' align='top'>";
echo "<p><h3>Company and Legal Info</h3></p>";
echo "<tr align='top'><td align='top'><form action='ProcessCorel.php' method='POST'>";
foreach($labels as $field => $label)
echo
"<div class='field'>
<label for='$field'>$label</label>
<input type='text' name='$field' id='$field'
value='$row[$field]' size='50'
maxlength='50' /></div>\n";

//Product List - Right Column
echo "</td><td align='top'>";
echo "<p><h3>Product Watch List</h3></p>";
foreach($products as $field =>$product)
echo
"<div class='field'>
<label for='$field'>$product</label>
<input type='text' name='$field' id='$field'
value='$row[$field]' size='50'
maxlength='50' /></div>\n";

//Update Button
echo
"<br/>
<div id='submit'><input type='submit'
value='Update Profile' /></td></tr>\n";
echo "</div>\n</form>\n</body>\n</html>";

echo "</td></tr></table>";
}


?>
</body>
</html>
form_screen.png 103.24 KB
  • 3 Contributors
  • 5 Replies
  • 401 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by staticwave
Member Avatar for staticwave

I managed to clean it up a bit more, but I'm still having to use <br/> tags to 'bump up' the fields in the left column and the two columns still won't align exactly.

Attached is a new screen shot. Thanks for any help.

Updated Code

<?php

//Create labels array
$labels = array( 
"CompanyName"=>"Company Name:",
"CompanyRep"=>"Company Rep:",
"RepPhone"=>"Phone Number:",
"RepEmail"=>"Email Address:",

"LegalRep"=>"Legal Rep:",
"LegalPhone"=>"Phone Number:",
"LegalEmail"=>"Email Address:",
"LegalAlert"=>"Alert Email:");

//Create products array
$products = array(
"Product1"=>"Product 1:",
"Product2"=>"Product 2:",
"Product3"=>"Product 3:",
"Product4"=>"Product 4:",
"Product5"=>"Product 5:",
"Product6"=>"Product 6:",
"Product7"=>"Product 7:",
"Product8"=>"Product 8:",
"Product9"=>"Product 9:",
"Product10"=>"Product 10:",
);

//Define user and db variables
$user="root";
$host="localhost";
$password="";
$database = "vaclients";
$loginName = "Corel";
$cxn = mysqli_connect($host,$user,$password,$database)
or die ("couldn't connect to server");

//Query DB for client profile data
$query = "SELECT * FROM corel
WHERE loginName='$loginName'";
$result = mysqli_query($cxn,$query)
or die ("Couldn't execute query.");
$row = mysqli_fetch_assoc($result);
?>

<!--Add HTML head and link stylesheet-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Client Profile</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>

<?php

#######################
# Client Profile Form #
#######################

//Company & Legal Info - Left Column
{

//Create table
echo "<table border='0' align='top'>";

//Create left column
echo "<tr align='top'>";
echo "<td align='top'>";

//Add heading to column
echo "<p><h3>Company and Legal Info</h3></p>";

//Initiate form
echo "<form action='ProcessCorel.php' method='POST'>";

//Define form labels
foreach($labels as $field => $label)

//Display and populate left form fields
echo
"<div class='field'>
<label for='$field'>$label</label>
<input type='text' name='$field' id='$field'
value='$row[$field]' size='50'
maxlength='50' /></div>\n";

//Break space to align top
echo "<br/><br/><br/><br/><br/><br/><br/><br/>";

//Close left column and create right column
echo "</td><td align='top'>";

//Add heading to column
echo "<p><h3>Product Watch List</h3></p>";

//Define form lables
foreach($products as $field =>$product)

//Display and populate righ column fields
echo
"<div class='field'>
<label for='$field'>$product</label>
<input type='text' name='$field' id='$field'
value='$row[$field]' size='50'
maxlength='50' /></div>\n";

//Update Button
echo
"<br/>
<div id='submit'><input type='submit'
value='Update Profile' /></td></tr>\n";

//Close right column, row, and table
echo "</td></tr></table>";

//Close div, form, body, and html
echo "</div>\n</form>\n</body>\n</html>";


}


?>
formscreen.png 112.97 KB
Edited by staticwave because: n/a
Member Avatar for Zagga

Hi staticwave,

This looks more like a CSS problem than PHP.

Check your stylesheet, in particular the widths and padding of your table, tr, td and label elements, and your 'field' class. Are you trying to fit two 55% widths into a 100% space? This would cause some of the form fields to be pushed down.

Member Avatar for dashawk

I found some errors in your code. I have revised it and it looked like this:

<?php

$labels = array( 
"CompanyName"=>"Company Name:",
"CompanyRep"=>"Company Rep:",
"RepPhone"=>"Phone Number:",
"RepEmail"=>"Email Address:",

"LegalRep"=>"Legal Rep:",
"LegalPhone"=>"Phone Number:",
"LegalEmail"=>"Email Address:",
"LegalAlert"=>"Alert Email:");

$products = array(
"Product1"=>"Product 1:",
"Product2"=>"Product 2:",
"Product3"=>"Product 3:",
"Product4"=>"Product 4:",
"Product5"=>"Product 5:",
"Product6"=>"Product 6:",
"Product7"=>"Product 7:",
"Product8"=>"Product 8:",
"Product9"=>"Product 9:",
"Product10"=>"Product 10:",
);


$user="root";
$host="localhost";
$password="";
$database = "vaclients";
$loginName = "Corel";
$cxn = mysqli_connect($host,$user,$password,$database)
or die ("couldn't connect to server");
?>

<html>
<head>
<title>Client Profile</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">

</head>

<body>

<?php


$query = "SELECT * FROM corel
WHERE loginName='$loginName'";
$result = mysqli_query($cxn,$query)
or die ("Couldn't execute query.");


echo "<table border='0' align='top'>";
echo "<p><h3>Company and Legal Info</h3></p>";
echo "<tr align='top'><td align='top'><form action='ProcessCorel.php' method='POST'>";

while($row = mysqli_fetch_assoc($result)){
	//Client Profile Form
	
	//Company & Legal Info - Left Column
	
	foreach($labels as $field => $label){
		echo
		"<div class='field'>
		<label for='$field'>$label</label>
		<input type='text' name='$field' id='$field'
		value='$row[$field]' size='50'
		maxlength='50' /></div>\n";
		
		//Product List - Right Column
		echo "</td><td align='top'>";
		echo "<p><h3>Product Watch List</h3></p>";
		foreach($products as $field =>$product)
		echo
		"<div class='field'>
		<label for='$field'>$product</label>
		<input type='text' name='$field' id='$field'
		value='$row[$field]' size='50'
		maxlength='50' /></div>\n";
		
		//Update Button
		echo
		"<br/>
		<div id='submit'><input type='submit'
		value='Update Profile' /></td></tr>\n";
	}	
}
echo "</div>\n</form>";
echo "</td></tr></table>";
?>

I also noticed that you have this code: (I removed it since you dont have a begining head tag and body tag). I have re arranged your code for you.... It should work now.. Hope it helps...

echo "</div>\n</form>\n</body>\n</html>";
 
echo "</td></tr></table>";
}
?>
</body>
</html>
Edited by dashawk because: n/a
Member Avatar for staticwave

Hi staticwave,

This looks more like a CSS problem than PHP.

Check your stylesheet, in particular the widths and padding of your table, tr, td and label elements, and your 'field' class. Are you trying to fit two 55% widths into a 100% space? This would cause some of the form fields to be pushed down.

Thanks for the suggestion. I got so focused on the php that I didn't think to look back at my stylesheet. That fixed the problem!

Member Avatar for staticwave


I also noticed that you have this code: (I removed it since you dont have a begining head tag and body tag). I have re arranged your code for you.... It should work now.. Hope it helps...

echo "</div>\n</form>\n</body>\n</html>";
 
echo "</td></tr></table>";
}
?>
</body>
</html>

Thanks for the revision. Can you explain to me the difference when using the WHILE statement? The code functioned without it, so I'm curios what the benefit of adding that is. Sorry if that's a lame question, but I don't know much php.

Also, I actually did have the <html> and <body> tags, but I was wondering if the <body> tag is necessary in this application.

Thanks again for the help.

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.