Question

我有一个单页网站。每个菜单项都会滚动到页面的不同部分。我有一个HTML和PHP表单，它重新加载页面并显示一个错误消息，如果提交表单时未填写必填字段。问题是它重新加载到页面顶部，而我的表单位于页面的底部。

如何让表单将页面重新加载到联系表单所在的部分？当表单成功提交时，表单已经完全正确，但是当出现错误时表单已经完成。

任何帮助都会很棒。谢谢你的阅读。

HTML

<div id="contactBox">

            <form name="contact" id="contactForm" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                <div id="formLeft">
                    <p>
                        <label for="name">Name</label>
                        <?php if ($missing && in_array('name', $missing)) { ?>
                        <div class="warningDivLeft">
                        <span class="warning">Please enter your name</span>
                        </div>                             
                        <?php } ?>
                        <input type="text" name="name" id="name" tabindex="10"
                        <?php
                        if ($errors || $missing) {
                            echo 'value="' . htmlentities($name, ENT_COMPAT, 'utf-8') . '"';
                        }
                        ?>      
                        >
                    </p>
                    <p>                           
                        <label for="company">Company Name/Website</label>
                        <input type="text" name="company" id="company" tabindex="30"
                        <?php
                        if ($errors || $missing) {
                            echo 'value="' . htmlentities($company, ENT_COMPAT, 'utf-8') . '"';
                        }
                        ?>      
                        >
                    </p>
                    <p>                           
                        <label for="email">Email</label>
                        <?php if ($missing && in_array('email', $missing)) { ?>
                        <div class="warningDivLeft">
                        <span class="warning">Please enter your email</span>
                        </div>
                        <?php } elseif (isset($errors['email'])) { ?>
                        <div class="warningDivLeft">
                        <span class="warning">Invalid email address</span>
                        </div>
                        <?php } ?>
                        <input type="email" name="email" id="email" tabindex="40"
                        <?php
                        if ($errors || $missing) {
                            echo 'value="' . htmlentities($email, ENT_COMPAT, 'utf-8') . '"';
                        }
                        ?>      
                        >
                    </p>
                    <p>                           
                        <label for="phone">Phone</label>
                        <input type="text" name="phone" id="phone" tabindex="50"
                        <?php
                        if ($errors || $missing) {
                            echo 'value="' . htmlentities($phone, ENT_COMPAT, 'utf-8') . '"';
                        }
                        ?>      
                        >
                    </p>
                    <p>                           
                        <label for="contactYou">Contact you by...</label>
                        <?php if ($missing && in_array('contactYou', $missing)) { ?>
                        <div class="warningDivLeft">
                        <span class="warning">Please select one</span>
                        </div>
                        <?php } ?>
                        <select name="contactYou" size="1" id="contactYou" tabindex="60">
                            <option value="" selected="selected">- select</option>
                            <option value="email" <?php echo ($contactYou == 'email') ? ' selected="selected"' : ''; ?>>Email</option>
                            <option value="phone" <?php echo ($contactYou == 'phone') ? ' selected="selected"' : ''; ?>>Phone</option>
                        </select>
                    </p> 
                </div>
                <div id="formRight">
                    <p>
                        <label for="interest">I am interested in...</label>
                        <?php if ($missing && in_array('interest', $missing)) { ?>
                        <div class="warningDiv">
                        <span class="warning">Please select one</span>
                        </div>
                        <?php } ?>
                        <select name="interest" size="1" id="interest" tabindex="80">
                            <option value="" selected="selected">- select</option>
                            <option value="new" <?php echo ($interest == 'new') ? ' selected="selected"' : ''; ?>>Creating a new website</option>
                            <option value="current" <?php echo ($interest == 'current') ? ' selected="selected"' : ''; ?>>Redesigning a current website</option>
                            <option value="responsive" <?php echo ($interest == 'responsive') ? ' selected="selected"' : ''; ?>>Reponsive web design</option>
                            <option value="wordpress" <?php echo ($interest == 'wordpress') ? ' selected="selected"' : ''; ?>>A WordPress website</option>
                            <option value="general" <?php echo ($interest == 'general') ? ' selected="selected"' : ''; ?>>General enquiry</option>
                        </select>
                    </p>
                    <p>
                        <label for="budget">My budget is...</label>
                        <?php if ($missing && in_array('budget', $missing)) { ?>
                        <div class="warningDiv">
                        <span class="warning">Please select one</span>
                        </div>
                        <?php } ?>
                        <select name="budget" size="1" id="budget" tabindex="90">
                            <option value="" selected="selected">- select</option>
                            <option value="100" <?php echo ($budget == '100') ? ' selected="selected"' : ''; ?>>€100 - €500</option>
                            <option value="500" <?php echo ($budget == '500') ? ' selected="selected"' : ''; ?>>€500 - €1,000</option>
                            <option value="1000" <?php echo ($budget == '1000') ? ' selected="selected"' : ''; ?>>€1,000 - €2,000</option>
                            <option value="2000" <?php echo ($budget == '2000') ? ' selected="selected"' : ''; ?>>€2,000 - €5,000</option>
                            <option value="5000" <?php echo ($budget == '5000') ? ' selected="selected"' : ''; ?>>€5,000 - €10,000</option>
                            <option value="10000" <?php echo ($budget == '10000') ? ' selected="selected"' : ''; ?>>€10,000+</option>
                        </select>
                    </p>
                    <p>
                        <label for="comments">How can I help you?</label>
                        <?php if ($missing && in_array('comments', $missing)) { ?>
                        <div class="warningDiv">
                        <span class="warning">Please leave a comment</span>
                        </div>
                        <?php } ?>
                        <textarea name="comments" id="comments" cols="45" rows="5" tabindex="100"><?php
                        if ($errors || $missing) {
                            echo htmlentities($comments, ENT_COMPAT, 'utf-8');
                        }
                        ?></textarea>
                    </p>
                </div>
                <div id="formSubmit">
                    <ul>
                        <li>
                          <input type="submit" name="submit" id="submit" value="Send Message" tabindex="70">
                        </li>
                    </ul>
                </div>
                    </form>

