Prevent default not working in ajax form submit

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>

Have a look at this: https://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery — AGB, Aug 04 '17 at 12:18
@freedomn-m Why change the whole script behavior when `.submit()` should work just fine ? @Sarath: Try adding `e.stopPropagation();` right after your `e.preventDefault();`. — Jeff Noel, Aug 04 '17 at 12:26
I tried on click function too as i mentioned in question in that case my captcha is not generating a session — Sarath Hari, Aug 04 '17 at 12:27
How does your "captcha validation" work? There's nothing in the code you've included. Is there another .js file for it? It's possible it's adding its *own* submit handler which is kicking in before yours. Can you confirm your submit handler is being hit (add an alert or console.log) — freedomn-m, Aug 04 '17 at 12:27
Should work fine as shown. Does form exist at page load time? Is `id=login` used more than once in the page? Are any errors thrown in browser console? — charlietfl, Aug 04 '17 at 12:30
Is there a javascript component? (you're correct, the php part shouldn't be relevant) — freedomn-m, Aug 04 '17 at 12:31
Can see the form does not submit in your demo. Something else is different — charlietfl, Aug 04 '17 at 12:33
I was working in another website which i done. What i did is just took it from there.It seems so strange for me — Sarath Hari, Aug 04 '17 at 12:33
Are you sure the form isn't loaded by ajax? Put an `alert($('#login').length)` .. should not be zero — charlietfl, Aug 04 '17 at 12:34
@charlietfl Stack Snippet is sandboxed, afaik you can't submit a form with it anyway ..? — Teemu, Aug 04 '17 at 12:35
@Teemu irregardless the basic code works https://jsfiddle.net/j4hrja77/ — charlietfl, Aug 04 '17 at 12:37
i tried using alert($('#login').length); but it again get skipped — Sarath Hari, Aug 04 '17 at 12:39
@Teemu also seems snippets don't prevent default submit, just tested with a simple form — charlietfl, Aug 04 '17 at 12:39
You can check the test site here : http://test.foragespiders.com/modeling/ — Sarath Hari, Aug 04 '17 at 12:44
If the only thing you need to do is to prevent the default action, you can supply value as false instead of a function: $('#login').submit(false); — Suresh Sapkota, Aug 04 '17 at 14:41

Vel · Answer 1 · 2017-08-04T13:50:43.803

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>

edited Aug 04 '17 at 13:50

answered Aug 04 '17 at 12:47

Vel

9,027
6
34
66

Without type submit also my form is getting submitted – Sarath Hari Aug 04 '17 at 12:49
I already tried on click even. in that case my captcha is not working. – Sarath Hari Aug 04 '17 at 12:54
I am not getting any variable values of form in the next page.Thats the issue i spotted after alerting. – Sarath Hari Aug 04 '17 at 13:04
let me know this method of passing data is correct. ? data: $('#login').serialize(), – Sarath Hari Aug 04 '17 at 13:05
try with `data:{"formdata":$('#login').serialize()}` – Vel Aug 04 '17 at 13:06
i tried to print $_REQUEST['email']; and $_POST['email']; that itself is not coming – Sarath Hari Aug 04 '17 at 13:24
try to print `print_r($_REQUEST);`. or `print_r($_REQUEST['formdata']);` – Vel Aug 04 '17 at 13:35
1

you have 2 same id in you html. please change that. – Vel Aug 04 '17 at 13:51
check my answer.. `id="login"` – Vel Aug 04 '17 at 13:51

score 0 · Answer 2 · answered Aug 04 '17 at 12:51

0

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');
        }
      }

    });
  });
});

answered Aug 04 '17 at 12:51

vjy tiwari

843
1
5
17

I already tried on click even. in that case my captcha is not working – Sarath Hari Aug 04 '17 at 12:54

Prevent default not working in ajax form submit

2 Answers2