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'] ?

If you want them both processed at the same time, why not make it one form?... — War10ck, Jan 08 '20 at 15:10
I agree with the first comment. If you want to post it all at once, just have one form. Not really sure what the problem is, just combine them. Is there a good reason why you can't / won't do that? — ADyson, Jan 08 '20 at 15:19
@JuncoFuerte ` 'enctype="multipart/form-data"'` affects the `input` ?? what is affected.? — sanoj lawrence, Jan 08 '20 at 16:10
`enctype="multipart/form-data"` has no effect on anything when you are submitting the form via AJAX. The AJAX request does not use that attribute at all. And yes any other (non-file) fields which you submit in the same request will be available in PHP via $_POST. File input fields will be available via $_FILES. This is true if you submit via AJAX or via postback. There is no difference. There is nothing stopping you using one single form for this work. — ADyson, Jan 08 '20 at 17:02
P.S. in the question you said "On an HTML page, I have two forms"...but actually, per your sample code, you have three. But all the same, there is nothing that I can think of which prevents you from combining all three of them into one. — ADyson, Jan 08 '20 at 17:07
I already understood what the problem was that confused me. My inputs within the form did not have the NAME parameter, they only had the ID and I deduce that $ _POST uses the NAME of each data to process them and since they did not, the data did not arrive in PHP when I sent them through Ajax. — Junco Fuerte, Jan 08 '20 at 18:59

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

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

How to process multiple forms with Ajax-Php

1 Answers1

References: