CODEWITHSUNDEEP
javascriptphpjqueryajax
salep
salep

Reputation: 1380

How to pass input value to ajax using FormData?

I am trying to upload images using ajax and php and I have managed to make it work to a certain level successfully, but I can't make my input's value (ID) pass to my php file.

Here's my scenario.

FORM

<form enctype="multipart/form-data" id="myform">
        <input type="file" name="images[]" multiple id="image"/>
</form>

Button

<button type="button" id="uploadimages" name="thing_id" 
value="<?php echo $row['thing_id']; ?>" class="btn btn-primary">Save changes
</button>

AJAX

    $("#uploadimages").click(function () {
        var form = new FormData($('#myform')[0]);

        // Make the ajax call
        $.ajax({
            url: 'uploadimages.php',
            type: 'POST',
            xhr: function () {
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) {
                    myXhr.upload.addEventListener('progress', progress, false);
                }
                return myXhr;
            },
            //add beforesend handler to validate or something
            //beforeSend: functionname,
            success: function (res) {
                $('#content_here_please').html(res);
                /**/
            },
            //add error handler for when a error occurs if you want!
            //error: errorfunction,
            data: form,
            cache: false,
            contentType: false,
            processData: false
        });
    });

PHP

$get_id = $_POST['']; // This is where I stuck.

How can I pass $row['thing_id'] to $get_id variable? I can pass it using another GET ajax call on success, but then I lose the image_id value (I use foreach since I may upload multiple files), so I want to handle it in the same php file.

I didn't include my upload script because it works unless I try to make something using thing_id.

Upvotes: 3

Views: 1651

Answers (3)

Harigovind R
Harigovind R

Reputation: 826

in your ajax code pass the data attribute

$.ajax({
        url: 'uploadimages.php',
        type: 'POST',
        data:{upId:$("#uploadimages").val(),images:$('#uploadFieldId').val()},
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', progress, false);
            }
            return myXhr;
        },
        //add beforesend handler to validate or something
        //beforeSend: functionname,
        success: function (res) {
            $('#content_here_please').html(res);
            /**/
        },
        //add error handler for when a error occurs if you want!
        //error: errorfunction,
        cache: false,
        contentType: false,
        processData: false
    });

then you can access the upId in your php file as,i have made an updation so that you can send the upload file field value also to the php file. Change the id so that it matches the field and you can retrieve this field using

$get_id = $_POST['upId'];

$image = $_POST['images'];

Upvotes: 1

adnan kamili
adnan kamili

Reputation: 9455

You have many options like add a hidden input tag

with name="uploadimages" and some desired value

or

Added name="uploadimages" to button may work, i am not sure about that

Upvotes: 0

Filipe Paulo
Filipe Paulo

Reputation: 134

You have two approaches:

One: That value="<?php echo $row['thing_id']; ?>" should be the value/id of your form #myform.

Two: You can pass the 'thing_id' the way Harigovind R said.

Hope it helps!

Upvotes: 0

Related Questions