Update Mysql records using Ajax/Json isn't working

Question

What I'm trying to do is to edit mysql records using php. I've used Ajax/Json to edit a single record, but the problem is my codes isn't working. I tried to alert the value of input element after I clicked the save button and the alert output is verified. And also I don't get any message in console.

Here's what I got right now. Any help will appreciate.

Index.php

<div class="entry-form1">
<form action="" method="post">
<input type="text" name="id_edit" id="id_edit" class="inputs_edit">
<input type="text" name="approved_edit" id="approved_edit" class="inputs_edit">
<input type="submit" name="save_edit" id="save_edit" value="Save"/>
</form>
</div>

Search.php

$query1 = $mysqli->query(""); // not to include
while($r = $query1->fetch_assoc()){
<td><a href='#' name='".$r['id']."' id='".$r['pr_id']."' class='edits'>Edit</a></td>
}

  <script>
  $(document).ready(function(){

$(".edits").click(function(){
    $(".entry-form1").fadeIn("fast");
    //not to include some parts of codes
    $.ajax({
    type: "POST",
    url: "auto-complete.php",
    data :edit_post_value,
    dataType:'json',
    success:function(data){
    var requested=data.requested;
    var id=data.id;
    //send to element ID
    $('#id_edit').val(id);
    $('#requested_edit').val(requested);
    }
    });

    $("#save_edit").click(function () {
    var two = $('#id_edit').val();
    var five = $('#requested_edit').val();
    alert(five);
            $.ajax({
            type: "POST",
            url: "item_edit.php",
             data: "id_edit="+two+"&requested_edit="+five,
            dataType:'json',
            success: function(data){
            console.log(JSON.stringify(data))
                if(data.success == "1"){
                        $(".entry-form1").fadeOut("fast");
                    //setTimeout(function(){ window.location.reload(); }, 1000);        
                }
            }
        });
    });
});
</script>

Item_edit.php

<?php
$mysqli = new mysqli("localhost", "root", "", "app");

if(isset($_POST['id_edit'])) {
$id_edit= $_POST['id_edit'];
$requested_edit= $_POST['requested_edit'];
$sql = $mysqli->query("UPDATE pr_list SET requested='$requested_edit' WHERE id='$id_edit'");

        if($sql){
            echo json_encode(array( "success" => "1"));
        }else{
            echo json_encode(array("success" => "0"));
        }
}
?>

Answer 1

1) First, you're not capturing the click event, because $("# save_edit") is within a function that is not being called. So, you're not even sending the form to the server.

2) Second, the way a form works by default send the data and then reload the page, you must call the preventDefault() function from the event object captured to prevent it, before making the ajax call.

try this:

$(document).ready(function(){

    $("#save_edit").click(function (e) {
        e.preventDefault(); //prevent a page reload

        var two = $('#id_edit').val();
        var five = $('#requested_edit').val();
        alert(five);

        $.ajax({
            type: "POST",
            url: "/item_edit.php",
            data: "id_edit="+two+"&requested_edit="+five,
            dataType:'json',
            success: function(data){

                console.log(JSON.stringify(data));
                 if(data.success == "1"){
                            $(".entry-form1").fadeOut("fast");
                        //setTimeout(function(){ window.location.reload(); }, 1000);        
                    }
                }
    });

    });

});