提交表单时停留在页面的特定部分 Javascript

Question

我试图在用户按下按钮表单提交时实现这一点，然后当页面重新加载时，用户需要留在该页面上。

我有工人/买家表单，所以当用户是买家并填写字段并提交表单时，它需要在页面重新加载时留在该表单上。

这是一个代码：

 const switchers = [...document.querySelectorAll('.switcher')] switchers.forEach(item => { item.addEventListener('click', function() { switchers.forEach(item => item.parentElement.classList.remove('is-active')) this.parentElement.classList.add('is-active') }) })

 *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: Roboto, -apple-system, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif; background: #3b4465; }.forms-section { display: flex; flex-direction: column; justify-content: center; align-items: center; }.section-title { font-size: 32px; letter-spacing: 1px; color: #fff; }.forms { display: flex; align-items: flex-start; margin-top: 30px; }.form-wrapper { animation: hideLayer.3s ease-out forwards; }.form-wrapper.is-active { animation: showLayer.3s ease-in forwards; } @keyframes showLayer { 50% { z-index: 1; } 100% { z-index: 1; } } @keyframes hideLayer { 0% { z-index: 1; } 49.999% { z-index: 1; } }.switcher { position: relative; cursor: pointer; display: block; margin-right: auto; margin-left: auto; padding: 0; text-transform: uppercase; font-family: inherit; font-size: 16px; letter-spacing: .5px; color: #999; background-color: transparent; border: none; outline: none; transform: translateX(0); transition: all.3s ease-out; }.form-wrapper.is-active.switcher-login { color: #fff; transform: translateX(90px); }.form-wrapper.is-active.switcher-signup { color: #fff; transform: translateX(-90px); }.underline { position: absolute; bottom: -5px; left: 0; overflow: hidden; pointer-events: none; width: 100%; height: 2px; }.underline::before { content: ''; position: absolute; top: 0; left: inherit; display: block; width: inherit; height: inherit; background-color: currentColor; transition: transform.2s ease-out; }.switcher-login.underline::before { transform: translateX(101%); }.switcher-signup.underline::before { transform: translateX(-101%); }.form-wrapper.is-active.underline::before { transform: translateX(0); }.form { overflow: hidden; min-width: 260px; margin-top: 50px; padding: 30px 25px; border-radius: 5px; transform-origin: top; }.form-login { animation: hideLogin.3s ease-out forwards; }.form-wrapper.is-active.form-login { animation: showLogin.3s ease-in forwards; } @keyframes showLogin { 0% { background: #d7e7f1; transform: translate(40%, 10px); } 50% { transform: translate(0, 0); } 100% { background-color: #fff; transform: translate(35%, -20px); } } @keyframes hideLogin { 0% { background-color: #fff; transform: translate(35%, -20px); } 50% { transform: translate(0, 0); } 100% { background: #d7e7f1; transform: translate(40%, 10px); } }.form-signup { animation: hideSignup.3s ease-out forwards; }.form-wrapper.is-active.form-signup { animation: showSignup.3s ease-in forwards; } @keyframes showSignup { 0% { background: #d7e7f1; transform: translate(-40%, 10px) scaleY(.8); } 50% { transform: translate(0, 0) scaleY(.8); } 100% { background-color: #fff; transform: translate(-35%, -20px) scaleY(1); } } @keyframes hideSignup { 0% { background-color: #fff; transform: translate(-35%, -20px) scaleY(1); } 50% { transform: translate(0, 0) scaleY(.8); } 100% { background: #d7e7f1; transform: translate(-40%, 10px) scaleY(.8); } }.form fieldset { position: relative; opacity: 0; margin: 0; padding: 0; border: 0; transition: all.3s ease-out; }.form-login fieldset { transform: translateX(-50%); }.form-signup fieldset { transform: translateX(50%); }.form-wrapper.is-active fieldset { opacity: 1; transform: translateX(0); transition: opacity.4s ease-in, transform.35s ease-in; }.form legend { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); }.input-block { margin-bottom: 20px; }.input-block label { font-size: 14px; color: #a1b4b4; }.input-block input { display: block; width: 100%; margin-top: 8px; padding-right: 15px; padding-left: 15px; font-size: 16px; line-height: 40px; color: #3b4465; background: #eef9fe; border: 1px solid #cddbef; border-radius: 2px; }.form [type='submit'] { opacity: 0; display: block; min-width: 120px; margin: 30px auto 10px; font-size: 18px; line-height: 40px; border-radius: 25px; border: none; transition: all.3s ease-out; }.form-wrapper.is-active.form [type='submit'] { opacity: 1; transform: translateX(0); transition: all.4s ease-in; }.btn-login { color: #fbfdff; background: #a7e245; transform: translateX(-30%); }.btn-signup { color: #a7e245; background: #fbfdff; box-shadow: inset 0 0 0 2px #a7e245; transform: translateX(30%); }

 <section class="forms-section"> <div class="forms"> <div class="form-wrapper is-active"> <button type="button" class="switcher switcher-login"> Worker <span class="underline"></span> </button> <form class="form form-login"> <fieldset> <legend>Please, enter your email and password for login.</legend> <div class="input-block"> <label for="login-email">E-mail</label> <input id="login-email" type="email" required> </div> <div class="input-block"> <label for="login-password">Password</label> <input id="login-password" type="password" required> </div> </fieldset> <button type="submit" class="btn-login">Login</button> </form> </div> <div class="form-wrapper"> <button type="button" class="switcher switcher-signup"> Buyer <span class="underline"></span> </button> <form class="form form-signup"> <fieldset> <legend>Please, enter your email, password and password confirmation for sign up.</legend> <div class="input-block"> <label for="signup-email">E-mail</label> <input id="signup-email" type="email" required> </div> <div class="input-block"> <label for="signup-password">Password</label> <input id="signup-password" type="password" required> </div> <div class="input-block"> <label for="signup-password-confirm">Confirm password</label> <input id="signup-password-confirm" type="password" required> </div> </fieldset> <button type="submit" class="btn-signup">Continue</button> </form> </div> </div> </section>

有人可以帮我解决这个问题吗？

Answer 1

尝试这个。 在 div 上添加了 id，在提交按钮上添加了值。

<?php  
if (isset($_POST['form1'])) {
echo '<script type="text/javascript">
  var element = document.getElementById("form1");
  element.classList.add("is-active");
          </script>';
} ?>
<?php  
if (isset($_POST['form2'])) {
echo '<script type="text/javascript">
  var element = document.getElementById("form2");
  element.classList.add("is-active");
          </script>';
} ?>

 const switchers = [...document.querySelectorAll('.switcher')] switchers.forEach(item => { item.addEventListener('click', function() { switchers.forEach(item => item.parentElement.classList.remove('is-active')) this.parentElement.classList.add('is-active') }) })

 *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: Roboto, -apple-system, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif; background: #3b4465; }.forms-section { display: flex; flex-direction: column; justify-content: center; align-items: center; }.section-title { font-size: 32px; letter-spacing: 1px; color: #fff; }.forms { display: flex; align-items: flex-start; margin-top: 30px; }.form-wrapper { animation: hideLayer.3s ease-out forwards; }.form-wrapper.is-active { animation: showLayer.3s ease-in forwards; } @keyframes showLayer { 50% { z-index: 1; } 100% { z-index: 1; } } @keyframes hideLayer { 0% { z-index: 1; } 49.999% { z-index: 1; } }.switcher { position: relative; cursor: pointer; display: block; margin-right: auto; margin-left: auto; padding: 0; text-transform: uppercase; font-family: inherit; font-size: 16px; letter-spacing: .5px; color: #999; background-color: transparent; border: none; outline: none; transform: translateX(0); transition: all.3s ease-out; }.form-wrapper.is-active.switcher-login { color: #fff; transform: translateX(90px); }.form-wrapper.is-active.switcher-signup { color: #fff; transform: translateX(-90px); }.underline { position: absolute; bottom: -5px; left: 0; overflow: hidden; pointer-events: none; width: 100%; height: 2px; }.underline::before { content: ''; position: absolute; top: 0; left: inherit; display: block; width: inherit; height: inherit; background-color: currentColor; transition: transform.2s ease-out; }.switcher-login.underline::before { transform: translateX(101%); }.switcher-signup.underline::before { transform: translateX(-101%); }.form-wrapper.is-active.underline::before { transform: translateX(0); }.form { overflow: hidden; min-width: 260px; margin-top: 50px; padding: 30px 25px; border-radius: 5px; transform-origin: top; }.form-login { animation: hideLogin.3s ease-out forwards; }.form-wrapper.is-active.form-login { animation: showLogin.3s ease-in forwards; } @keyframes showLogin { 0% { background: #d7e7f1; transform: translate(40%, 10px); } 50% { transform: translate(0, 0); } 100% { background-color: #fff; transform: translate(35%, -20px); } } @keyframes hideLogin { 0% { background-color: #fff; transform: translate(35%, -20px); } 50% { transform: translate(0, 0); } 100% { background: #d7e7f1; transform: translate(40%, 10px); } }.form-signup { animation: hideSignup.3s ease-out forwards; }.form-wrapper.is-active.form-signup { animation: showSignup.3s ease-in forwards; } @keyframes showSignup { 0% { background: #d7e7f1; transform: translate(-40%, 10px) scaleY(.8); } 50% { transform: translate(0, 0) scaleY(.8); } 100% { background-color: #fff; transform: translate(-35%, -20px) scaleY(1); } } @keyframes hideSignup { 0% { background-color: #fff; transform: translate(-35%, -20px) scaleY(1); } 50% { transform: translate(0, 0) scaleY(.8); } 100% { background: #d7e7f1; transform: translate(-40%, 10px) scaleY(.8); } }.form fieldset { position: relative; opacity: 0; margin: 0; padding: 0; border: 0; transition: all.3s ease-out; }.form-login fieldset { transform: translateX(-50%); }.form-signup fieldset { transform: translateX(50%); }.form-wrapper.is-active fieldset { opacity: 1; transform: translateX(0); transition: opacity.4s ease-in, transform.35s ease-in; }.form legend { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); }.input-block { margin-bottom: 20px; }.input-block label { font-size: 14px; color: #a1b4b4; }.input-block input { display: block; width: 100%; margin-top: 8px; padding-right: 15px; padding-left: 15px; font-size: 16px; line-height: 40px; color: #3b4465; background: #eef9fe; border: 1px solid #cddbef; border-radius: 2px; }.form [type='submit'] { opacity: 0; display: block; min-width: 120px; margin: 30px auto 10px; font-size: 18px; line-height: 40px; border-radius: 25px; border: none; transition: all.3s ease-out; }.form-wrapper.is-active.form [type='submit'] { opacity: 1; transform: translateX(0); transition: all.4s ease-in; }.btn-login { color: #fbfdff; background: #a7e245; transform: translateX(-30%); }.btn-signup { color: #a7e245; background: #fbfdff; box-shadow: inset 0 0 0 2px #a7e245; transform: translateX(30%); }

 <section class="forms-section"> <div class="forms"> <div class="form-wrapper is-active" id="form1"> <button type="button" class="switcher switcher-login"> Worker <span class="underline"></span> </button> <form class="form form-login"> <fieldset> <legend>Please, enter your email and password for login.</legend> <div class="input-block"> <label for="login-email">E-mail</label> <input id="login-email" type="email" required> </div> <div class="input-block"> <label for="login-password">Password</label> <input id="login-password" type="password" required> </div> </fieldset> <button type="submit" class="btn-login" value="form1">Login</button> </form> </div> <div class="form-wrapper" id="form2"> <button type="button" class="switcher switcher-signup"> Buyer <span class="underline"></span> </button> <form class="form form-signup"> <fieldset> <legend>Please, enter your email, password and password confirmation for sign up.</legend> <div class="input-block"> <label for="signup-email">E-mail</label> <input id="signup-email" type="email" required> </div> <div class="input-block"> <label for="signup-password">Password</label> <input id="signup-password" type="password" required> </div> <div class="input-block"> <label for="signup-password-confirm">Confirm password</label> <input id="signup-password-confirm" type="password" required> </div> </fieldset> <button type="submit" class="btn-signup" value="form2">Continue</button> </form> </div> </div> <?php if (isset($_POST['form1'])) { echo '<script type="text/javascript"> var element = document.getElementById("form1"); element.classList.add("is-active"); </script>'; }?> <?php if (isset($_POST['form2'])) { echo '<script type="text/javascript"> var element = document.getElementById("form2"); element.classList.add("is-active"); </script>'; }?> </section>

你也可以摆脱这个：

    <?php  
    if (isset($_POST['form2'])) {
    echo '<script type="text/javascript">
      var element = document.getElementById("form2");
      element.classList.add("is-active");
              </script>';
    }else{
    echo '<script type="text/javascript">
      var element = document.getElementById("form1");
      element.classList.add("is-active");
              </script>';
    }
 ?>

Answer 2

这都是关于服务器的响应
当你提交一个表单时，一个 POST 请求被发送到服务器并且服务器决定返回什么
它可以不发送任何内容，也可以发送要呈现的页面或重定向到的路由

当您使用这样的提交按钮提交表单时

<form method="POST" action="/login">
   <input name="email"/>
   <input name="password"/>
   <button type="submit">Send</button>
</form>

响应将被自动处理，无论它是重定向到另一个页面或要呈现的页面或其他任何内容

因此，在您的情况下，有两种解决方案：

1. 从前端
您可以使用 AJAX 提交表单（我更喜欢使用 JQuery，因为它太容易了）

<form method="POST" action="/login">
    <input name="email" id="email_input" />
    <input name="password" id="password_input" />
</form>
<button id="myBtn">Send</button>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $("#myBtn").on("click", function () {
        // Getting data from form
        var email_value = $("#email_input").val()
        var password_value = $("#password_input").val()
        console.log(email_value)
        // Sending the POST request
        $.ajax({
            type: "POST",
            url: '/login',
            data: {
                email: email_value,
                password: password_value
            },
            success: function (response) {
                alert("Form submitted correctly \n see response in the console")
                console.log(response)
            },
        });

    }
    )
</script>

2.从服务器端
您可以重新设置来自后端的响应以仅发送一条消息，告诉您“没有出错”或“发生错误”
而不是重定向响应或呈现响应

Answer 3

有2种策略，

1) 使用 Ajax 提交，然后页面完全没有变化。 $.ajax(..) -> https://api.jquery.com/jquery.ajax/

2) 使用普通的Form-Submit 提交。 页面将刷新，但您可以从服务器端发送一个标志（例如，向 URL 添加一个令牌），然后在客户端的$(document).ready()中读取它。 如果您有该令牌，则使用 JavaScript 酌情滚动页面。

https://learn.jquery.com/using-jquery-core/document-ready/

// On page startup
$( document ).ready(function() {
    // .. check URL for some token
    if (window.location.href.indexOf("someToken") > -1) {
       // token exists, scroll
       document.querySelector('yourElement').scrollIntoView({ behavior: 'smooth' })
    }
});

在客户端滚动到元素： jQuery 滚动到元素

但是 Ajax (#1) 是更好的选择。