Ajax not using POST method instead it is using GET jQuery

Question

I am facing strange issue with Ajax I have tried checking all code but still ajax is using GET method instead of POST. Please correct if I am wrong any where Here is my code

$(document).ready(function(){
    $("#err<?php echo $id; ?>").css('display', 'none', 'important');
     $("#submit-edit<?php echo $id; ?>").click(function(){  
        $.ajax({
            type: "POST",
            url: "includes/edit_user.php",
            data: "submit-edit="+$("#submit-edit<?php echo $id; ?>").val()+"&user_id="+$("#user_id").val()+"&username="+$("#username").val()+"&password="+$("#password").val()+"&firstname="+$("#firstname").val()+"&lastname="+$("#lastname").val(),
            success: function(html){    
                if($.trim(html)=='true')    {
                 $("#err<?php echo $id; ?>").addClass("alert alert-success err-inline");
                 $("#err<?php echo $id; ?>").html("<strong>User Details are Updated Successfully</strong>");
                 window.location="<?php basename($_SERVER['PHP_SELF']); ?>";
                }
                else    {
                    $("#err<?php echo $id; ?>").addClass("alert alert-danger err-inline");
                    $("#err<?php echo $id; ?>").html("<img src='images/caution-icon.png' /> <strong>Please check the details you have entered</strong>");
                }
           },
           beforeSend:function()
           {
                $("#err<?php echo $id; ?>").css('display', '-webkit-inline-box', 'important');
                $("#err<?php echo $id; ?>").addClass("err-inline");
                $("#err<?php echo $id; ?>").html("<img src='images/loading.gif' /> Loading...")
           }
        });
        return false;
    });
});

Here is the PHP Code is a bootstrap modal, I have used echo $id; So i can create model to edit every user present in the main page(The page from which i am calling this modal).

<div id="edit<?php echo $id; ?>" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title">Edit User</h4>
            </div>
            <div class="modal-body">
            <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-8">
                        <div id="err<?php echo $id; ?>" class="alert" role="alert"></div>
                    </div>
                    <div class="col-md-1"></div>
                </div>
                <form id="editUser<?php echo $id; ?>" method="POST" class="form-horizontal" >
                    <div class="form-group">
                        <label class="col-md-3 control-label">Username</label>
                        <div class="col-md-5">
                            <input id="user_id" type="hidden"  name="id" value="<?php echo $row['user_id']; ?>" required>
                            <input id="username" type="text" class="form-control" name="username" value="<?php echo $row['username']; ?>" readonly="readonly"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Password</label>
                        <div class="col-md-5">
                            <input id="password" type="password" class="form-control" name="password" value="<?php echo $row['password']; ?>" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">First Name</label>
                        <div class="col-md-5">
                            <input id="firstname" type="text" class="form-control" name="firstname" value="<?php echo $row['firstname']; ?>" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Last Name</label>
                        <div class="col-md-5">
                            <input id="lastname" type="text" class="form-control" name="lastname" value="<?php echo $row['lastname']; ?>" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-5 col-md-offset-3">
                            <button id="submit-edit<?php echo $id; ?>" type="submit" name="submit-edit<?php echo $id; ?>"  class="btn btn-success"><i class="icon-save icon-large"></i>&nbsp;Update</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Also the php file to which data should be posted at includes/edit_user.php

<?php
include_once('../../config.php');
if (isset($_POST['submit-edit'])){

    $user_id=$_POST['user_id'];
    $username=$_POST['username'];
    $password=$_POST['password'];
    $firstname=$_POST['firstname'];
    $lastname=$_POST['lastname'];

    $result=mysql_query("update users set password='$password' , firstname = '$firstname' , lastname = '$lastname'  where user_id=$user_id")or die(mysql_error());
    if($result)
        echo 'true';
    else
        echo 'false';
    }
?>

Answer 1

Finally after debugging for few hours I found the solution I had placed the Ajax and jQuery code after the form. Also corrected some issues in my Ajax like

data: "submit-edit="+$("#submit-edit<?php echo $id; ?>").val()+"&user_id="+$("#user_id<?php echo $id; ?>").val()+"&username="+$("#username<?php echo $id; ?>").val()+"&password="+$("#password<?php echo $id; ?>").val()+"&firstname="+$("#firstname<?php echo $id; ?>").val()+"&lastname="+$("#lastname<?php echo $id; ?>").val(),

and in the form i had to use

<input id="username<?php echo $id; ?>" type="text" class="form-control" name="username" value="<?php echo $row['username']; ?>" />

Similarly for other attributes. I had finally realised that for each form attribute but must be unique to make it work with Ajax. It doesn't matter if you change the form id. But for all the forms every attribute has to be differently identified

eg:

<form id="form1">
      <input id="username1" type="text" value="" />
</form>
<form id="form2">
      <input id="username2" type="text" value="" />
</form>

So if I use multiple forms in a page I have to useevery element with different id while working with ajax. Otherwise it wont work.

Answer 2

You have to prevent the default action of the submit before AJAX will use the POST method:

$("#submit-edit<?php echo $id; ?>").click(function(event){  
    event.preventDefault();

In addition, you need to prevent SQL Injection. Please, stop using mysql_* functions. They are no longer maintained and are officially deprecated. Learn about prepared statements instead, and use PDO.

Furthermore, as mentioned in comments on your OP, the code is awfully convoluted. Have the PHP generate your HTML and then apply jQuery to it separately. It'll keep things cleaner and easier to trouble-shoot when problems arrive down the line.