Not Showing Success Alert

Question

I'm trying to get an alert when i press the log in or sign up button but nothing is coming up. I'm copying this code off a Udemy course and I've gone over it so many times make sure it's exactly like my teachers code but it still doesn't work.

I have more JavaScript code but i didn't include it here as it was working. I've only included the code where it's no longer working for me. I've looked at other related questions and answers on here where people said to add a jQuery URL into the script tag which did not work for me.

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="loginModalTitle">Login</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <input type="hidden" id="loginActive" name="loginActive" value="1">
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>

</form>
      </div>
      <div class="modal-footer">
        <a class="link" id="toggleLogin">Sign up</a>
        <button type="button" id="loginSignupButton" class="btn btn-primary">Login</button>
      </div>
    </div>
  </div>
</div>



    <script>
       $("#toggleLogin").click(function() {
    if ($("#loginActive").val() == "1") {

      $("#loginActive").val("0");
      $("#loginModalTitle").html("Sign Up");
      $("#loginSignupButton").html("Sign Up");
      $("#toggleLogin").html("Login");

    } else {
      $("#loginActive").val("1");
      $("#loginModalTitle").html("Login");
      $("#loginSignupButton").html("Login");
      $("#toggleLogin").html("Sign Up");
    }

  })

  $("#loginSignupButton").click(function() {

    $.ajax({
     type: "POST",
     url: "actions.php?action=loginSignup",
     data: "email=" + $("#email").val() + "&password=" + $("#password").val() + "&loginActive=" + $("#loginActive").val(),
        success: function(result) {
          alert(result);
        }

    })

  })
    </script>


------ actions.php

    <?php 
        include("functions.php");
        if ($_GET['action'] == "loginSignup") {      
              print_r($_POST);      
        }
    ?>

I'm not getting the login or sign up alert when i press the login or sign up button.

Answer 1

Narrow it down. Check for the request in the network panel of the browser dev tools. If the POST doesn't appear there, you know the issue is client side.

Wait for the DOM to load before you set the click handler. Wrap the click handler in a $(document).ready() . If you have already done so, you need to include more code in your question. Based on what you have shared, there are no logic or syntax errors.