First of all, i've searched in Stackoverflow and i didn't found an answer for a similar problem.

i would like to link a html Button (among many buttons) with a JQuery function. The function shall execute AJAX method like so :

HTML Code in a separated file index.php:

<button id="submitbtn" type="button" class="btn btn-success">UPDATE</button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

JQuery Function :

    $('#submitbtn').on('click', function(){
        var id = $(this).data('id');

        $.ajax({
            url: 'includes/updatequery.php',
            type: 'POST',
            data: {id:id},
            success: function(data){
                if (data) {
                console.log("updated");
                } else {
                    $('#error').load("custom/static/error.html");
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                $('#error').html("oops"   errorThrown);
            }
        });
    });    

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Here is the PHP file that should be called by AJAX Method :

<?php
include("src/db.php");
$query = "UPDATE mytable SET job='completed' WHERE id=id";
mysqli_query($conn, $query);
  
?>

The problem is that i CANNOT link the ID of the clicked button (because there are many buttons) to the ID of the Database Entry in order to update the Data in the Database according to this specific button.

CodePudding user response：

Use the data-id attribute to add the id:

<button id="submitbtn" data-id="<id>" type="button" class="btn btn-success">UPDATE</button>

https://www.w3schools.com/tags/att_global_data.asp

By default, jQuery ajax uses a Content-Type of application/x-www-form-urlencoded; charset=UTF-8. This means in PHP the POST values can be accessed using $_POST. If using a Content-Type of application/json, you will need to do this.

include("src/db.php");

$id = $_POST['id']; // make sure to sanitize this value

$query = "UPDATE mytable SET job='completed' WHERE id=$id";

mysqli_query($conn, $query);

The above example only demonstrates how to reference the id value from the POST. However, this is not secure as-is. Make sure to sanitize the value as well as protect yourself from SQL Injection using prepared statements. Prepared Statements allow you to bind variables to SQL queries which are sent separately to the database server and can not interfere with the query itself.

CodePudding user response：

Updated HTML

<button id="submitbtn" data-id="<id>" type="button" class="btn btn-success">UPDATE</button>

Updated jQuery

  $('#submitbtn').on('click', function(){
    var id = $(this).attr('data-id');

    $.ajax({
        url: 'includes/updatequery.php',
        type: 'POST',
        data: {id:id},
        success: function(data){
            if (data) {
            console.log("updated");
            } else {
                $('#error').load("custom/static/error.html");
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            $('#error').html("oops"   errorThrown);
        }
    });
});