jquery POST being sent as GET

Question

The code is working, however it is being sent as GET in the URL.

I have looked at other questions here but none seem relevant.

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

        var newUserName = $('#securityInfoUserName').find(":input").val();
        var newPassword = $('#securityInfoPassword').find(":input").val();
    $.post( "ajaxProcessing.php", { username: newUserName, password:newPassword } )
                .done(function( data ) {
                var success = jQuery.parseJSON(data);
                if (success == 1){          
                    $("#securityInfoMessage").html('YES!! DATABASE CHANGED');

                }else if(success == 2){
                    $("#securityInfoMessage").html('PROBLEM BUDDY!');
                }

            });
});

It is also causing a page refresh. What could be the reason for this?

Let me know if other information is required or relevant.

HTML

<form id= "securityInfoValuePairs">
                        Change username and password:<br/>
                        <div id="securityInfoMessage">
                        </div>
                        <div id="securityInfoUserName">
                        </div>
                        <div id="securityInfoPassword">
                            <label for="passwordLate">NEW or OLD Password:</label>
                            <input type="text" name="passwordLate" placeholder="PLEASE ENTER A PASSWORD">
                        </div>
                        <button id="securityInfoUpdate">UPDATE</button>
                    </form>

BTW info and input fields in form are supplied by js via loalStorage

Is your code executed when the page loads or from an event like a button click? — j08691, May 20 '15 at 20:47
If it's causing a page refresh, probably means you aren't preventing the default event for whatever you use to trigger this code? — scrowler, May 20 '15 at 20:48
Is the button in a form and are there other buttons marked as "submit"? If this is the only button in a form then it can behave as a submit button in which case you'll need to prevent default submission. — Jasen, May 20 '15 at 20:52

score 4 · Accepted Answer · edited May 23 '17 at 12:05

4

The default type for a button is submit and the default method for a form is GET, so when you click your button, since it has no specified type and the form no specified method, and you're not using any JavaScript to prevent the default behavior, it's submitting the form and reloading the page.

An easy fix would be to use return false or .preventDefault() to prevent the button from submitting the form while making your AJAX request. You can see this question for a discussion on the differences between the methods.

edited May 23 '17 at 12:05

Community

1
1

answered May 20 '15 at 20:52

j08691

204,283
31
260
272

Thanks will accept in 2 minutes. Given for fuller not faster answer! – EnglishAdam May 20 '15 at 20:54

score 2 · Answer 2 · answered May 20 '15 at 20:53

2

Add return false; to the end of the click function:

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

    return false;
});

answered May 20 '15 at 20:53

martincarlin87

10,848
24
98
145

Thanks. Accepted the fuller answer though. Thx again! – EnglishAdam May 20 '15 at 20:57

jquery POST being sent as GET

2 Answers2