How to process multiple forms with Ajax-Php

Question

On an HTML page, I have two forms. Form1 contains several inputs. Form2 is used to upload files to the server, so pressing the "Upload" button invokes a php, through Ajax, which processes and uploads the files to the server. The problem I have is that I can't find a way to implement that when the "Upload" button is pressed, the files are uploaded to the server just as it does now, but also, process the data in form1 and save it in the database.

<form method="POST" id="frm_one>
   <input type="text" class="form-control" placeholder="Sol." aria-label="sc" aria-describedby="basic-addon1">
   <input type="text" class="form-control" placeholder="ID DOC" aria-label="Username" aria-describedby="basic-addon1">
</form>

<form method="POST" id="frm_two>
   <input type="text" class="form-control" placeholder="Piece" aria-label="sc" aria-describedby="basic-addon1">
   <input type="text" class="form-control" placeholder="Order" aria-label="Username" aria-describedby="basic-addon1">
</form>

<form action="procesar.php" method="POST" enctype="multipart/form-data" id="frm_subedoc">
   <input class="form-control p-1 border" type="file" name="file[]" id="selarchivos" multiple>
   <button type="button" class="btn btn-info form-control mt-3" id="btn_subir">Subir Archivos</button>
</form>

Shipping via Ajax as follows:

            $("#btn_subir").click(function(){
               var Form=new FormData($("#frm_subedoc")[0]);
               $.ajax({
                   url:"procesar.php",
                   type:"post",
                   data:Form,
                   processData:false,
                   contentType:false,
                   success: function(data){
                       $("#selarchivos").val('');
                   }
               });
           });           

The PHP that receives the request is:

<?php
   session_start();
   $carpeta="documentos/";
   $files_post=$_FILES['file']; 
   .
   .
   .
?>

The question is that if I use a single form, what happens to the parameter ' enctype="multipart/form-data" ' that I have declared in form2 ?, affects the data passed in the input ?. Also, if you modify the way I recover the data in PHP, that is, $_POST['field'] ?

Answer 1

Truthfully, I don't use many plugins any more, but this is one that I've kept using. Why reinvent the wheel?

Ravi Kusuma's jQuery File Upload Plugin

For your case, on the API & OPTIONS tab on his docs page, notice that you can send additional data along with the file:

dynamicFormData: function()
{
    //var data ="XYZ=1&ABCD=2";
    var data ={"XYZ":1,"ABCD":2};
    return data;        
}

So, in the function that contains your AJAX routine, you can first collect the field names/values from other form and put them into a javascript object. Then you can use the above code to send that object to the server-side companion PHP script that receives the file.

Also pay attention to the Server Side tab, which documents what your back-end PHP file should look like.

References:

PHP file upload inside modal window

Why isn't the image not copied to the folder?

http://hayageek.com/docs/jquery-upload-file.php