How to send a single file and form data through Ajax?

[fa2020]

Hi,
I have a form which contains some inputs and a file selector. I use the following code for sending file data:

$(document).ready(function () {
        $('#submitForm').on('click', function () {

            const formData = new FormData();
            const file = document.getElementById("myfile").files[0];

            formData.append("file", file);
            $.ajax({
                type: "POST",
                url: "/Admin/UploadPm",
                contentType: false,
                processData: false,
                data: formData
            });
        });
    });

And use the following code for saving form inputs (TextBoxes):

$(document).ready(function () {
        $('#submitForm').on('click', function () {

            $_pmNum = $('#pm-num').val();
            $_costCenter = $('#cost-center').val();
            $_serviceType = $('#serviceType').val();
            $_destination = $('#destination').val();
            $_workCenter = $('#workCenter').val();
            $_startDate = $('#date-input1').val();
            $_endDate = $('#date-input2').val();

            var myData = {
                pmNumber: $_pmNum,
                costCenter: $_costCenter,
                serviceType: $_serviceType,
                destination: $_destination,
                workCenter: $_workCenter,
                startDate: $_startDate,
                endDate: $_endDate,
            }
            $.ajax({
                type: "POST",
                url: "/Admin/UploadPm",
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                data: myData
            });
        });
    });

My problem is that the action method I use takes two input parameters. How can I combine those codes above to send both file and input (TextBoxes) simultanuously?

[phdr]

Here is some simple, non-jquery, javascript code that will submit all post and files data in a form, also works for any number of different forms on a page -

<?php

// simple conversion of a html form submission to use ajax and the FormData object
// this.form refers to the current form

?>
<script>

function submit_form(el)
{
	// get all the 'successful' form data from the current form
	var formData = new FormData(el);
	
	// setup the ajax request
	var request = new XMLHttpRequest;
	request.open("POST", "process_form.php");

	// display the text reply
	request.onreadystatechange = function() {
		if(request.readyState==4) {
			alert(request.responseText);
		}
	}

	// make the ajax request
	request.send(formData);
	
	// note: because a type='button' field doesn't submit the html form, you don't need to return false here.
	// if this used a type='submit' field or a button of type='submit', you would need to return false here.
}
</script>


<form method='post'>
Text field: <input type="text" name="abc">
File field: <input type='file' name='video'>
<input type="button" value='Submit' onclick="submit_form(this.form);">
</form>

<form method='post'>
Text field: <input type="text" name="def">
File field: <input type='file' name='audio'>
<input type="button" value='Submit' onclick="submit_form(this.form);">
</form>

The key to how this works, without writing out line after line of code for each form element, should you want to convert it to use jquery, is referencing the current form when you make the new FormData(…) object.