Prevent Default is not working

Question

I have checked around here and none of these solution on here fix my issue. I cannot seem to get the preventDefault() to work. Code below:

Jquery:

$("#changepassword").submit(function(event) {
    event.preventDefault(); // stop normal form submission
    $.ajax({
        url: "changePassword.php",
        type: "POST",
        data: $(this).serialize(), // you also need to send the form data
        dataType: "html",
        success: function(html) {
            $("#s-window").append(html);
        }
    });
});

HTML:

    <div id="s-window">
        <form id="changepassword" action="changePassword.php" method="POST">
            <input type="password" name="currentPassword" placeholder="Current Password"/>
            <input type="password" name="newPassword" placeholder="New Password"/>
            <input type="password" name="confirmPassword" placeholder="Confirm Password"/>
            <input class="button" type="submit" value="Change Password" />
        </form>
    </div>

There are no errors on my conosle. The changePassword.php works as it is supposed to. But rather than updating my #s-window it redirects me to the changePassword.php page

How can I recode this to make everything happen on the page?

Why not remove the `form` attributes if you are using ajax anyway. — Shaunak D, Apr 15 '15 at 17:04
Mostly because I have no idea what I am doing. I can do that if it will work? Do you have anything that can explain why I would make those changes? — Frank Edgar, Apr 15 '15 at 17:07
Look, your code anyways calls the same php method through ajax. So the form `action` attribute is of no use. Try removing the `action` and `method` from form tag. — Shaunak D, Apr 15 '15 at 17:09
Removing those tags caused it to not send me to a new page, but it still refreshed the entire page. I was hoping to only update that s-window. — Frank Edgar, Apr 15 '15 at 17:12
Hopefully silly question: is the jQuery library loaded before your code? — Blazemonger, Apr 15 '15 at 17:17
Pretty sure it is. Its loaded in the header, and the header loads on all pages. Although... Would it need to be loaded on the changePassword.php script? I didnt think that would matter... Also, is it a problem to have two different libs loaded? — Frank Edgar, Apr 15 '15 at 17:23
[Your code](http://jsfiddle.net/mblase75/doa6qLar/) runs correctly, so there must be another problem. Perhaps there's still a JS error somewhere else, which you're not seeing because the URL changes right away. — Blazemonger, Apr 15 '15 at 17:24
Why you are using dataType: "html". just change it to dataType: "script it will work".I have updated my answer below. — Ashutosh Tiwari, Apr 15 '15 at 17:26
I just looked in your fiddle. I dont see how you know the code works properly. It sits there and does nothing? Doesnt clear the forms or anything that I can see that would indicate it worked? — Frank Edgar, Apr 15 '15 at 17:37
Did you wait until document ready before initializing it with the jquery submit? — Hoyen, Apr 15 '15 at 17:40
No I dont. Can you show me what you mean? And explain what that would do? — Frank Edgar, Apr 15 '15 at 17:48
If you run your code to bind the form with the submit event before the dom is loaded, the code will do nothing. — Hoyen, Apr 15 '15 at 17:52
@Hoyen Hoyen: You seemed to have nailed it. Its not perfect yet. but it changes the password while leaving me on the same page. If you would like to submit it as an answer I can select it? — Frank Edgar, Apr 15 '15 at 18:03

score 1 · Answer 1 · edited May 23 '17 at 11:52

1

You can try this way using return false;, if you have any confusion see here more event.preventDefault() vs. return false

$("#changepassword").submit(function(event) {
  //event.preventDefault(); // stop normal form submission
   return false;
});

edited May 23 '17 at 11:52

Community

1
1

answered Apr 15 '15 at 17:09

A l w a y s S u n n y

36,497
8
60
103

This still redirected me to the changePassword.php script. Which is just a blank white page. – Frank Edgar Apr 15 '15 at 17:16

score 1 · Accepted Answer · answered Apr 15 '15 at 19:18

You need to wait until document is ready:

$(document).ready(function(){
    $("#changepassword").submit(function(event) {
        event.preventDefault(); // stop normal form submission
        $.ajax({
            url: "changePassword2.php",
            type: "POST",
            data: $(this).serialize(), // you also need to send the form data
            dataType: "html",
            success: function(html) {
                $("#s-window").append(html);
            }
        });
    });
});

Ashutosh Tiwari · Answer 3 · 2015-04-15T17:27:55.743

0

In you ajax call change dataType: "html" to dataType: "script"

edited Apr 15 '15 at 17:27

answered Apr 15 '15 at 17:17

Ashutosh Tiwari

984
6
16

It makes no difference. The two are equivalent. – Blazemonger Apr 15 '15 at 17:18
it's different he is using submit function while i am asking to use it with 'on' – Ashutosh Tiwari Apr 15 '15 at 17:18
http://api.jquery.com/submit says: "This method is a shortcut for `.on( "submit", handler )`" – Blazemonger Apr 15 '15 at 17:19
I tried your solution as well. It redirected me to my php script page. – Frank Edgar Apr 15 '15 at 17:38

score 0 · Answer 4 · edited May 23 '17 at 12:32

0

At least in IE, event is a global variable (as per Is 'event' a reserved word in JavaScript?). This may not be the cause of your problem, but it might be a good idea to change your naming nonetheless.

edited May 23 '17 at 12:32

Community

1
1

answered Apr 15 '15 at 17:26

rusmus

1,665
11
18

I can change event to e or something else if you tihnk that might be the problem? – Frank Edgar Apr 15 '15 at 17:38
1

Give it a shot. If nothing else, it would be a bit tidier. `e` would be a fine name. – rusmus Apr 15 '15 at 17:58

Prevent Default is not working

4 Answers4