Skip to content

Ajax Flask Retrieve Data of Multiple Forms in Server Side

I am sending multiple form data as an formdata object using ajax to python flask. Just like the example here.

In the below code, I am sending data of two forms using ajax to flask. I can’t retrieve it on server side, However I managed to get files using request.files on python.

But I can’t retrieve or see the form data object which is appended to ajax request having id “form-2”.

How can I see the input values filled on second form in the back end.



<form id="form1">

<input type="file" name="file[]" multiple id="file-input" />


<form id="form2">

<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">

<select name="course">
  <option value="1">HTML</option>
  <option value="2">CSS</option>
  <option value="3">JAVA SCRIPT</option>


<script src=""></script>
<script src=""></script> 


$("input[type='file']").on("change", function(ev) {
  ev.preventDefault(); // Prevent browser default submit.
var form_data = new FormData()
var all_files    = document.querySelector('input[type=file]').files
var totalfiles = all_files.length;
for (var i = 0; i < totalfiles; i++) {

       form_data.append("files[]", all_files[i]);
       console.log("Added " + (1 + i)+ " files in formdata");

    console.log("added all files completely! ...appending advance options");
    var formdata2 = new FormData(document.getElementById('form-2'));
    form_data.append("advance_options", formdata2)
    console.log("successfully appended..calling ajax func");



function send_request_to_flask(form_data_parameter){

    url: "",
    type: "POST",
    data: form_data,
    contentType: false,
cache: false,
dataType: 'json',
beforeSend: function(xhr) {
    xhr: function() {  
                  var xhr = $.ajaxSettings.xhr();
                  xhr.upload.addEventListener('progress', function(event){
                      var percent = 0;
                      if (event.lengthComputable) {
                          percent = Math.ceil(event.loaded / * 100);
                   }, false);
                 return xhr;
    success: function (msg) {
    error: function(data){




You cannot append a form data object into another form data object, you have to append the fields from the second form into the first form data object.

User contributions licensed under: CC BY-SA
1 People found this is helpful