Question

I tried my level best in implementing this ajax. I dont what the form's default action to happen.I give prevent default but its not working. My page form is getting submitted without ajax. When i tried on click instead of on submit the captcha validation is not working.Can someone tell whats the mistake here. Thanks in advance.

$(document).ready(function() {
  $("#login").submit(function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: "login.php",
      data: $('#login').serialize(),
      success: function(data) {
        alert(data);
        if (data == 'success') {
          location.reload();
        } else {
          $('#loginmsg').html(data).fadeIn('slow');
        }
      }

    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="<?php echo $root ?>login.php" id="login" method="post">
  <div id="loginmsg"></div>
  <div class="form-group">
    <label for="login_email" class="sr-only">Email address</label>
    <input name="email" type="email" class="form-control" id="login_email" placeholder="Email address">
  </div>
  <div class="form-group">
    <label for="login_password" class="sr-only">Password</label>
    <input name="password" type="password" class="form-control" id="login_password" placeholder="Password">
  </div>
  <div class="form-group">
    <img src="common/captcha/captcha.php" id="captcha" height="50" />
    <a href="javascript:void(0)" onclick="document.getElementById('captcha').src='common/captcha/captcha.php?'+Math.random();document.getElementById('captcha-form').focus()" id=change-image title="Click here to refresh captcha code"><i class="fa fa-refresh refresh-sec"></i></a>
    <div class="form-item inline">
      <div class="captcha-block">
        <p class="comment-form-captcha"><input name="captcha" type="text" id="captcha-form" autocomplete="off" class="form-text contact-captcha" maxlength="6" required="required" /></p>
      </div>
    </div>
  </div>
  <div class="text-center">
    <button type="submit" class="theme_button color1">
          Log in
          </button>
  </div>
</form>

Answer 1

you should use

 <button type="button" class="theme_button color1">Log in</button>

instead of

<button type="submit" class="theme_button color1">Log in</button>

and change the form submit to

     $(document).on("click",".theme_button ", function(){


        });

you have two id in your html

<a class="topline-button" id="login" data-target="#" href="./" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
    <i class="fa fa-lock" aria-hidden="true"></i> Login
</a>


<form role="form" action="login.php" id="login" method="post">

</form>

Answer 2

You can try this

$(document).ready(function() {
  $(document).on('click','#login' ,function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: "login.php",
      data: $('#login').serialize(),
      success: function(data) {
        alert(data);
        if (data == 'success') {
          location.reload();
        } else {
          $('#loginmsg').html(data).fadeIn('slow');
        }
      }

    });
  });
});

Prevent default not working in ajax form submit

2 个答案: