PHP in Contact Form Not Displaying Correctly

My question is related to this previous one.  Ray gave me excellent help in that one.  

You can view my website here

The contact page is where the PHP is messed up.

I was able to get the PHP form to display correctly in the example.  However, the difference now is that I have my PHP code in a separate file.  I reference the location of the PHP file in the action attribute of the form element like this.
2015-07-01--11-58-24.jpg
Here's my file structure.  I think I have it called out correctly.
2015-07-01--12-31-40.jpg2015-07-01--12-31-57.jpg
The file FormControl.php is attached.

Any ideas why this is not displaying correctly?

Thanks,
Kyle
FormControl.php
LVL 12
kgerbChief EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Marco GasiFreelancerCommented:
What is 'block'?

$dispName = 'block';
....
$dispEmail = 'block';
....

It looks like all your filters give false but we should see how you display the form.
0
kgerbChief EngineerAuthor Commented:
Marco,
At the beginning of the PHP file I set all the $disp variables to equal to 'none'.  This (should) set the display property of the HTML elements to 'none' so they are not shown and the space they occupy on the screen is not recognized.  

Once the submit button is clicked I run some checks in the PHP based on the values of the form elements.  If the user did not input something into the form elements I set that specific $disp variable to 'block'.  This (should) set the display property of the HTML element to 'block' so now it's visible on the screen and the space occupied by the element is recognized (i.e. the other elements are pushed down).  

That's how it's "supposed" to work.  And it was working correctly when the PHP code and the HTML were in the same file.  But, now, obviously I'm missing something.

Kyle
0
Marco GasiFreelancerCommented:
Okay, that's clear: thanks for explaining. It's not so easy identify the logic of a script. But I would like to see how the html is produced, that is the echoes which, when display is set to 'block', show the form element. Because there's no reason why if the code is moved to another file it stops to work, unless during the editing operations you have inadvertently changed something crucial... and this something has to be in the echoes...
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

kgerbChief EngineerAuthor Commented:
Marco,
I'm brand new to PHP and I do not fully understand the Echo statement.  I mean, I know it can be used to print text to the screen, but I'm not sure how to extend that concept when it comes to other HTML elements.  

And while we're on the subject of things I don't understand (which is just about everything) here's something else.  I do not understand the programmatic flow.  When does the browser read the HTML versus the PHP?  If I define a variable in the PHP and use it in the HTML then the PHP has to be read first to initialize the variable right?  But if it reads the PHP file first there is stuff in there referencing the HTML.  For example, the POST array will not be initialized without getting the information from the HTML.  Obviously I'm way messed up here.

Here's the HTML for the form elements.  This is not the whole index.html file.  If you want more just let me know.
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
        <h1 class="page-header text-center">Contact Form Example</h1>
        <form class="form-horizontal" role="form" method="post" action="PHP/FormControl.php">
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name">
                    <?php echo "<p class='text-danger' style='display: $dispName'>The name field cannot be empty</p>";?>
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com">
                    <?php echo "<p class='text-danger' style='display: $dispEmail'>This is not a valid email address</p>";?>
                </div>
            </div>
            <div class="form-group">
                <label for="message" class="col-sm-2 control-label">Message</label>
                <div class="col-sm-10">
                    <textarea class="form-control" rows="4" name="message" placeholder="Enter your message here"></textarea>
                    <?php echo "<p class='text-danger' style='display: $dispMessage'>What would you like to say?</p>";?>
                </div>
            </div>
            <div class="form-group">
                <label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
                    <?php echo "<p class='text-danger' style='display: $dispHuman'>The answer is not correct</p>";?>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                    <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                    <?php echo "<div class='alert alert-success' style='display: $dispSuccess'>Thank You! I will be in touch</div>";?>
                    <?php echo "<div class='alert alert-danger' style='display: $dispFailure'>Sorry there was an error sending your message. Please try again later.</div>";?>
                </div>
            </div>
        </form>
    </div>
</div>

Open in new window

0
Marco GasiFreelancerCommented:
The code looks absolutely correct: maybe we nedd to wxplore the whole index.html.

