Ajax is not updating data

Question

I've got a forum in which user is allowed to edit and delete only his comments, I've defined an "edit" button, that by a click of mouse brings down a modal, and in that modal user is allowed to get access to the data's he/she has been sent before, I've written an ajax to target these field and update them whenever the users clicks on "edit" button, code totally makes sense, but so far the functionality doesn't, to make it more clear, user clicks, modal comes down, whatever he/she has been posted will appear in fields, and there is an "edit" button at the bottom of modal, which is responsible for changing and updating data. here is the modal code :

                <button id="btn-btnedit"   class="btn btn-primary " data-toggle="modal" data-target="#myModal<?php echo $list['id']; ?>">
                  Edit <i class="fa fa-pencil-square-o"></i>
                </button>


                <!-- Modal -->
                <div class="modal fade" id="myModal<?php echo $list['id']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                      </div>
                      <div class="modal-body">
                        <div class="container">
                                    <form style="width: 550px;" action="" method="post" id="signin-form<?php echo $list['id']; ?>" role="form">
                                    <input type="hidden" name="commentID" value="<?php echo $list['id']; ?>">
                                    <div class="from-group">

                                        <label for="title">Title: </label>
                                        <input class="form-control" type="text" name="title" id="txttitle" value="<?php echo $list['title']; ?>" placeholder="Page Title">

                                    </div>
                                    <div class="from-group">

                                        <label for="label">Label: </label>
                                        <input class="form-control" type="text" name="label" id="txtlabel" value="<?php echo $list['label']; ?>" placeholder="Page Label">

                                    </div>

                                    <br>

                                     <div class="from-group">

                                        <label for="body">Body: </label>
                                        <textarea class="form-control editor" name="body" id="txtbody" row="8" placeholder="Page Body"><?php echo $list['body']; ?></textarea>

                                    </div>
                                    <br>
                                    <input type="hidden" name="editted" value="1">
                                    <br>
                                    <br>
                                    <input type="submit" id="btnupdate" value="Edit">
                                </form>
                        </div>
                      </div>

as you can see I've assigned "editted" to my "name" attribute, which is later on used to call the query in the database, sql code is as below :

        case 'postupdate';

        if(isset($_GET['editted'])){

                $title = $_GET['title'];
                $label = $_GET['label'];
                $body = $_GET['body'];

                    $action = 'Updated';
                    $q = "UPDATE posts SET title ='".$title."', label = '".$label."', body = '".$body."' WHERE id = ".$_GET['commentID'];
                    $r = mysqli_query($dbc, $q);


                    $message = '<p class="alert alert-success"> Your Post Is Succesfully '.$action.'</p>' ; 


            }

and here is the ajax code snippet;

    $('#btnupdate').click(function() {
    var tempTitle = $('#txttitle').val();
    var tempLabel = $('#txtlabel').val();
    var tempBody = $('#txtbody').val();
    var tempUrl = "index.php?page=postupdate"+"&title="+tempTitle+"&label="+tempLabel+"&body="+tempBody+"&commentID=30&editted=1";
    $.get(tempUrl);
});

I assume there is nothing advance about this segment of code, and i'm missing something very simple, any consideration is highly appreciated :)

Answer 1

This (untested code) may be similar to what you should do:

$('#btnupdate').click(function() {
    var tempTitle = $('#txttitle').val();
    var tempLabel = $('#txtlabel').val();
    var tempBody = $('#txtbody').val();
    var tempParams = {"page":"postupdate","title":tempTitle,"label":tempLabel,"body":tempBody,"commentID":30,"editted":1};

    $.post("index.php",tempParams,function(data) {
        alert(data);
    });
});

UPDATE

Try ajax instead of get to see if some error occurs in the loading

$.ajax( {url:"index.php",data:tempParams,type: "POST"} ).done(function() {
    alert( "success" );
}).fail(function() {
    alert( "error" );
}).always(function() {
    alert( "complete" );
});`

UPDATE

Start testing if the click handler works then (just to be sure!):

$('#btnupdate').click(function() { alert("yes at least the button was pressed"); });

UPDATE

Start testing if the script gets executed then:

alert("yes at least the script gets executed");
$('#btnupdate').click(function() { alert("yes at least the button was pressed"); });

If not you must have a javascript error somewhere. https://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers

If yes, your button does not get caught by JQuery (no idea why)

anyway it's got nothing to do with ajax or get!