Post form with fileinput, textinput and multiple checkboxes to php via jquery ajax using formdata

Question

I need to create a form where you can pick a file to upload, enter some text in an input field and check one or more categories represented by checkboxes. That form is posted to my php script with jquery ajax.
So far I've got the part for the file upload and input field working

$('#submit').click(function() {
    var file_data = $('#fileToUpload').prop('files')[0];
    var form_data = new FormData();
    form_data.append('fileToUpload', file_data);
    form_data.append('comment', $('#comment').val());
    $.ajax({
        url: 'upload.php',
        dataType: 'html',
        data: form_data,
        processData: false,
        contentType: false,
        type: 'post',
        success: function(data) {
            console.log(data);

        },
    });
});

//upload file
echo "Filename" . $filename . " Comment:" . $_POST["comment"];

How can I append the data of the checkboxes and use them in my php script? Ideally it would just append the ids or data attributes of the checkboxes that were checked when submitting the form.

form_data.append('checkbox1', $('input:checkbox:checked').val()) — Shiv A
– Shiv A, Commented Jul 7, 2016 at 11:12

exabyssus · Accepted Answer · 2016-07-07 11:13:32Z

1

How about

var ch_data = [];

$('input[type="checkbox"]:checked').each(function(){
  ch_data.push($(this).attr('id'));
});

form_data.append('checkboxes', ch_data);

answered Jul 7, 2016 at 11:13

exabyssus

4412 silver badges9 bronze badges

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

1 Comment

0x1234 Over a year ago

Wow, didn't expect it to be that simple. Thank you, works like a charm!

Collectives™ on Stack Overflow

Post form with fileinput, textinput and multiple checkboxes to php via jquery ajax using formdata

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related