#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2019
    Posts
    5
    Rep Power
    0

    Database Update On Change


    Been racking my brain, not finding a solution out there, so not even sure this can be done.

    I would like to be able to dynamically update a database when a user changes a field, and not have them click a submit button and have the page reload.

    Essentially, they will be on a page that has 50 or more input fields. When they make a change to one of those input fields, the database will need to be updated as they make the changes.

    I assume Ajax will be needed to do this, but as I stated, I haven't found a solution so far.

    Thanks in advance for any help!
  2. #2
  3. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,288
    Rep Power
    4194
    Inputs fire a change event when they have been modified. You'd hook into that with some Javascript and fire off a request to the server with the field name and new value. For example:

    Code:
    //Using jQuery
    $('form').change(function(e){
        var $input = $(e.target); //e.target should be the field that changed.
        $.post('server.php', {name: $input.attr('name'), value: $input.val()});
    });
    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2019
    Posts
    5
    Rep Power
    0
    So, would I need to do this for each field or can it be set up to dynamically pull in the id/name/etc. ?
  6. #4
  7. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,288
    Rep Power
    4194
    The example code I posted above should work for an entire form.

    Event's that are fired by an element bubble up through the DOM tree so rather than listen for the change event on individual inputs you can listen for it on the parent form element and receive a change notification for every input in that form. That's what the $('form').change() function does.

    When an event is received the function you pass into .change() is executed with an object containing details. The .target property of that object should represent the actual input which triggered the event. You can use that to look up the elements name and it's new value. That what the $input, $input.attr('name') and $input.val() bits do.
    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2019
    Posts
    5
    Rep Power
    0
    Totally makes sense.

    How should "server.php" then be coded?
  10. #6
  11. Headless Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,977
    Rep Power
    9647
    Using kicken's code,
    Code:
    $.post('server.php', {name: $input.attr('name'), value: $input.val()});
    server.php will receive in $_POST two items: "name" being the input's name and "value" being its value.

    The code should check that those two items are present, first of all, then check that the "name" is a valid input name for what can be updated, then that the "value" is a valid value according to the input. For example, if the input was an age then you should check that the value is a valid... well, age.

    Once it's confirmed that the name and value are good, it can update whatever it needs to update.
    Last edited by requinix; May 20th, 2019 at 05:45 PM.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2019
    Posts
    5
    Rep Power
    0
    Awesome.

    I believe where I am getting hung up at is that I also need to pass an ID through as well.

    I am using the following to pull in the data:

    Code:
    $result = mysqli_query($mysqli, "SELECT * FROM SB_Test WHERE id=$id");
    How do I include the ID in the post:

    Code:
    $.post('update.php', {name: $input.attr('name'), value: $input.val()});
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2019
    Posts
    5
    Rep Power
    0
    I was able to figure out passing the ID value:

    Code:
    $.post('update.php', {name: $input.attr('name'), value: $input.val(), id: $('#charid').val()});
    What I need to figure out is how, in update.php, I am able to update the incoming data:

    Code:
    $result = mysqli_query($mysqli, "UPDATE SB_Test SET name_from_post='value_from_post' WHERE id=$id");
  16. #9
  17. Headless Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,977
    Rep Power
    9647
    Look for a good tutorial on prepared statements with PHP and mysqli.

    For the values, $_POST will be an array. Try dumping it out with print_r() or var_dump() to see what it contains. Do not put those values into your query directly - you need prepared statements for that part. It's not hard.

IMN logo majestic logo threadwatch logo seochat tools logo