This is my HTML code :

<form id="change-ums" class="form-horizontal" style="margin-top: 10px;">

                    <div class="control-group">
                        <label class="control-label" for="umsid">ID :</label>
                        <div class="controls"><input type="text" id="umsid" required/></div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="umspass">Password :</label>
                        <div class="controls">
                            <input type="password" id="umspass" required/>
                            <br>
                            <br>
                            <button type="submit" class="btn btn-primary btn-small">Change Pass</button>
                        </div>
                    </div>
                </form>

And this is my Jquery Code :

$('change-ums').on('submit',function(e){
                        e.preventDefault();
                        $.ajax({
                           type : 'post',
                           url : '/user/changepass',
                           data : $('change-ums').serialize(),
                           success : function(){
                               alert('Your password has been changed successfully.');
                           }
                        });
                    });

I think that I am doing everything correctly, and even using preventDefault() but still the page is getting refreshed and the jquery is not able to plete its request. What am I doing wrong?

This is my HTML code :

<form id="change-ums" class="form-horizontal" style="margin-top: 10px;">

                    <div class="control-group">
                        <label class="control-label" for="umsid">ID :</label>
                        <div class="controls"><input type="text" id="umsid" required/></div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="umspass">Password :</label>
                        <div class="controls">
                            <input type="password" id="umspass" required/>
                            <br>
                            <br>
                            <button type="submit" class="btn btn-primary btn-small">Change Pass</button>
                        </div>
                    </div>
                </form>

And this is my Jquery Code :

$('change-ums').on('submit',function(e){
                        e.preventDefault();
                        $.ajax({
                           type : 'post',
                           url : '/user/changepass',
                           data : $('change-ums').serialize(),
                           success : function(){
                               alert('Your password has been changed successfully.');
                           }
                        });
                    });

I think that I am doing everything correctly, and even using preventDefault() but still the page is getting refreshed and the jquery is not able to plete its request. What am I doing wrong?

• javascript
• jquery
• html

2 Answers 2

you missed # in your selector.

$('change-ums').on('submit',function(e){

should be

$('#change-ums').on('submit',function(e){
   ^

Your selector should be $('#change-ums') (# = id)

Also, be sure that your script is loaded after the dom loading.