Edit data in modal filled with php database data

Question

I have a form that edits the database data based on the received id.

/*
função para atualizar os dados quando clicado em submit
*/

$('.editfoto').submit(function () {
        var form = $(this);
        var dados = new FormData($(this)[0]);
        $("#btnEdit").prop("disabled", true);

        id = $(this).data("idedit");

        $.ajax({
            url: 'editafoto.php?id=' + id,
            cache: false,
            contentType: false,
            processData: false,
            data: dados,
            type: 'GET'
        }).done(function (data) {
            fetchUser();
            alert("Dados Atualizados com Sucesso");
            console.log("STATUS : ", data);
            $("#btnEdit").prop("disabled", false);
            $('#modalEdit').modal('hide');
            $('.editfoto')[0].reset();

        }).fail(function (jqXHR, textStatus) {
            console.log("Request failed: " + textStatus);
            $("#btnEdit").prop("disabled", false);
        });
        return false;

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<!-- chama o modal -->
 <a id="editfoto" data-idedit="<?php echo $row['idfoto']; ?>"><i class="fas fa-edit"></i></a>

<div class="modal fade" id="modalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Editar Foto</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="editfoto" method="POST" enctype="multipart/form-data">
                    <input type="hidden" id="idfoto" name="idfoto" value="<?php echo $ftvi->getIdfoto(); ?>" />
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="datavisita">Data Vísita</label>
                        </div>
                        <div class="col col-lg-6">    
                            <input type="text" name="dtvisita" id="dtvisita" required autocomplete="off" class="form-control  form-control-sm form-group small" value="<?php echo $ultil->formataData($ftvi->getIdfoto()); ?>" />
                        </div>
                    </div>

                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="idvisita">Visíta</label>
                        </div>
                        <div class='col col-md-6'>   
                            <input type="text" name="idvisita" id="idvisita" readonly class="form-control  form-control-sm form-group small" value="<?php echo $_SESSION['id']; ?>" />
                        </div>
                    </div>
                    <br />
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="percentandamento">Porcentagem Andamento</label>
                        </div>
                        <div class="col col-md-6 slidecontainer">
                            <input type="range" name="percentandamento" id="percentandamento" required min="1" max="100" value="<?php echo $ftvi->getPercentandamento(); ?>" class="form-control-range slider" oninput="disp.value = percentandamento.value">
                            <output  id="disp"></output>
                        </div>
                    </div>
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="caminhofoto">Foto</label>
                        </div>
                        <div>   
                            <input type="file" name="caminhofoto" id="caminhofoto" required class="form-control-file form-control-sm form-group small" accept="image/png,image/jpg" value="<?php echo $ftvi->getCaminhofoto(); ?>" />
                        </div>
                    </div>
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" class="control-label" for="descricaofoto">Descrição Foto</label>
                        </div>
                        <div class='col-md-auto'>                
                            <textarea name="descricaofoto" id="descricaofoto" cols="25" rows="3" class="form-control  form-control-sm form-group small" ><?php echo $ftvi->getDescricaofoto(); ?></textarea>
                        </div>
                    </div>  
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                <button type="submit" id="btnEdit" class="btn btn-primary">Salvar</button>
            </div>
            </form>
        </div>
    </div>
</div>

The problem is that I’m not getting the information from PHP to Modal. for it to load the information to be edited.

I found an example that uses data-attributes, but if I put all data-attributes on my call link it will get huge. It’s been a while since I tried to solve this problem and nothing.

I have the listing and when clicking on the icon/link edit it opens a modal like the one of the adicin, only with the data loaded from the database. A print:

Answer 1

I noticed a syntax error in your code that may not allow you to find the correct id of what you want to edit:

url: 'editafoto.php=id' + id,

Where I should actually pass:

url: 'editafoto.php?id=' + id,

the "?" is to signal that from this point it starts its "Query String", and you say that there is a "parameter" called "id" whose value "=" is the content of the variable "id".

But you also already have a HIDDEN type field in the form as the name "idfoto" that will pass this value, so you really need to mount this query string at the url of the page you are calling?

Be very careful about security, because any user can change this "ID" and submit the form, changing the data of another record, which may not be the appropriate.

It is also worth understanding that if you are planning to upload a list of photos to open each one in a modal, this way you will have to upload all the data of all the photos in the list on the screen to open one by one, IE, your html return could get huge. a more economical way might be to load the list and when clicking on a photo, upload the data to be edited through ajax.

Maybe I haven’t answered your question, but I have listed here some alerts that may give you some guidance on where to go.