如何使表单提交按钮也重定向到页面中的特定 div?

2022-01-24 00:00:00 slider php javascript contact-form anchor

我正在做的网站是由一个全屏滑块组成的，有 4 个不同的面板.

The website i'm doing is made of a fullscreen slider, with 4 different panels.

第四个面板包含一个 php 联系表.当我提交表单时，它会从第一个滑块重新加载页面，因此用户无法看到第四个面板中的结果(发送的消息或任何错误)以及表单.

The fourth panel contains a php contact form. When I submit the form, it reloads the page from the first slider, so the user can't see the results (message sent, or any error) which are in the fourth panel, with the form.

有什么方法可以让提交按钮也重定向到包含表单的 div 吗?

Is there any way I can make the submit button also redirect to the div containing the form ?

这里是基本标记，使用了 php 脚本:

Here is the basic markup, with the php script used :

<div id="container">

<div id="div1">
<div class="content">...</div>
</div>

<div id="div2">
<div class="content">...</div>
</div>

<div id="div3">
<div class="content">...</div>
</div>

<div id="div4">
<div class="content">
                <form method="post" action="index.php">

                    <label>Nom</label>
                    <input class="small" name="name" placeholder="Name">

                    <label>Email</label>
                    <input class="small" name="email" type="email" placeholder="Email">

                    <label>Message</label>
                    <textarea class="small" name="message" placeholder="Message"></textarea>

                    <label>What's the best burger ever (antispam)</label>
                    <input class="small" name="human" placeholder="type the right answer">

                    <input id="submit" name="submit" type="submit" value="send">

                </form>

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $from = 'From: ...'; 
    $to = 'johndoe@gmail.com'; 
    $subject = 'New message';
    $human = $_POST['human'];

    $body = "From: $name
 E-Mail: $email
 Message:
 $message";

if ($_POST['submit']) {
    if ($name != '' && $email != '') {
        if ($human == 'bacon burger') {              
            if (mail ($to, $subject, $body, $from)) { 
            echo '<div class="alert green"><p>Message sent!</p></div>';
        } else { 
            echo '<div class="alert red"><p>An error occured. Go back and try again.</p></div>'; 
        } 
    } else if ($_POST['submit'] && $human != 'bacon burger') {
        echo '<div class="alert red"><p>You answered wrong to the antispam question.</p></div>';
    }
    } else {
        echo '<div class="alert red"><p>You have to fill in all fields !</p></div>';
    }
}
?>

</div>
</div>

</div>

推荐答案

尝试在action url中添加anchor id:

Try adding anchor id to action url:

<form method="post" action="index.php#div4">

相关文章