Pass variable value to input in another PHP file

0

Good morning!

I have the following situation:

A customer needs to fill out a form, and one of the fields in this form is for uploading images. To adapt to the client, the window for sending the image opens in a modal, in a different file. The client chooses the image, the upload is done and the file goes as md5.

So far, all in peace.

Well, the client is a very basic user, even for a "Ctrl C" and "Ctrl V", so I need to pass the generated file name (image) to the previous form to the modal, in the input. >

I'll try to demonstrate from images:

On the same (modal) upload page, I already gave echo and I get the file name normally. The problem is that I am not able to move to the previous form.

Could I explain? It's something simple, but I'm finding it difficult.

Thanks in advance!

    
asked by anonymous 07.03.2016 / 12:15

1 answer

1

Come on.

Include jQuery in your project (it's possible to do with pure JavaScript, just search the internet).

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

Includethecodebelow,itwillcallviaAJAXthepageresponsibleforsendingtheimageswhenanyofthebuttonsareclicked.

<script>
    function chamarUpload(btnId) {
        $.ajax({
            url: 'upload.php', //Altere pelo arquivo de upload
            type: 'GET',
            data: 'btnId=' + btnId,
            success: function(data) {
                $('#divLightbox').html(data); //Altere para o ID do modal

                //Faça com que seu modal seja exibido
            },
            beforeSend: function() {
                //Se quiser, coloque uma animação, tipo loading...
            }
        });
    }
</script>

Change the url value to the path of your file where you have the upload form, and within function success, change the divLightbox pro ID of your "modal".

PS: If clicking the button refreshes the page, add return false; to the end of the above function (before the last key).

PS2: If you notice the code, we are making a GET request, and we are passing the btnId parameter to the btnId value we received when calling the function. This value must be relative to the ID of your input (each input must have a different ID).

Your upload page should have code similar to this

<?php
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        //Faça tudo que for necessário pro upload da imagem
        //e conversão para MD5

        //Não esqueça de dar o echo.
        //O echo deve ser limpo, para exibir apenas o MD5, nada mais.

        //Não remova o exit.
        exit;
    }
?>
<div id="content-upload">
    <p>Somente arquivos JPEG, PNG e JPG são permitidos. O tamanho da imagem precisa ser menor que 5000KB</p>
    <hr>
    <form aciton="" method="post" id="form-upload">
        <input type="file" id="imagem" name="imagem">
        <button type="submit" id="btn-send">Enviar imagem</button>
    </form>
</div>
<script>
    $(function() {
        $("#btn-send").click(function() {
            $.ajax({
                url: 'upload.php', //chame essa mesma página
                type: 'POST',
                data: $('#form-upload').serialize(),
                success: function(data) {
                    $("#<?= $_GET['btnId']; ?>").val(data);

                    //Nesse momento, o MD5 da imagem já deve ter sido atribuido
                    //ao campo, então feche o modal.
                },
                beforeSend: function() {
                    //Se quiser defina um loading pro upload
                }
            });

            return false;
        });
    });
</script>

Finally, to call the upload page and make it be included in the div of your modal, use the href of the links as: javascript:chamarUpload(id do input que vai receber o md5);

Staying like this

<a href="javascript:chamarUpload('input1');" title="Fazer upload">Upload</a>

Or, on other elements, use onclick, thus:

<img src="..." onclick="chamarUpload('input1');">
    
07.03.2016 / 13:57