How to send a variable with formData using jquery ajax

Question

How can I send a variable with formdata? I am sure it is really simple but I've tried some things and it is not working. I am using the blueimp fileupload plugin by the way.

My code now:

<script>
$(function () {
    'use strict';
    var url = window.location.hostname === 'site.nl/demo/server/php/' ?
                '//site.nl/' : 'demo/server/php/';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        formData: [
          { name: 'custom_dir', value: '/fileupload/<?PHP echo $_GET['bedrijf'] ?>/<?PHP echo $_GET['alias'] ?>/' },
          { name: 'cat_id', value: '<?PHP echo $gtc['id']; ?>'},
          { name: 'name', value: $( "#filename" ).val()},
      ],
      add: function (e, data) {
            data.context = $('<button/>').text('Uploaden starten').addClass('font-15 btn btn-secondary btn-lg waves-effect btnadd fullwidth')
                .appendTo('.uploadbutton')
                .click(function () {
                    data.submit();
                });
        },
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>

This is the part that is empty:

{ name: 'name', value: $( "#filename" ).val()},

The echoed php values work fine, but this one is empty.

I've also tried it this way:

var filename = $( "#filename" ).val();

And then below

{ name: 'name', value: filename},

This is my input field:

<input class="form-control" id="filename" type="text" name="filename" value="">

What am I doing wrong here?

i think formData should be an instance of FormData. developer.mozilla.org/de/docs/Web/API/FormData/FormData — enno.void
– enno.void, Commented Aug 29, 2018 at 16:50
@vicbyte Both. Uploading already works, but I am trying to send a name so users can change the name of the uploaded file, that name is then saved in my database. — twan
– twan, Commented Aug 29, 2018 at 16:50
Yes I used alert($( "#filename" ).val()); inside my click function, and it shows the input correctly. — twan
– twan, Commented Aug 29, 2018 at 16:58
@vicbyte Changed both the name of the variable and the name inside formdata, nothing :/ — twan
– twan, Commented Aug 29, 2018 at 17:06
Possible duplicate of Sending multipart/formdata with jQuery.ajax — NAVIN
– NAVIN, Commented Aug 29, 2018 at 19:10

Bryro · Accepted Answer · 2018-08-29 18:37:36Z

0

try:

<input class="form-control" id="filename" type="text" name="filename" value="">

var formData = new FormData(document.getElementById('filename'));

send image,audio,file or text together;

edited Aug 29, 2018 at 18:37

answered Aug 29, 2018 at 18:06

Bryro

2432 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

twan Over a year ago

This does not work. I don't even have a form element. My plugin that I use, uses formData.

Bryro Over a year ago

u need read this! developer.mozilla.org/en-US/docs/Web/API/FormData/append

Collectives™ on Stack Overflow

How to send a variable with formData using jquery ajax

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related