如何使用PHP显示/隐藏元素以及如何将用户发送到另一个页面

Question

I'm in the middle of sorting out the PHP for my contact form. What I'm trying to do is have an error message appear if the form isn't filled out. I have a div in my html with the error I want to show.

I know I can use 'echo' to display a message but I want it positioned exactly where I want it. I have seen a way of doing this, but it involves putting all the php code within the html file...and then renaming the file .php. I want to keep the bulk of the php code separate to the html.

Here is my code:

HTML:

<div class="error">
    <p>
        Please fill out all fields.
    </p>
</div>
<form id="contactForm" action="contact.php" method="post">
    <div>
        <input type="text" name="name" id="name" placeholder="Your Name" maxlength="65" tabindex="1"> <label for="name">Name</label> 
    </div>
    <div>
        <input type="email" name="_replyto" id="email" placeholder="Your Email" maxlength="30" tabindex="2"> <label for="email">Email</label> 
    </div>
    <div>
    <textarea name="message" id="message" rows="10" placeholder="Your Message..." maxlength="1000" tabindex="3"></textarea> <label for="message">Your Message</label> 
    </div>
    <div>
        <input type="submit" name="submit" value="Send" tabindex="4"> 
    </div>
</form>

PHP:

// Check for form submission:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    /* The function takes one argument: a string.
    * The function returns a clean version of the string.
    * The clean version may be either an empty string or
    * just the removal of all newline characters.
    */
    function spam_scrubber($value) {

        // List of very bad values:
        $very_bad = array('to:', 'cc:', 'bcc:', 'content-type:', 'mime-version:', 'multipart-mixed:', 'content-transfer-encoding:');

        // If any of the very bad strings are in 
        // the submitted value, return an empty string:
        foreach ($very_bad as $v) {
            if (stripos($value, $v) !== false) return '';
        }

        // Replace any newline characters with spaces:
        $value = str_replace(array( "", "
", "%0a", "%0d"), ' ', $value);

        // Return the value:
        return trim($value);

    } // End of spam_scrubber() function.

    // Clean the form data:
    $scrubbed = array_map('spam_scrubber', $_POST);

    // Minimal form validation:
    if (!empty($scrubbed['name']) && !empty($scrubbed['email']) && !empty($scrubbed['comments']) ) {

        // Create the body:
        $body = "Name: {$scrubbed['name']}

Comments: {$scrubbed['comments']}";

        // Send the email:
        mail('[e-mail]', 'Contact Form Submission', $body, "From: {$scrubbed['email']}");

        // Print a message:
        echo '<p><em>Thank you.</em></p>';

        // Clear $scrubbed (so that the form's not sticky):
        $scrubbed = array();

    } else {
        echo '<p style="font-weight: bold; color: #C00">Please fill out the form completely.</p>';
    }

} // End of main isset() IF

My php is in a file called contact.php and my html is in a file called contact.html.

I want to show the div with class error, if the form isn't complete.

I tried another way by adding this code to the html, replacing the current error div:

<span class="error">* <?php include 'contact.php'; echo $Err;?></span>

and this to the php file:

$Err = "Please fill out all fields";

It still didn't work. It's as if it can't read the code in the php file from the html file, even though I included it?

Another thing is, how would I go about sending the user to another html page once the form has been submitted? Is it done by replacing

// Print a message:
echo '<p><em>Thank you.</em></p>';

with

header('Location: nextpage.html');

Thanks for any help in advance.

Answer 1

You can think of using the javascript solution. first style the div to be display:none; then you can use:

document.getElementsByClassName('error')[0].style.display = "block";

when you wanna make it visible. Also JQuery Solution: (maybe incorrect, friends help plz!)

$('.error')[0].hide();
$('.error')[0].show();

You can also set speed/fade it using instructions here http://www.w3schools.com/jquery/jquery_hide_show.asp
Also for redirecting, yes you can replace them. Alternatively you can use JS solution too. replace

echo '<p><em>Thank you.</em></p>';

with:

echo '<p><em>Thank you.</em></p><script>location.replace("WHERE YOU WANNA GO!");</script>';

Hope this helps.