title: Login and register in just one page using php and ajax
body: <p>I'm working on a project. (web)</p>
  
  <p>The first version, has a separate login.php and register.php which login calls a .js to do an ajax validation. the same happends with register.</p>
  
  <p>The second version, the page have a login and register form in just one page like this:</p>
  
  <p><a href="https://i.stack.imgur.com/J8Ctp.png" rel="nofollow noreferrer">Login and register in one page</a></p>
  
  <p>The problem is in this new page version, I import (
  
  <p>(for better understanding, In the image enclosed yellow)</p>
  
  <p>My first idea was put a code to ejecute every .js separate(one .js for login and one .js for register).
  like this:</p>
  
  <pre><code>if( $_POST['submit_login'] ) {
   echo "&lt;script src='js/login.js'&gt;&lt;/script&gt;";
  }
  else if( $_POST['submit_register'] ) {
   echo "&lt;script src='js/register.js'&gt;&lt;/script&gt;";
  }
  </code></pre>
  
  <p>but the code above does: the first click import the .js, then at the second click to log in/register, load correctly.</p>
  
  <p>The optimal idea is to load every .js where appropriate. The .js at just one click like all sites.</p>
  
  <p><strong><em>The code for login.js is:</em></strong></p>
  
  <pre><code>$(function() {
      $("form").submit(function(e) {
          var datos = $("form").serialize();
          $.ajax({
              method: "POST",
              url: "loginCode.php?type=pdo",
              data: datos,
              success: function(data) {
                  switch($.trim(data)) {
                      case "success":
                              notification("success", "Usuario válido");
                           $(location).attr('href','index.php');
                          break;
                      case "failed":
                              notification("failed", "Usuario no válido");
                          break;
                      default:
                  }
              }
          })
          e.preventDefault();
      });
  
  });
  function notification(type, text) {
      $notify = $("&lt;div class='notification " + type + "'&gt;&lt;/div&gt;").appendTo("#notification_wrapper");
      $notify.append("&lt;div class='errorImage'&gt;&lt;/div&gt;&lt;div class='info'&gt;" + text + "&lt;/div&gt;");
      $notify.fadeIn().delay(3000).fadeOut('fast');
  }
  </code></pre>
  
  <p><strong><em>And the code for register.js:</em></strong></p>
  
  <pre><code>$(function() {
      $("form").submit(function(e) {
          var datos = $("form").serialize();
          $.ajax({
              method: "POST",
              url: "signupCode.php?type=pdo",
              data: datos,
              success: function(data) {
                  switch($.trim(data)) {
                      case "success1":
                              notification("success", "Registro completado");
                          break;
                      case "failed1":
                              notification("failed", "Ha ocurrido un error");
                          break;
                      default:
                  }
              }
          })
          e.preventDefault();
      });
  
  });
  function notification(type, text) {
      $notify = $("&lt;div class='notification " + type + "'&gt;&lt;/div&gt;").appendTo("#notification_wrapper");
      $notify.append("&lt;div class='errorImage'&gt;&lt;/div&gt;&lt;div class='info'&gt;" + text + "&lt;/div&gt;");
      $notify.fadeIn().delay(3000).fadeOut('fast');
  }
  </code></pre>
  
  <p><strong><em>The html form login is quite normal like this:</em></strong></p>
  
  <pre><code>&lt;form id="form_1" action="" method="post"&gt;
      &lt;input type="submit" name="submit_login" value="Submit" /&gt;
  &lt;/form&gt;
  
  &lt;form id="form_2" action="" method="post"&gt;
      &lt;input type="submit" name="submit_register" value="Submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Hope u can help me, I was trying to do that 1 week ago but this wins me.
  Sorry if my english is not so good.
  Thanks u in advance.</p>