使用jQuery和AJAX更新SQL的问题

Question

I'm having a peculiar problem with this app. It doesn't update the columns always and there is no rule as to when it will be updated and when will it not. Seems totally random, and doesn't get me back to admin.php page.

Additionally, when it does change/update the entry in the db it doesn't send a response to Ajax (alert('OK')). Code below:

--this is admin.php

<div class="update" style="display:none">
    <form method="post" action="adminFunctions.php">
        <div class="input-group">
            <label>new name</label>
            <input class='newNameInput' type="text" name="newName" >
        </div>
        <div class="input-group">
            <label>new last name</label>
            <input class='newLastNameInput' type="text" name="newLastName">
        </div>
        <div class="input-group">
            <button type="submit" class="btn changePerson" name="changePerson">change</button>
        </div>
    </form>
</div>

then Jquery:

$(document).ready(function(){

    var changeId;
    $('.changeMe').click(function () {
      var el = this;
      var id = this.id;
      var splitid = id.split("_");
      changeId = splitid[1];
      $('.update').css('display', 'block');
    });
    
    $('.changePerson').click(function () {
          var newNameFor = $('.newNameInput').val();
          var newLastNameFor = $('.newLastNameInput').val();
          $.ajax({
            url: './adminFunctions.php',
            type: 'POST',
            data: 'changeSth=' + changeId + '&newName=' + newNameFor + '&newLastName=' + newLastNameFor,
            success: function(response) {
                if(response == 1) {
                  alert('OK');
                } else {
                  console.log('entry update failed');
                }
            }
          })
        });
});

--and adminFunctions.php

if(isset($_POST['changeSth'])) {
    $id = $_POST['changeSth'];
    $newName = $_POST['newName'];
    $newLastName = $_POST['newLastName'];

    changeEntry($id, $newName, $newLastName);
}
function changeEntry ($id, $newName, $newLastName) {
    global $testConn;
    if($id) {
        $query = "UPDATE people SET firstName='$newName', lastName='$newLastName' WHERE id=$id";
        mysqli_query($testConn, $query);
        header('location: admin.php');
        echo 1;
    } else {
        echo 0;
    }
    header('location: admin.php');
}

I'm new at PHP so please forgive the lack of elegance in my code.

Thanks in advance!

</div>

Answer 1

I created sample fiddle for you. I made correct ui example, you need to adapt it on server side. Key change is that you need to pass data, instead of url in ajax via POST.

 $('.changePerson').click(function () {
      var newNameFor = $('.newNameInput').val();
      var newLastNameFor = $('.newLastNameInput').val();
        var idFor = $('input[type="hidden"]').val();

      var data = {changeSth: idFor, newName: newNameFor, newLastName: newLastNameFor};
      $.ajax({
        url: './adminFunctions.php',
        type: 'POST',
        data: data,
        success: function(response) {
            if(response == 1) {
              alert('OK');
            } else {
              console.error('entry update failed');
            }
        }
      })
    });

EDIT:

First thing to highlight is that type='submit' is designed for input nor for the button tag

Second thing, is that data should be transfered via POST method nor url-string. There are few different approaches for getting data from form html. You can use approach from my example with ids/classes or serialize entire form and pass it. (thx @harry)