How to direct a user directly to a form

Question

What I have set up right now is a login form and a signup form that is set into one page, but it toggles back and forth between the forms with some Jquery. When the login form is shown, the signup form is hidden and vice versa. When the page loads, the login form is shown, and the signup form is hidden with the option to toggle between the two with a button. Here's the issue I am running into. I have created some error handlers on the signup form (only the login form is shown when the page initially loads) with some PHP, so say when the user puts in an invalid username, I want to return the fields they entered correctly back to the form via the URL. The issue is that the login form is shown when I am taken back to the URL, not the signup form where I need to input data from the URL. I am looking for a way to access the signup form directly on page load, maybe there's a way to attach a link directly to the signup form itself? I hope I am being clear on describing my issue. Any help is appreciated.

<?php
    require 'header.php';
  ?>

<div class="form-data text-center">
  <h1 class="form-header">Header</h1>
    <div id="login" class="main-login">
        <form class="login-form" action="includes/login.inc.php" method="post">
          <input name="mailuid" type="text" placeholder="Page Name"></input>
          <br>
          <input name="pwd" type="password" placeholder="Password"></input>
          <br>
          <button name="login-submit" type="submit">Login</button>
        </form>
        <p>Need to create a page?</p>
        <a class="btn btn-default" href="#" id="toggle-signup">Sign up</a>
    </div>

    <div id="signup" class="text-center">
        <form href="login_signup/signup" class="signup-form" action="includes/signup.inc.php" method="post">
          <input name="pagename" type="text" placeholder="Page Name"></input>
          <br>
          <input name="email" type="text" placeholder="Email"></input>
          <br>
          <input name="pwd" type="password" placeholder="Password"></input>
          <br>
          <input name="pwd-repeat" type="password" placeholder="Repeat Password"></input>
          <br>
          <button name="signup-submit" type="submit">Login</button>
        </form>
        <p>Already have an account?</p>
        <a class="btn btn-default" href="#" id="toggle-login">Log In</a>
    </div>
</div>

<script>
  $("#toggle-login").click(function(){
      $("#signup").hide().attr("formnovalidate");
      $("#login").show();
  });

  $("#toggle-signup").click(function(){
      $("#login").hide().attr("formnovalidate");
      $("#signup").show();
  });

  $("document").ready(function(){
      $("#signup").hide();
  });
</script>

Your page needs to figure out which form to show, and then put that as a parameter (echoed with PHP) in your `.ready` function, instead of always using `signup`. — Greg Schmidt, Mar 21 '19 at 02:29
you could just make life easy and use 2 pages, i know all the cool kids use jquery, but it dosn't mean its the right tool for every job — , Mar 21 '19 at 02:32
You haven't shown any of your code where you use the submitted form data to make your decisions, so I can't be specific. But wherever that code is, you might set a variable of which one to hide: `$hide = 'signup';` by default, `$hide = 'login';` if they've tried to sign up. Then in your `.ready` function, `$("= $hide ?>".hide();`. — Greg Schmidt, Mar 21 '19 at 02:34
Yes I know using two different pages is an easy solution. Was just wondering more so how it could be done this way. — Fins Up, Mar 21 '19 at 02:34
Hi - just following up. Was your question answered satisfactorily? If there is more we can help with, please add a comment below an answer, or edit your question to clarify what else you need help with. Otherwise, it would be great if you could choose a "best answer" (by clicking the checkmark beside the answer) to close out the question. If no answer provided helpful information, please add your own answer and select that as the best answer. You won't get any points for doing so, but that will close out the question. *Thanks!* — cssyphus, Apr 03 '19 at 19:52

score 1 · Accepted Answer · answered Mar 21 '19 at 02:54

A common method to solve this problem is to validate the sign-up fields via javascript before the form is submitted.

You can use javascript/jQuery to interrupt the submit process, check the value of each field, and - if one or more fields fails validation - return false to return control back to the user in order to fix the problems and try again.

Here are some code examples and demos:

To interrupt the submit, you just use:

$('#id_of_your_form').submit(function(){
    let var_valid = true; //any variable name will do...
    //
    //validation code goes here - see next demo below
    //
    if (!var_valid) return false;
    //if the code gets here, it will continue submitting
});

Here is an example of how to do basic field validation.

http://jsfiddle.net/W4g4e/7/

How to direct a user directly to a form

1 Answers1

Linked