-2

This is my HTML form:

<form class="access_form" action="/elements/login.php" method="POST">
  <div class="logo">
    <img src="/img/brand/logo.png" alt="logo" class="brand">
  </div>
  <div class="form">
    <div class="input_container">
      <input type="text" placeholder="Username" name="username" required>
      <input type="password" placeholder="Password" name="password" required>
      <button type="submit" name="login" id="submit">Login</button>
      <p id="alert"></p>
      <h5 class="linked_text_forgot"><a class="linked_text_forgot" href="javascript:">Forgot your password?</a></h5>
    </div>
    <div class="small_container">
      <h5 class="linked_text_signup">Click here to <a class="linked_text_signup" href="" onclick="return switch_form('sign_up');">Sign up</a></h5>
    </div>
  </div>
</form>

This is my javascript:

// form switching function to login or signup form
function switch_form(type) {
  if (type == "login") {
    $( 'form.access_form' ).replaceWith(login);
  } else if (type == "sign_up") {
    $( 'form.access_form' ).replaceWith(sign_up);
  }
  return false;
}

$( document ).ready(function() {
  $(".access_form").submit(function(event){
    event.preventDefault();
  });
});

// sign up form
var sign_up = '<form class="access_form" action="/elements/signup.php" method="POST">' +
                '<div class="logo">' +
                  '<img src="/img/brand/logo.png" alt="logo" class="brand">' +
                '</div>' +
                '<div class="form">' +
                  '<div class="input_container">' +
                    '<input type="text" placeholder="Full name" name="fullname">' +
                    '<input type="text" placeholder="Email" name="email" id="user_email">' +
                    '<input type="text" placeholder="Username" name="username" id="user_uid">' +
                    '<input type="password" placeholder="Password" name="password" id="user_pswd">' +
                    '<button type="submit" name="sign_up" id="submit">Sign Up</button>' +
                    '<p class="alert"></p>' +
                  '</div>' +
                  '<div class="small_container">' +
                      '<h5 class="linked_text_signup">Click here to <a class="linked_text_signup" href="" onclick="return switch_form("login");">Login</a></h5>' +
                  '</div>' +
                '</div>' +
              '</form>';

// login form
var login =   '<form class="access_form" action="/elements/login.php" method="POST" id="login">' +
                '<div class="logo">' +
                  '<img src="/img/brand/logo.png" alt="logo" class="brand">' +
                '</div>' +
                '<div class="form">' +
                  '<div class="input_container">' +
                    '<input type="text" placeholder="Username" name="username" required>' +
                    '<input type="password" placeholder="Password" name="password" required>' +
                    '<button type="submit" name="login">Login</button>' +
                    '<p class="alert"></p>' +
                    '<h5 class="linked_text_forgot"><a class="linked_text_forgot" href="javascript:">Forgot your password?</a></h5>' +
                  '</div>' +
                  '<div class="small_container">' +
                      '<h5 class="linked_text_signup">Click here to <a class="linked_text_signup" href="" onclick="return switch_form("sign_up");">Sign up</a></h5>' +
                  '</div>' +
                '</div>' +
              '</form>';

So from my previous question i've found out that preventdefault works on the normally loaded html elements when the page starts however if you look at the javascript im loading in a signup form without reloading the page using jquery. I think that's why the preventdefault is not working on the html elements that are loaded on the page.

any suggestions for how i could go about this?

Daniel k
  • 1
  • 5
  • Typo here `$("access_form").submit(function(event){`. It has to be `$(".access_form").submit(function(event){` . You are missing the dot. It has to be class selector – brk Jun 26 '18 at 17:17
  • hey thanks for your answer ive just tried adding the "." in front and it still isnt carrying out prevent default – Daniel k Jun 26 '18 at 17:19
  • its in an external file – Daniel k Jun 26 '18 at 17:23
  • its included in the header tags on the top of the index page – Daniel k Jun 26 '18 at 17:25
  • if `$(".access_form").length` is zero, then that's your problem. You can't attach events to something that doesn't exist. – Kevin B Jun 26 '18 at 17:26
  • ive been trying all day so you think document ready will make it work? ive put changes in code above – Daniel k Jun 26 '18 at 17:29
  • Please refer to the linked duplicate post as to why this is not working and the different approaches you can take to resolve it. One of which, is a document ready. – Taplar Jun 26 '18 at 17:32
  • ive changed the question a bit because ive sort of figured out why it didnt work but dont know how i could fix this problem – Daniel k Jun 26 '18 at 18:14

1 Answers1

-1

Basically Jquery attaches event handlers to elements only once, when the page is first loaded. Any elements that are created dynamically (don't exist when the page first loads), will need to have the event handlers manually added to them or you can attach the event handler to an element higher in the DOM that existed from page load. In your example you can attach the event handler to the document, which exists the entire time, and tell it to look for submit events from .access_form elements.

The answer on this page explains it a little better. Click event doesn't work on dynamically generated elements

$( document ).on('submit','.access_form', function(event){
    event.preventDefault();
});
bassxzero
  • 4,838
  • 22
  • 34