How to get and send values from html to a PHP page?

I created a form for image uploading. This form also includes a tag to add information about the image being uploaded. I need the text from the tag to be sent over to a page “savetofile.php” whenever ‘Upload’ button is clicked.

Currently the picture uploading works, the picture information is sent correctly, but I can’t get the text from the tag on the “savetofile.php” page.

Form

<form action="savetofile.php" enctype="multipart/form-data" id="form1" method="post">

    <div>
        <label for="fileToUpload">Take or select photo(s)</label><br/>
        <input accept="image/*" capture id="fileToUpload" name="fileToUpload" onchange="fileSelected();"
               type="file"/>
    </div>

    <div>
        <br><br>
        <label for="notes">Notes:</label>
        <textarea cols="50" id="notes" maxlength="2000" name="notes" placeholder="Please enter any additional information here"
                  rows="4" onchange="this.form.submit()"></textarea>
        <br><br>
    </div>

    <div id="details"></div>

    <div>
        <input onclick="uploadFile()" type="button" value="Upload"/>
    </div>

    <div id="progress"></div>

</form>

savetofile.php

$text = $_POST['notes'];
_log('text: ' .$text);

uploadFile()

        function uploadFile() {
            var fd = new FormData();
            var count = document.getElementById('fileToUpload').files.length;

            for (var index = 0; index < count; index++) {
                var file = document.getElementById('fileToUpload').files[index];
                fd.append('myFile', file);
            }

            var xhr = new XMLHttpRequest();

            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "savetofile.php");
            xhr.send(fd);
        }

Current output:

Undefined index: notes...
text: 

Answer

Seems like you haven’t append notes field value. Add this after for loop,

fd.append('notes', document.getElementById('notes').value);