HTML Form with action.php looking for output to wrap

This site is best viewed in a modern browser with JavaScript enabled.

HTML Form with action.php looking for output to wrap

sparkymom78

Hi Folks,

I am trying to create an HTML form (job application) that will POST through an action.php. My output comes out looking ok except if my message (response to questions) is long it scrolls right off the page. I have tried putting "\r\n" or word-wrap but it doesn't matter. Anyone have an idea how I should do this? Or should I have it output to email?

Code attached below

Thanks

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Application</title>
<link href="css/style.css" rel="stylesheet" type="text/css">

</head>

<body>
   <div class="container">
   <div class="header">
    <!-- end .header -->
   </div>

   <div class="content">
    <h1 class="h1">Employment Application</h1>
    <p>Thanks for your interest in our company. Please fill out the form below and select Submit. 
       <span class="required">Fields with an asterisk (*) are required.</span> </p>
    <hr>

<form id="employeeApp" name="employeeApp" method="post" action="action2.php">    

   <fieldset>
       <legend>Contact Information</legend>

   <span class="required">*</span> 
     <label for="fname">First Name:</label>
     <input name="fname" type="text" id="name" size="30" maxlength="50">
<br />
   <span class="required">*</span> 
     <label for="lname">Last Name:</label>
     <input name="lname" type="text" id="name" size="30" maxlength="50">
<br />
   <span class="required">*</span> 
     <label for="address">Address:</label>
     <input name="address" type="text" id="name" size="30" maxlength="50">
<br />
   <span class="required">*</span>
     <label for="city">City:</label>
     <input name="city" type="text" id="name" size="30" maxlength="50">
<br />
   <span class="required">*</span>
     <label for="state">State:</label>
     <input name="state" type="text" id="name" size="5" maxlength="5">
<br />
   <span class="required">*</span>
     <label for="zip">Zip:</label>
     <input name="zip" type="text" id="name" size="9" maxlength="10">
<br />
   <span class="required">*</span>
     <label for="phone">Phone:</label>
     <input name="phone" type="text" id="name" size="15" maxlength="50">
<br />
   <span class="required">*</span>
     <label for="email">Email:</label>
     <input name="email" type="text" id="name" size="30" maxlength="50">

</fieldset>

<fieldset>
   <legend>Questions</legend>
<p>Question 1<br>
    <textarea name="message" cols="75" rows="4" class="content"></textarea>
</p>

<p>Question 2 <br>
    <textarea name="message2" cols="75" rows="4" class="content"></textarea>
</p>
<p>Question 3 <br>
    <textarea name="message3" cols="75" rows="4" class="content"></textarea>
</p>

<input type="submit" name="Submit" id="submit" value="Submit" />

</p>
</fieldset>
</form>

<!-- end .content --></div>
  <div class="footer">
    <p>Copyright &copy; 2013  </p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>


//default fields to be printed from the form

echo "<h2>Application Information</h2>";
echo "<h3>Contact Information</h3>";
echo "<strong>First Name: </strong> " . $_POST['fname']. "<br />"; 
echo "<strong>Last Name: </strong> " . $_POST['lname']. "<br />";
echo "<strong>Address: </strong> " . $_POST['address']. "<br />";
echo "<strong>City: </strong> " . $_POST['city']. "<br />";
echo "<strong>State: </strong> " . $_POST['state']. "<br />";
echo "<strong>Zip: </strong> " . $_POST['zip']. "<br />";
echo "<strong>Phone: </strong> " . $_POST['phone']. "<br />";
echo "<strong>Email: </strong> " . $_POST['email']. "<br />";

echo "<h3>Response to Questions</h3>";

echo "<strong>Question 1: </strong>" . $_POST["message"]."\r\n <br />";
echo "<strong>Question 2: </strong>" . $_POST["message2"]."\n <br />";
echo "<strong>Question 3: </strong>" . $_POST['message3']. " <br />";


 ?>

ginerjm

You used div tags quite freely (too!) in your input area. Why not use them for your output? Create an id in your css section and define the position and size(height/width) and then place your echo in a div with that id

<head>
<style type='text/css'>
#ans_box
{
   position:relative;
   float:left;
   margin-left:1%;
   width:40%;
   padding:10px;
   border:1px solid black;
}
</style>
</head>

And then in the body of your output page put:

<div id="ans_box">
echo "<strong>Question 1: </strong>" . $_POST["message"]."\r\n <br />"; 
echo "<strong>Question 2: </strong>" . $_POST["message2"]."\n <br />"; 
echo "<strong>Question 3: </strong>" . $_POST['message3']. " <br />"; 
</div>

Voila!

sparkymom78

I have attempted to follow the above in several different ways and keep getting Syntax error on the line that has <div id="ans_box">.