About Php and html: php is a server language and its function is to prepare data, the content of the web page; it can also produce the markup, that is the html and print it out to the browser.
The html is just the markup which the browser look at to know how format the data and show them to the user.
In you page you have some markup lat's call 'hard coded' and some markup produced by php:

Hardcoded:
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name">

Open in new window


Dynamic:
<?php echo "<p class='text-danger' style='display: $dispName'>The name field cannot be empty</p>";?>

Open in new window

Why this is dynamic? Because its content can change depending on the value of a variable which is evaluated on the server-side by Php.

The echo statement tell's php to write something, that is to send to the browser some byte which will be displayed on the screen; the browser never read php code: it just reads the result produced by php. So Php get some data which is sent through a form, evaluates it, processes it and then producesan output and sends this output to the browser. Usually, this output is wrapped in some html markup to be displayed to the user accordingly to some predetermined style. So the flow is:

1 - The browser sends data to the server (html, xhtml, xml, Javascipt through Ajax calls...)
2 - The server processes the data (Php or Asp) and return an output
3 - The browser reads the output and builds the page displayed to the user

Hope this is clear. I can suggest you a wonderful book? http://www.sitepoint.com/books/phpmysql5/
0
kgerbChief EngineerAuthor Commented:
Marco,
Thanks for the explanation.  Makes a little more sense now.  I need to re-read a few more times but I'm beginning to understand (sort of).

I've attached four files

1.  My HTML file (index.html)
2.  My PHP file (FormControl.php)
3.  My CSS file (StyleMain.css)
4.  My JavaScript file (JSMain.js)

Except for the pictures, this essentially my whole website.

Thanks for the help.  Let me know if you need anything else.
Kyle
Index.html
FormControl.php
StyleMain.css
JSMain.js
0
Marco GasiFreelancerCommented:
Mmmhh, in my local server I don't get wrong display (nor semicolon nor ?>) but just notices about undefined variable $disp---
resultIf I click Send button I get a white page where the only word is... block!
0
Marco GasiFreelancerCommented:
In order to get it to work, you should redirect the script to the page and do some adjustment.
My suggetion is to come back to the previous version (php code embedded in the same index.html)
Otherwise, you should do a step on and go to Ajax, but this would require to modify Php script and to use Javascript not just for animation but to perform server calls.
I guess you're a novice with php, so this could be a bit too and it would risk to be confusing. One step per time is the best way to learn, if you have the time to do it.

I don't know about your project, but maybe you can go on with the old code and start a new testing project to learn about Ajax and Php together...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kgerbChief EngineerAuthor Commented:
Marco,
I was having issues with the bootstrap CDN so I just linked to it locally.  If you reference this file it will fix some of the formatting.  You'll have to change the href on line 13 of the index.html file.

When I run the file from my localhost I get the same thing as from the web server.
Contact form on local host
I Don't know what's happening.
Kyle
bootstrap.css
0
kgerbChief EngineerAuthor Commented:
Sorry, posted before I read you're last comment.  Let me read it and I'll get back to you.
0
kgerbChief EngineerAuthor Commented:
Well, it took me a while but I finally got it to display correctly.  And I learned several things in the process.

1.  When you run things on a local server it doesn't like spaces in the file path
2.  When you embed PHP in the same file as the HTML you need to change the file extension from .html to .php

Man...being a rookie is brutal.

Thanks very much for the help Marco.

Kyle
0
Marco GasiFreelancerCommented:
When you run things on a local server it doesn't like spaces in the file path
I always avoid spaces in files path, file names and so on. I use a Windows machine locally, but I always choose Linux server for my websites, so to avoid problems I always use lowercase and underscore for my file names. But this depends on the OS which runs your server: Windows is case insensitive and accepts spaces but to be sure your site will work in every server and OS it's better to avoid to use conventions which prevent the code to work in other servers: lowercase names and underscores will work everywhere.

When you embed PHP in the same file as the HTML you need to change the file extension from .html to .php
Not necesarily: if you're using Apache as web server you can create an .htaccess file in the root of your website and write this within this file:

AddType application/x-httpd-php .html .htm

Open in new window

Be sure the file name start with a dot: .htaccess
For IIS you should find tips in the web.

Thanks for points and good luck with your project :-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.