PHP

<?php
$errors = array();
$missing = array();
if (isset($_POST['submit'])) {
    $to = 'celinehalpin@hotmail.com';
    $subject = 'Web Design';
    $expected = array('name', 'company', 'email', 'phone', 'contactYou', 'interest', 'budget', 'comments');
    $required = array('name', 'email', 'contactYou', 'interest', 'budget', 'comments');
    $headers = "From: webmaster@example.com\r\n";
    $headers .= "Content-type: text/plain; charset=utf-8";
    $authenticate = '-fcelinehalpin@hotmail.com';
    require './_includes/mail_process.php';
    if ($mailSent) {
        header('Location: ' . $_SERVER['REQUEST_URI'] . '?success=1#c');
        exit;   
    }
}
?>


<?php if (($_POST && $suspect) || ($_POST && isset($errors['mailfail']))) { ?>
        <div class="globalWarning">
        <p class="warning">Sorry your mail could not be sent</p>
        </div>
<?php } elseif ($errors || $missing) { ?>
        <div class="globalWarning">
        <p class="warning">Please fix the item(s) indicated</p>
        </div>
<?php } elseif (isset($_GET['success'])) { ?>
        <div class="globalAlert">
        <p class="warning">Thank you! Your message has been sent!</p>
        </div>
<?php } ?>

<?php
$suspect = false;
$pattern = '/Content-Type:|Bcc:|Cc:/i';

function isSuspect($val, $pattern, &$suspect) {
    if (is_array($val)) {
        foreach ($val as $item) {
            isSuspect($item, $pattern, $suspect);   
        }
    } else {
        if (preg_match($pattern, $val)) {
            $suspect = true;    
        }
    }
}

isSuspect($_POST, $pattern, $suspect);

if (!$suspect) {
    foreach ($_POST as $key => $value) {
        $temp = is_array($value) ? $value : trim($value);
        if (empty($temp) && in_array($key, $required)) {
            $missing[] = $key;
            $$key = '';
        } elseif(in_array($key, $expected)) {
            $$key = $temp;
        }
    }
}

if (!$suspect && !empty($email)) {
    $validemail = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
    if ($validemail) {
        $headers .= "\r\nReply-to: $validemail";
    } else {
        $errors['email'] = true;
    }
}

if (!$suspect && !$missing && !$errors) {
    $message = '';
    foreach ($expected as $item) {
        if (isset($$item) && !empty($$item)) {
            $val = $$item;
        } else {
            $val = 'Not selected';
        }
        if (is_array($val)) {
            $val = implode(', ', $val); 
        }
        $item = str_replace(array('_', '-'), ' ', $item);
        $message .= ucfirst($item) . ": $val\r\n\r\n";
    }
    $message = wordwrap($message, 70);

    $mailSent = mail($to, $subject, $message, $headers, $authenticate);
    if (!$mailSent) {
        $errors['mailfail'] = true;
    }
}

Answer 1

听起来你需要的是一些Javascript来进行滚动。我不知道你是否使用jQuery，但它使这相当容易。这个Stack Overflow link描述了许多方法，例如：

$.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
}

并将其称为：

$('#your-form').scrollView();

除此之外，您可能还需要考虑在提交表单之前是否可以进行任何输入验证。查看HTML5的input patterns和required fields

Answer 2

我会在你的错误php中加入一些javascript，以便在加载时运行javascript，从而根据表单ID滚动到正确的位置

DEMO http://jsfiddle.net/RbxVJ/2/

$(function() {
    $(document).scrollTop( $("#header").offset().top );  
});

实际上我会使用纯javascript，因为此时你可能没有调用jQuery库

<强> EDITED

你的PHP

DEMO http://jsfiddle.net/RbxVJ/430/

    <?php
    if(!isset($_GET['success'])) 
    {
        ?>
        <script>
        window.location.hash = '#your-form-ID';
        </script>
        <?php
    }
    ?>

Answer 3

如果您打算使用JavaScript来解决问题，除了PHP之外，您还可以使用它来验证表单。它更快（避免使用PHP进行必要的刷新），除了成功提交之外，您不应该以任何方式重新加载表单。

编写一个在按下提交按钮时执行的函数，该按钮收集所需的字段，检查它们是否有适当的值，如果缺少任何表单，则停止表单提交，然后使用提醒文本改变HTML旁边的那些“破坏了规则'原样。

Answer 4

     $(document).ready(function(){
        $('#contactBox a[href="' + window.location.hash + '"]').click();
     });

Answer 5

我遇到了类似的问题。当提交当前页面上的表单时，我将重新加载当前页面。我的表单位于页面底部，但是当页面重新加载时，页面将再次滚动到最顶层。使用;

重新加载当前页面

<form action="">

因此，如果我的表单在我的index.html页面上，则与;

相同

<form action="index.html">

为了解决滚动问题，我给了表单元素一个id，然后在'action'属性值中引用了这个id，就像这样;

<form id="contact-form" action="#contact-form">

如果表单在我的index.html页面上，则再次与;

相同

<form id="contact-form" action="index.html#contact-form">

如果您不知道，当您将元素ID附加到网页网址的末尾时，它会加载该网页并直接滚动到该元素。

如果对此方法有任何疑虑，请点击。

当表单返回错误时，如何返回页面的某个部分

5 个答案: