Stay on a specific part of the page when the form is submitted Javascript

Question

I am trying to achieve this when the user press the button form is submitted, and then when the page reloads, users need to stay on that page.

I have Worker/Buyer form so when the user is a buyer and fills the fields and submits the form it needs to stay on that form when the page reloads.

This is a code:

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>

Can somebody try to help me with this?

you can add an ?worker to the url and then read what is behind the ? in javascript, if its worker show worker, if not then the other one — Ramon de Vries, Jun 05 '20 at 12:10
Is this like you want your page to maintain scroll position after form submit?? — Gagan Deep, Jun 05 '20 at 17:43

ikiK · Answer 1 · 2020-06-05T15:09:47.570

Try this. Added ids on divs and values on submit buttons.

<?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>

You can also get away with this:

    <?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>';
    }
 ?>

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

It is all about the response from the server
When you submit a form, a POST request is sent to the server and the server decides what to send back
It can send nothing or it can send a page to be rendered or a route to redirect to

When you submit the form with a submit button like this

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

response will be handled automatically whatever it is a redirect to another page or a page to render or anything else

So in your case there are two solutions :

1. From the Front end
You can submit the form using AJAX (I prefer using JQuery as it too m much easier)

<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. From the Server-side
you can re-set the response from the back-end to send only a message telling that "Nothing went wrong" or "Error occurred"
instead of redirect response or render response

score 0 · Answer 3 · answered Jun 05 '20 at 17:42

There are 2 strategies,

1) Submit using Ajax, then the page doesn't change at all. $.ajax(..) -> https://api.jquery.com/jquery.ajax/

2) Submit with a normal Form-Submit. The page will refresh, but you can send a flag from the server side (for example, add a token to the URL), and read it on the client side in $(document).ready(). If you have that token, then use JavaScript to scroll the page as appropriate.

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' })
    }
});

Scrolling to elements on the client-side: jQuery scroll to element

But Ajax (#1) is the better option.

Stay on a specific part of the page when the form is submitted Javascript

3 Answers3