CODEWITHSUNDEEP
jqueryajax
EnglishAdam
EnglishAdam

Reputation: 1390

jquery POST being sent as GET

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

Upvotes: 2

Views: 103

Answers (2)

j08691
j08691

Reputation: 207861

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.

Upvotes: 4

martincarlin87
martincarlin87

Reputation: 11042

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

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

    return false;
});

Upvotes: 2

Related Questions