I have put the #ans_box into my css, added it to the action.php, etc. but nothing seems to work. Can someone help please? I have attached my latest code.

<HTML>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>FoodLogiQ Code Challenge responses</title>
<style type='text/css'>
#ans_box
{
position:relative;
float:left;
margin-left:1%;
width:40%;
padding:10px;
border:1px solid black;
}

</head>

<body>

<?php
//default fields to be printed from the FooodLogiQ form

echo "<h2>FoodLogiQ Employee Application Information</h2>";
echo "<h3>Contact Information</h3>";
echo "<strong>First Name: </strong> " . $POST['fname']. "<br />";
echo "<strong>Last Name: </strong> " . $POST['lname']. "<br />";
echo "<strong>Address: </strong> " . $POST['address']. "<br />";
echo "<strong>City: </strong> " . $POST['city']. "<br />";
echo "<strong>State: </strong> " . $POST['state']. "<br />";
echo "<strong>Zip: </strong> " . $POST['zip']. "<br />";
echo "<strong>Phone: </strong> " . $POST['phone']. "<br />";
echo "<strong>Email: </strong> " . $POST['email']. "<br />";

echo "<h3>Response to Questions</h3>";
<div id="ans_box">

echo "<strong>Question 1: </strong>" . $POST["message"]."\r\n <br />";
echo "<strong>Question 2: </strong>" . $POST["message2"]."\n <br />";
echo "<strong>Question 3: </strong>" . $_POST["message3"]. " <br />";

</div>

</body>
</div>
</html>
</HTML>

ginerjm

You need to learn how to write HTML, CSS and then learn PHP.

1 - you didn't close your <style> tag.
2 - Since you insist on mixing your html and php code, you have to be very careful about closing your php tags when you aren't writing php.

sparkymom78

I have seen the PHP code written several ways, one where it was by itself and two where it was included within HTML and three where CSS was included within the HTML & PHP. I was attempting to go with the first example you posted and it didn't work, it might have been clearer if you said to separate all of the codes.

<b>I was able to get the following code to work.</b>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>responses</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
#ans_box {
	position:relative;
	float:left;
	margin-left:10%;
	width:60%;
	padding:15px;
	background-color: #f0f2ed;
}
</style>
</head>

<body>

<?php
//default fields to be printed from the form
echo '<div id="ans_box">';
echo '<img src="images/header_logo.png" alt="logo" width="279" height="53" class="logo">';

echo "<h2>Employee Application Information</h2>";
echo "<h3>Contact Information</h3>";
echo "<strong>First Name: </strong> " . $_POST['fname']. "<br />"; 
echo "<strong>Last Name: </strong> " . $_POST['lname']. "<br />";
echo "<strong>Address: </strong> " . $_POST['address']. "<br />";
echo "<strong>City: </strong> " . $_POST['city']. "<br />";
echo "<strong>State: </strong> " . $_POST['state']. "<br />";
echo "<strong>Zip: </strong> " . $_POST['zip']. "<br />";
echo "<strong>Phone: </strong> " . $_POST['phone']. "<br />";
echo "<strong>Email: </strong> " . $_POST['email']. "<br /> <br />";

echo "<h3>Response to Questions</h3>";

echo  "<strong>Message 1: <br /> </strong>" . $_POST["message"]."<br /> <br />"; 
echo "<strong>Message 2: <br /></strong>" . $_POST["message2"]."<br /> <br />"; 
echo "<strong>Message 3: <br /></strong>" . $_POST["message3"]. "<br /> <br />"; 

echo '</div>';

 ?>

</body>
</div>
</html>

root

in HTML the \r\n is ignored, if you keep that in mind in the future that \r\n works in text files, <textarea> tags and rendered PHP in to HTML document body but not the HTML display body then you are on to a winner.

ginerjm

You cleaned up the errors that I pointed out and that's why it works. Good going!

My personal preference when coding is to setup my static html in a function and then build the dynamic parts of the page in php code portions of my overall script so that I'm not constantly concerned about tags on / tags off and quotes ad infinatum. Something like:

function DisplayPage()
{
.... html ....
....html ....
--- css block --- (<style))
--- js block --- (<script>)
<body>
(text headings)
(page layout stuff like div tags, etc)
$php_content_var
$another_content_var
...
...
</body>
</html>
}

A most excellent tool for setting the above up is to use the PHP 'heredocs' construct. Look it up. Makes coding your html SO EASY!

Once I have that setup, then I use my working portion of the php script to decide what needs to be accomplished, do that , and dump the results that I want to display into the $php... vars that I've set as placeholders in my html. Then I simply call the displaypage function and I'm done. I try and separate the layout from the content and therefore the html/css from the php as much as possible.